I am building an ecommerce site using this theme http://goo.gl/3BwG7R
I have changed the header to black and and have a light logo. When viewed on mobile and tablet I need the header to be white (native) and the logo to be dark.
I have failed to utilize the media queries to make this happen.
The theme has 2 header files, the main file calls the other files to display stuff.
*** MAIN HEADER ------------------
<div id="logo" class="positionleft"><?php if_logo(); // print the logo html ?></div>
--------------------------------------------
*** SECOND HEADER (called header-functions) -----------------
// print the logo html
if(!function_exists("if_logo")){
function if_logo(){
$logotype = if_get_option( THE_SHORTNAME . '_logo_type');
$logoimage = if_get_option( THE_SHORTNAME . '_logo_image');
$sitename = if_get_option( THE_SHORTNAME . '_site_name');
$tagline = if_get_option( THE_SHORTNAME . '_tagline');
if($sitename=="") $sitename = get_bloginfo('name');
if($tagline=="") $tagline = get_bloginfo('description');
if($logoimage == "") $logoimage = get_stylesheet_directory_uri() . "/images/logo.png";
?>
<?php if($logotype == 'textlogo'){ ?>
<h1><?php echo $sitename; ?></h1><span class="desc"><?php echo $tagline; ?></span>
<?php } else { ?>
<div id="logoimg">
<a href="<?php echo home_url( '/' ) ; ?>" title="<?php echo $sitename; ?>" >
<img src="<?php echo $logoimage ; ?>" alt="<?php echo $sitename; ?>" />
</a>
</div>
<?php } ?>
<?php
}
}
*** MAIN CSS --------------------------
#logo{margin-right:7px;padding:14px 10px ;}
#logo img{height:43px;}
#logo h1{margin-bottom:0px; letter-spacing:-1px;}
/* Menu */
#navigation{text-align:left;}
#topnav{
margin:0;
padding:0px 0 0 0px;
list-style-type:none;
overflow:visible;
position:relative;
float:right;
}
*** LAYOUT CSS ---------------------
#logo{text-align:center;margin:0px;}
#logoimg img{text-align:center;margin:0px auto; max-width:100%;}
Here is a quick mark up of what it would look like to use media queries with img rather than using a background image. I used divs instead of images, but it's the same concept. If you minimize the browser you will see the text change.
Use logo as a background with media query.
#media (min-width:769px){
#logo{
background-image: url(link/to/main/logo.png);
}
}
#media (max-width:768px){
#logo{
background-image: url(link/to/tablet/logo.png);
}
}
#media (max-width:480px){
#logo{
background-image: url(link/to/mobile/logo.png);
}
}
Related
I'm using the Sparkling theme on a Wordpress site. The theme uses Flexslider within a div at the top of the page. Each slide contains an image along with a div containing a post title and excerpt.
The slider is built within header.php like in this function:
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
echo '</li>';
endwhile;
endif;
echo '</ul>';
echo ' </div>';
}
}
endif;
And the resulting HTML looks like this:
<div class="top-section">
<div class="flexslider">
<ul class="slides">
<li>
<img width="1920" height="512" src="http://pathtoslider.jpeg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="slide1"
srcset="pathstodifferentresolutions.jpg"
sizes="(max-width: 1920px) 100vw, 1920px" />
<div class="flex-caption">
<h2 class="entry-title">Tomatoes</h2>
<div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
</div>
</li>
..more slides..
</ul>
</div>
</div>
<div class="container main-content-area">
By default it suppresses the flex-caption on small screens by setting display:none in a media query, but I want to display it, so I set the display to inline in my own media query.
This leads to another problem because the whole top-section div is the height of the image and there isn't necessarily room for the flex-caption.
I would like the bottom of the entry-title to be aligned with the bottom of the image, and the excerpt immediately below the image, which I accomplish like this:
#media (max-width: 768px) {
.flex-caption {
display: inline;
bottom: 0;
}
.entry-title {
position: absolute;
bottom: 0;
}
.excerpt {
position: absolute;
vertical-align: top;
}
}
but this doesn't resize the top-section div, so I'm overwriting the main-content-area.
I've tried lots of different things, including trying height:auto just about everywhere.
I can't figure out how the slider height is set. It seems to be within get_the_post_thumbnail. Is that the issue?
You can try setting image height in functions.php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ).
I am using Advanced Custom Fields to display a background image in my header. Now I want to display a default image if there is no ACF-image defined. I tried this code, but it didn't work (image only shows if it is set):
<?php wp_head(); ?>
<?php if(get_field('header')) {
$image = get_field('header');
} else {
$image = '<img src="#absolute-path-to-my-image">';
}
?>
<style type="text/css">
#inner-header{
background-image: url('<?php echo $image['url']; ?>');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
thanks for any help.
I'd change things up a bit. You're experiencing problems because you're passing an image element in if there's no 'header' present (you should only be passing the src):
<?php
// Get the field
$image = get_field('header');
// Does the field exist ? src : default
$image_src = $image ? $image['url'] : 'http://example.com/default/src.jpg';
?>
<style>
#inner-header {
background: url(<?php echo $image_src; ?>) center / cover no-repeat;
}
</style>
Using opencart version 2.0.0
Within the Product.tpl page there is a foreach option loop that contains this
<?php if ($option['type'] == 'image') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> <?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
Which is all fine and working. But what i want to know, is, I see that they've wrapped the Input in a Label class. Because this is an image select, I can have a small 50px image of a colour, to select an option, and you can click on the image itself as opposed to clicking on the radio button to select it.
what i want to know is, using the jsfiddle i've made http://jsfiddle.net/8fqqrstq/ I want to remove the radio button itself using
input[type="radio"] { visability: hidden; }
But people still click on the image to select that option. BUT!, Whe the option is selected, a :checked css is used to change the border of the image to say
border: solid 1px #ff0000
How would i go about doing this?
I don't have enough reputation to comment, but I was having the same problem and wanted to post a jsfiddle link to show what you were trying to do in case someone else was a bit confused on it!
The only thing changed is that I removed the text next to each option and gave each radio button the same name so that only one could be selected! I also used
display:none;
instead of
visibility: hidden;
for the radio buttons so that extra space isn't taken up.
This is the CSS that shows how to use images as options without showing the radio button too.
div.radio img { border: solid 1px #bbb; padding: 2px; }
div.radio label { font-family: arial; }
input[type=radio]{ display: none; }
input[type=radio]:checked + img { border: solid 1px #ff0000; }
I want to hide the site-title and site-description on IE9 and lower. I've hidden them via the appearance option, so its hidden on Chrome, Firefox, IE10+, but it still appear on IE9 and lower.
I've tried to add all this css, but I can not manage to make it work:
.site-description {
font-size: 10pt;
}
h2 .site-description {
font-size: 10pt;
display:none !important;
}
#title_subtitle{
display:none !important;
}
#site-title a, #site-description a {visibility:hidden !important;}
.site-title a, .site-description a {visibility:hidden !important;}
I've also tried to delete them in the header, but doesn't work:
the part of the header is:
<div id="masterheader"><header id="masthead" class="site-header" role="banner">
<a class="home-link"<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<div id="logo_and_title">
<img class="header-logo" src="http://thibaultrolando.com/vinacotheque/wp-content/uploads/2014/03/logo.png"/>
<div id="title_subtitle">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
I'm currently working with a child-theme of twenty-thirteen. I've tried to do this in the style.css and also ie.css from my child, and also the original theme, but it doesn't seem to work ...
If you want to hide them via php, you should be able to remove them from your theme's header.php file. Try commenting out the lines that generate the text. If that does the trick, you can delete them.
<div id="title_subtitle">
<!--
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
-->
</div>
I'm using a lightbox plugin the uses rel="lightbox" to fire the lightbox in a gallery I'm creating using the Advanced Custom Fields pluin. All works great until I want to add a child div that is absolutely positioned in the box div. It's supposed to change opacity on hover and still have the lightbox fire.
My markup
<?php if(get_field('image')):
$attachment_id = get_field('image');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
?>
<?php echo wp_get_attachment_image( $attachment_id, medium); ?>
<div class="hover-title">
<?php the_field('hover_title');?>
</div><!-- hover title -->
<?php endif; ?>
</div><!-- box -->
If I simply remove the "hover-title" lightbox works. But I want to use that :)
my css:
.box a {
margin:5px;
float:left;
position: relative;
overflow: hidden;
opacity: 1;
display: block;
}
is that the full code. if so then you are missing an opening <div>.
fyi your first two lines should read
$attachment_id = get_field('image');
if ( $attachment_id ) {
}
no need to call get_field() twice, it is a database call after all.
Good Luck