Apply CSS to specific Post Template?

  • Resolved phil2016

    (@phil2016)


    1 year, 1 month ago

    Hello,

    I have a book directory website (using Divi) and have decided to build a blog in the main domain, separated from the ‘normal’ content by using a different post template (category, etc)

    I have used ACF (Advanced Custom Fields) plugin to create a Post Template, that will be applied to blog posts only, so they look different to the normal content.

    I want to apply a different style to the paragraph text in this new Post Template, but (so far as I can tell) the main text in the ACF created post template is simply tagged <p></p> like all the other text on my site.

    So I looked at the body tag, to see if I could target a body class along with the paragraph tag, to target it that way.

    The body tag looks like this:

    <body class="post-template post-template-single-regularpost post-template-single-regularpost-php single single-post postid-463095 single-format-standard logged-in admin-bar no-customize-support et_pb_button_helper_class et_fixed_nav et_show_nav et_pb_show_title et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_header_style_left et_pb_footer_columns1 et_cover_background et_pb_gutter windows et_pb_gutters3 et_right_sidebar et_divi_theme et-db">
	<script type="text/javascript">

    I can usually ‘guess’ what CSS to use, or find it using trial and error, but I am unable to discover the right format to use.

    I assume the class to use would be either ‘post-template post-template-single-regularpost' or 'post-template-single-regularpost-php‘

    But I don’t know how to target: body+body class > paragraph

    This is the post I am working on:

    https://www.bookzio.com/sample-blog-post-xyzabc/

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

  • Could be something like:

    .post-template-single-regularpost p {color:red}

    This means that all paragraphs on pages that use that template (and thus get that body class) will be red. If you want only the paragraph in the product_regpost div to be red you could use something like:

    .post-template-single-regularpost .product_regpost p {color:red}

    hope that helps

    • This reply was modified 1 year, 1 month ago by eagerbob.
    • This reply was modified 1 year, 1 month ago by eagerbob.
    Thread Starter phil2016

    (@phil2016)

    That worked – Thanks!

    I was always placing the ‘p’ first, I didn’t realise it went after. Thanks a ton!

    If it is:

    .intro p {}

    that means all paragraphs within an element (like div or span or whatever) with class “intro”. Like <div class="intro> p </div>

    Whereas

    p.intro {}

    means paragraph with class “intro”, like: p class="intro"

    • This reply was modified 1 year, 1 month ago by eagerbob.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Apply CSS to specific Post Template?’ is closed to new replies.