I've build a child theme on top of the build in theme twenty-seven-teen. After an update of the main theme my top menu is only showing in mobile or tablet mode. Everything else is working fine.
Could you please advise me on where to look for the problem? I have been comparing the files in my child to those in the main theme, but I can't find the problem.
Here is my header code, even thou I'm not sure if the issue lies here:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
/*
* If a regular post or page, and not the front page, show the featured image.
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
*/
if ( ( is_single() || is_page() ) && has_post_thumbnail( get_queried_object_id() ) ) :
echo '<div class="single-featured-image-header">';
echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="naeste_koncert" style="background-color: #003559; color: #fff">NÆSTE KONCERT:
<?php
// the query
$the_query = new WP_Query( array(
'posts_per_page' => 1,
));
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<div class="site-content-contain">
<div id="content" class="site-content">
Here is the CSS for the child theme:
/*
Theme Name: twenty_seventeen_child
Description: Chield theme for lisbjergbigband.dk
Author: admin
Template: twentyseventeen
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/
#import url("../twentyseventeen/style.css");
.navigation-top {
background: #003559 !important;
border-bottom: 1px solid #003559 !important;
border-top: 1px solid #003559 !important;
color: #fff !important;
}
.navigation-top .site-navigation-fixed .menu {
background-color: #003559;
}
.naeste_koncert {
padding:29px;
}
.site-footer{
background-color:#003559;
color:#fff;
}
.navigation-top {
background: #003559 !important;
border-bottom: 1px solid #003559 !important;
border-top: 1px solid #003559 !important;
}
.navigation-top a {
/*color: #222;*/
color: #fff !important;
}
.navigation-top .current_page_item > a {
/*color: #767676;*/
color: hsl( 250, 50%, 46% ) !important;
}
.main-navigation ul {
background: #003559 !important;
}
.main-navigation a:hover {
/*color: #767676;*/
color: hsl( 250, 50%, 46% ) !important;
}
.menu-toggle {
color: #fff !important;
}
.single-featured-image-header {
border-bottom: 1px solid #003559 !important;
}
Related
On main blog page all excerpt is showing but there is no continue reading and Have coded very well?
on the content.php I have the code
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div><!-- post-excerpt -->
On function.php I have place this code and the moretag class is not present in my style.css file and not in bootstrap is this is the reason.
/**
* Replaces the excerpt "more" text by a link.
*/
function new_excerpt_more($more) {
global $post;
return '... <a class="moretag" href="'. get_permalink($post->ID) . '"> continue reading »</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I expect output on the main blog page every excerpt should have continue reading link and should clickable and show full post.
after 4 hour of struggle I have found answer to my question yahoooo!!
on content.php place this.
<div class="post-excerpt">
<?php the_excerpt(); ?>
<?php if (!is_home()): ?>
<div class="continue-reading">
<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
<?php
printf(
/* Translators: %s = Name of the current post. */
wp_kses( __( 'Continue reading', 'mano-theme' ), array( 'span' => array( 'class' => array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
);
?>
</a>
</div>
</div><!-- post-excerpt -->
<?php endif ?>
on function.php place this code.
/**
* Customize the excerpt read-more indicator
*/
function new_excerpt_more( $more ) {
return " …";
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
On style.css paste this code
.continue-reading {
text-align: center;
}
.continue-reading a,
.entry-content .continue-reading a {
display: inline-block;
margin: 1em auto;
padding: 1em 2em;
font-family: "Fira Sans", sans-serif;
text-decoration: none;
border: 1px solid #c3c3c3;
}
.continue-reading a:hover,
.continue-reading a:focus,
.entry-content .continue-reading a:hover,
.entry-content .continue-reading a:focus {
border-color: #000;
border-width: 1px;
box-shadow: none;
}
.continue-reading a::after {
content: "…"
}
.continue-reading::after {
display: block;
content: "";
width: 7em;
border-bottom: 1px solid #c3c3c3;
margin: 4em auto 0;
}
.entry-content .continue-reading::after {
display: none;
}
OUTPUT:
So I am trying to understand why my divs are not floating when requested. I am wrapping the loop of the post in a div that floats but they are just stacking as they normally would when you add a new post.
My theme is totally blank btw so there is no conflict in css.
/* My Code */
body{
background-color: #fafafa;
font-family: 'Open Sans', sans-serif;
}
#container{
margin: 0 auto;
width: 1000px;
max-width: 90%;
background-color: #ffffff;
overflow:auto;
height:auto;
}
.blogPost{
float:left;
background-color: #D9E8EC;
display:inline-block;
width: 300px;
}
this is from my index page where the posts are listing.
<div class="blogPost">
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</div>
I'm a bit confused by this, do you just want to do a loop displaying posts next to each other? If so the code would be:
<?php
if( have_posts() ) :
while( have_posts() ) : the_post();
?>
<div class="blogPost">
<?php
get_template_part( 'entry' );
comments_template();
?>
</div>
<?php
endwhile;
endif;
?>
I am doing a lot of modifications on a wordpress theme for a friend. I have having a lot of issues with the footer staying at the bottom of the page, instead of keeps on moving up and leaving whitespace.
URL:
http://design.jarethmusic.com/about/
HTML (footer.php)
<?php global $woo_options; ?>
<?php
$total = 4;
if ( isset( $woo_options['woo_footer_sidebars'] ) ) { $total = $woo_options['woo_footer_sidebars']; }
if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<div id="footer-widgets">
<div class="col-full col-<?php echo $total; ?>">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } ?>
<div class="fix"></div>
</div>
</div><!-- /#footer-widgets -->
<?php } ?>
<div class="push"></div>
<div id="footer">
<div class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<p><?php _e( 'Powered by' ); ?> WordPress and WooThemes. <?php _e( 'Designed and edited by' ); ?> John Brown.</p>
<?php } ?>
</div></div>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
<?php wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
CSS
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; height:60px; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
I hope I can get to the bottom of this with your help.
John
No add this in your CSS:
#content {
min-height: 700px;
}
You need a minimum height of your content area to "push" the footer down to the bottom of the page. If the content area is a small portion inside of the wrapper, the footer will not be at the bottom of the page.
Side note: A very useful tool is using the Chrome browser. It has a built-in firebug-like extension that lets you inspect elements of a webpage while updating it at the same time.
Managed to fix my issue by following this small tutorial:
http://mystrd.at/modern-clean-css-sticky-footer/
Credits to mfreitas for the link.
Also, regards to everyone else who helped me in this. Thanks
John
Use position: fixed;
Update your code with this CSS:
#footer {position: fixed;}
Use position: absolute; in your css for the footer
I am currently coding a Wordpress website. I have a sidebar and the main body for my blog posts. The sidebar currently has the following properties:
.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}
and the main body for blog posts:
body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}
.post {
padding-left:10px;
border-left:thin solid #000000;
}
I am currently trying to add padding-left to .post so that there is a gap between the right border of the sidebar and the blog posts. However, this is not working (a gap is not created) for some reason. Nor is border-left (there is no border created; I tried removing the border-right property on the sidebar).
This is currently the code for index.php
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class = "sidebar">
<?php get_sidebar(); ?>
</div>
<div class="post">
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
How do I make padding-left and border-left work for the main blog posts?
Thanks!
Padding is applied within the element, so the border is on the other side of the padding. What you need is margin, which is applied outside of the element:
.post {
margin-left:10px;
border-left:thin solid #000000;
}
Here is an article explaining padding and margin in more detail.
This sounds like a conflict between the default Wordpress CSS and your themes CSS file(s). A quick hack is to add !important to the end of the CSS declarations as follows:
.post {
padding-left: 10px !important;
border-left: thin solid #000000 !important;
}
A long-term solution is to examine what CSS files are loaded (and in what order) and what selectors are being used. Excellent resource: http://codex.wordpress.org/CSS_Troubleshooting
The boxes were on one line now they have been knocked onto three why is this?
CSS:
#case_studies { margin:10px 0 0 5px; }
.case_study { float:left; width:258px; padding-left:19px; }
#case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; }
#case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; }
#case_studies .content img { margin-bottom:10px; }
.light_green img { border:1px solid #7ac63c; }
.light_orange img { border:1px solid #fa7605; }
.light_blue img { border:1px solid #4dacd8; }
#case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;}
#case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; }
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
#case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; }
#case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; }
.light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }
#case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;}
#case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; }
.light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; }
.case .content { padding:10px; }
HTML:
<div id="case_studies">
<div class="case_study light_green">
<div class="strip green"><h3 class="tri">Industrial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Industrial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_orange">
<div class="strip orange"><h3 class="tri">Commercial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Commercial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_blue">
<div class="strip blue"><h3 class="tri">Domestic</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Domestic&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
</div>
It's because in http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css you have:
#page_case_studys { float:left; width:400px; margin-left:10px; }
Which forces the following containers into that box. Since 260*3 = 780, you need at -least- a box of 780 pixels, not including any extra padding or margin.
If you specifically need #page_case_studys to have a width of 400px throughout your website, I would suggest writing a more specific CSS style for the page to target the element and set the width to auto.
Also, the boxes all have a width of 260 because of the following rule in the same stylesheet:
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
If you're using Firefox, download Firebug and use that to help solve your CSS issues. In Chrome, you can right-click the element and go to "Inspect Element".
Related links:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
In base.css, line 79 you have:
#page_case_studys {
float:left;
margin-left:10px;
width:400px;
}
You should increase the witdh to make room for all the 3 boxes.