Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 29, 2014 at 6:16 pm #342864
    DianeBenscoter

    Hi guys :)

    I’m wondering if “.page-id-xxxx” is the proper way to reference page-specific CSS?

    I have a post that is “pulling” CSS code from another page-specific ID.

    Here is a screenshot:
    http://screencast.com/t/DFdZRjooWfG
    (you can see page id 3424 is pulling CSS from page-specific CSS for page id 3279)

    Am I using this code incorrectly?

    Many thanks!! :)

    October 29, 2014 at 6:37 pm #342887
    Yigit

    Hey DianeBenscoter!

    It is not highlighted which means code is not currently being applied. What you see is post ID. You can use that too to target specific posts :)

    Cheers!
    Yigit

    October 29, 2014 at 6:43 pm #342894
    Tung Do

    You actually have two groups of CSS rules there, one for 3279 and another for 3424. However, both groups has .template-page .entry-content-wrapper h2 in common and THAT is actually the rule being used whenever you’re viewing 3279 and 3424. Therefore, this has nothing to do with page-id mix up.

    It’s the CSS !important declaration that’s forcing margin-bottom: 40px on both pages.

    For page-specific CSS, using page-id is good, but you’re also grouping other stuff with it and using !important as well. Don’t do that. As you can see, it gets confusing very quickly. Lean toward using CSS ID instead of Classes for very specific stuff.

    October 29, 2014 at 7:36 pm #342934
    DianeBenscoter

    Hey Tung,

    Thanks for chiming in! On all pages, I do want H2 to have a 40px margin-bottom, but not on page-id-3424.

    I thought .template-page and .entry-content-wrapper were needed.

    If not, what should the CSS read? How is this:
    .page-id-3424 h2 {margin-bottom: 40px !important;} (don’t I need “!important” to override default theme setting?)

    Thanks!!

    October 30, 2014 at 1:00 am #343127
    Tung Do

    I can’t see your site so my response is based on your screenshot. From what I can see, I would recommend:

    .page-id-3279 .template-page .entry-content-wrapper h1,
.template-page .entry-content-wrapper h2 {
	margin-bottom: 40px;
}

.page-id-3424 .template-page .entry-content-wrapper h1,
.page-id-3424 .template-page .entry-content-wrapper h2 {
	margin-bottom: 10px;
}

    When you put .page-id-3424 in front of template-page .entry-content-wrapper h2, it gives it more weight. Generally, this should give H2 10px margin bottom instead of 40px. However, if your 40px rule requires !important to work in the first place then your 10px rule will need !important as well.

    The difference between your version and my version is the last step. My last step is telling the CSS to replace the 40px rule with the 10px rule only when you’re on page 3424.

    October 31, 2014 at 4:37 pm #344118
    Yigit

    Hey!

    Please use following code

    .page-id-3424 h2 { margin-bottom: 10px !important; }
h2 { margin-bottom: 40px; }

    Best regards,
    Yigit

    November 3, 2014 at 12:51 am #345018
    DianeBenscoter

    Hey Tung & Yigit,

    Thanks for your suggestions. I finally got the page/site to look nice.

    Thanks again!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Proper page ID code for page-specific CSS’ is closed to new replies.