Sidebar, footer and menu does not follow css

Featured Theme Forums CSS and PHP Sidebar, footer and menu does not follow css

This topic contains 3 replies, has 2 voices, and was last updated by  Zeaks 1 year, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13399

    ikechukwu joseph
    Participant

    Hi everyone and zeak.Am working offline with instantwordpress.my sidebars in FF and IE still floated left and under the content.Also the menu stood vertical.I have included my 1000px image and the style.css for your scrutiny.Thanks so much again and so sorry for takinging your time.Am used to coding my webpages working offline but i learnt from your note that content in WP should be online.Bless you .I wanted the about page as template for other static pages outside the blog page.So in 2012 front page takes only 2 columns.
    See files below for the Corrected twenty twelve child (Blank Twenty Twelve Child)
    STYLE

    Code:
    /*
    Theme Name: Blank Twenty Twelve Child theme
    Theme URI: [URL]http://yoursite/yourtheme[/URL]
    Description: A child theme of 2012 default WordPress theme.
    Author: Your Name
    Author url: [URL]http://yoursite.com/[/URL]
    Version: 1.0
    Tags: black, blue, white, fixed-width, custom-header, theme-options
    Template: twentytwelve
    */
    @import url(‘../twentytwelve/style.css’);

    /* Increase theme width to 1000px */
    @media screen and (min-width: 960px) {
    .site {
    max-width: 1000px;
    max-width: 71.4285rem;
    }
    }
    .ie .site { max-width: 1000px; }

    footer[role=”contentinfo”] {
    max-width: 1000px;
    max-width: 71.4285rem;
    }

    /* Left & Right Sidebars */
    @media screen and (min-width: 600px) {
    .custom-layout .site-content {
    width: 50%;
    margin-left: 25%;
    }
    .custom-layout .widget-area {
    position: relative;
    width: 20%;
    }
    .custom-layout #extra-sidebar {
    float: left;
    margin-left: -75%;
    width: 20%;
    }

    }

    /* IE8 and IE7 – Left and Right Sidebars */
    .ie .custom-layout .site-content {
    width: 50%;
    margin-left: 25%;
    }
    .ie .custom-layout .widget-area {
    float: right;
    width: 20%;
    position: relative;
    }
    .ie .custom-layout #extra-sidebar {
    float: left;
    margin-left: -75%;
    width: 20%;
    }
    /* ===[ Footer Widget Areas ]=== */

    .site-info { clear: both; }
    #footer-widgets {
    width: 100%;
    border-top: none;
    }
    #footer-widgets .widget li { list-style-type: none; }

    .template-front-page #footer-widgets { padding-top: 0; }

    @media screen and (min-width: 600px) {
    #footer-widgets.three .widget + .widget + .widget {
    margin-right: 1.71429rem;
    }

    #footer-widgets.three .widget {
    clear: none;
    float: left;
    margin-right: 1.71429rem;
    max-width: 30.85%;
    width: 30.85%;
    }
    }
    /* for IE8 and IE7 */
    .ie #footer-widgets.three .widget {
    float: left;
    margin-right: 3.1%;
    width: 29.85%;
    clear: none;
    }
    .ie #footer-widgets.three .widget + .widget + .widget { margin-right: 3.1%; }

    * Hide footer widgets Homepage Template */
    .template-front-page #footer-widgets { display: none; }

    /* ===[ IE Homepage Template Widget fix ]=== */
    .ie .template-front-page .first.front-widgets,
    .ie .template-front-page.two-sidebars .widget-area .front-widgets {
    float: left;
    margin-bottom: 24px;
    width: 51.875% ;
    }
    .ie .template-front-page .second.front-widgets { clear: right; }
    .ie .template-front-page .first.front-widgets,
    .ie .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    float: right;
    margin: 0 0 24px;
    width: 39.0625% ;
    }
    .ie .template-front-page.two-sidebars .widget,
    .ie .template-front-page.two-sidebars .widget:nth-child(even) { float: none; }
    .ie .template-front-page .widget-area { clear: both; }

    .ie .template-front-page .widget {
    width: 100% !important;
    border: none;
    }
    .ie .template-front-page .first.front-widgets {
    width: 51.875%;
    float: left ;
    }
    .ie .template-front-page .second.front-widgets {
    width: 39.0625%;
    float: right ;
    }

    SIDEBAR

    Code:
    < ?php
    /**
    * The sidebar containing the main widget area.
    *
    * If no active widgets in sidebar, let's hide it completely.
    *
    * @package WordPress
    * @subpackage Twenty_Twelve
    * @since Twenty Twelve 1.0
    */
    ?>

    < ?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>


    < ?php endif; ?>
    < ?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>


    < ?php endif; // end extra sidebar widget area ?>

    FOOTER

    Code:
    < ?php
    /**
    * The template for displaying the footer.
    *
    * Contains footer content and the closing of the
    * #main and #page div elements.
    *
    * @package WordPress
    * @subpackage Twenty_Twelve
    * @since Twenty Twelve 1.0
    */
    ?>

    < ?php

    /* footer sidebar */
    if ( ! is_404() ) : ?>


    < ?php endif; ?>

    < ?php do_action( 'twentytwelve_credits' ); ?>




    < ?php wp_footer(); ?>

    ABoutPage

    Code:
    < ?php
    /*
    Template Name: About Page
    */
    ?>
    < ?php
    /**
    * The main template file.
    *
    * This is the most generic template file in a WordPress theme
    * and one of the two required files for a theme (the other being style.css).
    * It is used to display a page when nothing more specific matches a query.
    * For example, it puts together the home page when no home.php file exists.
    *
    * Learn more: [URL]http://codex.wordpress.org/Template_Hierarchy[/URL]
    *
    * @package WordPress
    * @subpackage Twenty_Twelve
    * @since Twenty Twelve 1.0
    */
    get_header(); ?>

    < ?php echo '

    This Site is Dedicated to Helping you Improve Yourself Through Self discovery Techniques,Faith Nuggets,Success Tips and Self Improvement Brekthroug Builders resources

    ‘;?>


    choiceQ2

     

     

    Ikechukwu Joseph, the author of Discovering Yourself is a notable song writer, poet, author and publisher of bestselling Unlocking Closed Doors and a monthly Bible Faith Nuggets E-zine of his Internet Ministry.

     

    His books, magazines, songs and write-ups have affected lives with immense, tremendous and
    dramatic positive results.

     

    IHe trained as a Science Educator, biologist,
    System Engineer and Website Developer
    He is a graduate of University of Ibadan (M. Ed), University of Port Harcourt (B. SC) and a duly accredited ordained Minister with Evangelistic Messengers Association International, Tennessee, USA.
    Pastor Joseph served God under different organizations like The Scripture Union, Four Square Gospel Church, NIFES, FCS, Grace of God Mission, and Believers Gospel Mission before God led him into the Harvest field



    < ?php get_sidebar(); ?>
    < ?php get_footer(); ?>

    #15189

    Zeaks
    Participant

    Hi Joseph,

    First thing, there’s a missing opening comment tag in your CSS. * Hide footer widgets Homepage Template */ should be /* Hide footer widgets Homepage Template */

    For your about template, you need to supply specific css for it, it just isn’t there for it to use. In functions you’ve used the .custom-layout body class (from the tutorial I believe)

    // Add child theme body class<br />
    function mytheme_body_class( $classes ) {<br />
    <br />
    if( ! is_page_template() )<br />
    $classes[] = 'custom-layout';<br />
    <br />
    return $classes;<br />
    }<br />
    add_filter( 'body_class', 'mytheme_body_class' );

    This function adds the .custom-layout body class to all pages except page templates, therefore your CSS which uses .custom-layout will not affect them or your about template since it’s a page template.

    I mentioned in email about adding the template body class to your CSS but I don’t see where you’ve done that in your stylesheet.

    Another (better) way to do this is to only exclude the full-width.php template and front-page.php from the body class function instead of excluding it from all page templates, that would add the body class to your new about template and everything should fall into place.

    This is what you will need to adjust to only exclude those two specific templates.

    if( ! is_page_template() )
    #15190

    ikechukwu joseph
    Participant

    Thanks Zeak for your effort.Please I just want a single 3 column STATIC page template i can adapt for the other pages and front page if possible outside my blog page buti dont seem to get you.

    The fontpage opening tag i have cut and replaced but it refuse to fix
    2.pse show me the bodyClass e.g i used

    ***Use code tags in the editor when pasting code.***

    #15191

    Zeaks
    Participant

    [SIZE=16px]Hi Joseph, I’ve given you the answer on how to add the the body class to your about template, which is what I thought you wanted to do. You must change if( ! is_page_template() ) to allow the body class to be used on your about page template. [/SIZE]
    [SIZE=16px]You can do this by specifying which page templates you do not want the body class added to such as full-width.php and front-page.php these have a different design so you’ll want to exclude that body class from them. Here is an example[/SIZE]
    [SIZE=16px]

    // Add child theme body class<br />
    function mytheme_body_class( $classes ) {<br />
    if( !is_page_template( 'page-templates/full-width.php' ) )<br />
    $classes[] = 'custom-layout';<br />
    return $classes;<br />
    }<br />
    add_filter( 'body_class', 'mytheme_body_class' );

    Notice I specified if( !is_page_template( ‘page-templates/full-width.php’ ) ) instead of !is_page_template()

    Once you do that, your about page will have the custom-layout body class and use the current CSS.[/SIZE]

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.