Implementing styles for single-post pages using child theme

  • Resolved dbg0303

    (@dbg0303)


    8 years, 3 months ago

    Hi,
    I have been reading several posts but I haven’t come across a solution yet.

    I am currently using TwentySixteen theme. I have correctly set up a child theme with style.css and functions.php.

    I have a front page and several posts. I want my posts to be styled differently to my pages, such as removing footers and aligning the divs differently to default TwentySixteen format.

    in style.css on child theme I have the following code –

    .entry-footer {
display: none !important;
}
.entry-title{
text-align: center;
}

.entry-content {
float: none !important;
margin-right: 25% !important;
margin-left: 25% !important;
width: 50% !important;
}

    When I update, this style is applied to front page and posts. I want to apply this style ONLY on posts or single-posts. I want to configure my front page separately.

    how can I do this? Ideal solution should be adding code to functions.php or style.css in my child theme. can I change the above css code to specifically apply the given style to single-post?

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 3 months ago

    apply this style ONLY on posts or single-posts.

    Open a single post page, right click and select “view source” in the browser. Then search for the <body tag and look at the classes generated. There’s a class there for the single post

    Thread Starter dbg0303

    (@dbg0303)

    8 years, 3 months ago

    Thanks Andrew.
    I am seeing the following –
    <body class="single single-post postid-86 ...">
    could you specify how I apply my style to one of these classes, say the ‘single-post’ class?

    looking at my css code, would the correct syntax be something like-

    single-post.entry-footer {
display: none !important;
}
single-post.entry-title{
text-align: center;
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 3 months ago

    Yes but with a full stop at the front of ‘single-post’ (because it’s a class) and then a space after it.

    Thread Starter dbg0303

    (@dbg0303)

    8 years, 3 months ago

    Ah, it worked. Thanks Andrew.

    tl;dr and solution –
    apply styles specifically to posts or other types, in my case the class is called ‘single-post’. this is applied in the style.css file in my child theme.

    .single-post .entry-footer {
display: none !important;
}
.single-post .entry-title{
text-align: center;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Implementing styles for single-post pages using child theme’ is closed to new replies.