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>
Related
I'm trying to hide the parent element in Wordpress if the child has no tags.
Тhis is the code:
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
I want to hide all div #tags if php string is empty.
You can use the function has_tag() to check if there is a tags.
<?php if(has_tag()) { ?>
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
<?php } ?>
If you use html elements as the $before, $sep, and $after parameters for the_tags, you can hide #tags when there's only one child (the ).
Looking at this post: Selector for when only one child exists in parent I came up with the below example.
<style>
.tags h4:nth-child(1):last-child{
display: none;
}
</style>
<div class='tags' id='tags1'>
<h4>Some nonsense</h4>
</div>
<div class='tags' id='tags2'>
<h4>Some nonsense</h4>
<ul><li>Some</li><li>other</li></ul>
</div>
I have this class for my menu: .site-header-menu
and I have this class for my content: .content
what should I do to catch .content when .site-header-menu is displayed?
I already tried this but it doesn't work:
.site-header-menu + .content{
opacity: 0;
}
Do you have some suggestion? This kind of things are possible using css?
I'm using Wordpress so this is my php struture in header.php. The idea is to hide the content of my page template when site-header-menu is open:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
<button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
How is .site-header-menu being displayed? Is a class being added to display the menu or is its display property being directly manipulated by JavaScript? There is no indication how you can tell if the menu is displayed?
.site-header-menu + .content{
opacity: 0;
}
The above rule, because of the plus sign, will only apply if the element with class content is immediately following the element with class site-header-menu in the DOM. For example:
<div class="site-header-menu">
... menu stuff ...
</div>
<div class="content">
... content stuff ...
</div>
This might be the problem, but without actually seeing the output HTML it's hard to say.
If you are using PHP or JS to toggle the visibility of the menu you could potentially add/remove an additional class to .content that will hide/show it based on the menu being displayed or not.
/* CSS rule to hide the .content element */
.content.hideMe {
visibility: none;
}
// pseudo-script click event handler (NOT REAL SCRIPT!)
function menuButtonClick() {
if (menuCurrentlyDisplayed) {
// menu is already displayed so hide it and show content
hideMenu;
removeClass(".content", "hideMe");
} else {
// menu is not yet displayed so show it and hide content
showMenu;
addClass(".content", "hideMe");
}
}
If you could post your output HTML, or set up a fiddle for us to take a look, it would be helpful.
I've got a div that is displaying the most popular 8 items from the shop on the home page. But I can't figure out how to produces a margin between them and get the price and add to basket button to display below the image header. see image of what it looks like now here
Any suggestions?
Here's the php code:
<div class="popular-im">
<?php $args=a rray( 'post_type'=>'product', 'stock' => 4, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '
<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="190px" height="190px" margin="100px" />'; ?>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div?
And the only css I have:
ul.popular-list li {
width: 1100px;
display: inline-block;
border: 2px solid black;
margin: 0px;
}
You've set the margin property on the list items to 0px. You need to specify what direction you want to "push" them in.
For example:
ul.popular-list li{
margin-right: 10px;
}
Will make each item push its neighbour 10px to the right (you might want to remove this effect on the last item, to make the spacing equal).
Can't give advice on moving the price etc. down without actual HTML to see, but setting something to display: block will automatically push it onto its own line.
I have site http://insideoutdogtraining.com/young-calicoe-dog-fighting where author box is coming under post content using plugin http://dempseymarketing.com/products/relauthor-plugin-for-wordpress/.
But i want to increase the size of author image so it will fit to main author box div. but i change any other value in get_avatar that is of no use, it is shoing 50x50 only.
how i increase the size of image ?
If your themes support custom css, try add this css to make it's looks prettier:
.author-title {margin-top: 0;}
.data-image .avatar {border-radius: 6px; width: 80px; height: 80px;}
.author-box {width: 100%; padding: 0 30px 20px 0; clear: both;}
You will get result like this: http://prntscr.com/6aenaz
Why not just using this lines of code in your theme instead of plugin?
<?php if ( get_the_author_meta( 'description' ) && ( ! function_exists( 'is_multi_author' ) || is_multi_author() ) ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries ?>
<div id="author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'yourthemesname_author_bio_avatar_size', 68 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<h2><?php printf( __( 'About %s', 'yourthemesname' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
<div id="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'yourthemesname' ), get_the_author() ); ?>
</a>
</div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #author-info -->
<?php endif; ?>
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!