How to separately style header and page content?

  • I am styling a template page as my front page, while I cannot style the page content separately from the header: when I try to add padding to the content, it is applied to the header together with the content. Please see below the code:

    Php file:

    <?php
/**
Template Name: Front Page
 */

get_header(); ?>

	<div id=“content” class=“content-area”>
		<main id=“front-page” class=“home” role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

			<?php endwhile; // end of the loop. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    Style.css:
    .home {
    padding-top: 100px;
    }

    Thank you very much in advance for your suggestions!

Viewing 6 replies - 1 through 6 (of 6 total)

  • If you have not already, you should create and use a child theme before changing/editing any code in your theme.

    Is it possible to post a link to your website? It is much easier to help if we can see the issue(s). I do not think you are targeting the right selector with your css. However, without seeing the website it is only a guess.

    Thread Starter luyuanye

    (@luyuanye)

    Thank you for your response!

    The site is not online yet, so I cannot post the link.

    The selector that I am trying to target is the one here
    <main id=“front-page” class=“home” role=”main”>

    I’ve tried #front-page .home, to no avail.

    This is just a guess, since I cannot see your website:

    It might have something to do with your use of the <main> element. I do not believe you can style the <main> element. I think you may need to change your main and div element in order to achieve the styling effect as so:

    <main id=“content” role="main">
		<div id=“front-page” class=“home content-area”>

    I’ve tried #front-page .home, to no avail.

    Since they are on the same element, take out the space between #front-page and .home, so it’s #front-page.home. The way that you currently have it written is that it targets any sub-elements of #front-page which have a class of .home.

    Have you tried using Firebug or Chrome Developer Tools to see if the CSS is being applied?

    Thread Starter luyuanye

    (@luyuanye)

    Thank you two for your responses.

    The CSS is being applied when I use .home selector, but it is applied to the whole page rather than the content area below the header.
    Thank you for the propositions, however they didn’t work.

    What confounds me is that the the template page is almost the same with my regular page php file, whose code reads this:

    <?php
    /**
    * The template for displaying all pages.
    *
    * This is the template that displays all pages by default.
    * Please note that this is the WordPress construct of pages
    * and that other ‘pages’ on your WordPress site will use a
    * different template.
    *
    * @package What happened
    */

    get_header(); ?>

    <div id=”primary” class=”content-area”>
    <main id=”main” class=”site-main” role=”main”>

    <?php while ( have_posts() ) : the_post(); ?>

    <?php get_template_part( ‘content’, ‘page’ ); ?>

    <?php
    // If comments are open or we have at least one comment, load up the comment template
    if ( comments_open() || ‘0’ != get_comments_number() ) :
    comments_template();
    endif;
    ?>

    <?php endwhile; // end of the loop. ?>

    </main><!– #main –>
    </div><!– #primary –>

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

    I can style the content area effortlessly without touching the header by this in style.css:

    .site-main {
    margin: 20px 5% 5% 5%;
    }

    Thank you guys very much again!

    Thread Starter luyuanye

    (@luyuanye)

    These lines in the file named content-page.php might be of help as well:

    <?php
    /**
    * The template used for displaying page content in page.php
    *
    * @package What happened
    */
    ?>

    <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <header class=”entry-header”>
    <h1 class=”entry-title”><?php the_title(); ?></h1>
    </header><!– .entry-header –>

    <div class=”entry-content”>
    <?php the_content(); ?>
    <?php
    wp_link_pages( array(
    ‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘what-happened’ ),
    ‘after’ => ‘</div>’,
    ) );
    ?>
    </div><!– .entry-content –>
    <?php edit_post_link( __( ‘Edit’, ‘what-happened’ ), ‘<footer class=”entry-meta”><span class=”edit-link”>’, ‘</span></footer>’ ); ?>
    </article><!– #post-## –>

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to separately style header and page content?’ is closed to new replies.