Twenty Twelve theme – targeting ID tags?

  • Resolved richard.miller

    (@richardmiller-1)


    11 years, 1 month ago

    I have a fundamental question about this theme – seems as though I’m missing an important concept:

    As I look at the code with Chrome’s “Inspect Element”, I keep running into ID tags that don’t appear anywhere in the stylesheet. Or if they do appear, don’t seem to have any of the style information that appears in the rendered code.

    ID tags like “masthead”, “colophon”, “primary”, etc.

    Where are these tags coming from? And how do I target them?

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Why do they need to be in the stylesheet?
    Why are you looking in the stylesheet?

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    Why wouldn’t tags be defined in the stylesheet? Don’t they need to be defined somewhere? I guess this is a concept i don’t understand.

    Specific example:

    I’m trying to change the background color of the footer. The inspector shows that #colophon and .site-info are defining its look.

    However, I can’t find either of those styles in the stylesheet, and creating styles with a different background color (even including the !important tag) doesn’t work.

    (child theme created, etc. etc.)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Not every class and ID needs to be defined in the stylesheet.

    I was wondering why you were looking in the stylesheet because it sounds as though you’re changing the theme’s original styles. Are you? If you are, may you instead use a Child Theme or Custom CSS Manager plugin to manage your CSS (to write new styles)?

    Can you provide a link to the webpage with the CSS issue and point out which element you’re struggling to target?

    esmi

    (@esmi)

    11 years, 1 month ago

    Why wouldn’t tags be defined in the stylesheet?

    Because they’re not being styled by the theme itself. That doesn’t mean styling couldn’t be applied to them via a child theme. a good theme developer provides plenty of hooks to allow for such re-styling.

    Do not edit the Twenty Twelve theme itself. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    If not in the stylesheet, then where are they styled?

    Note: I mentioned I was using a child theme in my previous comment.

    esmi

    (@esmi)

    11 years, 1 month ago

    If they are not used in the parent’s stylesheet, then there is no CSS being applied.

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    Trying to change my footer background color – this actually works in the Inspector, but not in the child theme:

    Original style:

    footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
}

    Revised style (remove border, change background color)”

    footer[role="contentinfo"] {
	background-color: #ff0000;
	border-top: 0;
}

    link to site: http://spitfiremoto.com/

    I’ve cleared the cache, no plugins running.

    esmi

    (@esmi)

    11 years, 1 month ago

    Try:

    #colophon {
	background-color: #ff0000;
	border-top: 0;
}

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    That’s what I’d originally done, and it’s what prompted my initial questions. 🙂

    I just tried it again, and it still doesn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Looks like the issue is with a syntax error in your stylesheet (child theme);

    .wrapper {
	padding: 0 40px;
	padding: 0 2.857142857rem;

    Michael

    (@alchymyth)

    11 years, 1 month ago

    this style in your child theme’s stylesheet is not closed and keeps the one further down from getting applied:

    /* add the padding removed from body .site */
.wrapper {
	padding: 0 40px;
	padding: 0 2.857142857rem;

    edit: @andrew: beaten by 3 seconds ;-(

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    lol ^

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    Oh thank god. And you guys, too. 🙂

    Thread Starter richard.miller

    (@richardmiller-1)

    11 years, 1 month ago

    What did you use to identify that stylesheet error so quickly?

    esmi

    (@esmi)

    11 years, 1 month ago

    Whenever you get to the headbanging stage with CSS, it’s always a good idea to validate your CSS – just in case. One simple error can cause some really unpredictable results.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • The topic ‘Twenty Twelve theme – targeting ID tags?’ is closed to new replies.