Theme interfering with CSS class/ids used in visual editor

  • Resolved lowestofthekeys

    (@lowestofthekeys)


    11 years, 4 months ago

    Hola,

    So I switched over to the twenty thirteen theme and have been enjoying it. I like the mark-up and customizing it was fairly easy.

    However, I stumbled on to a small issue. I’ll setup a class in my stylesheet and then attempt to link it to a specific element in one of my posts (e.g. p, div, h1, etc.), but nothing seems to happen.

    To clarify, I’ll go into style.css and add a class called “press-kit”. I’ll then go into one of my posts and create a div with “class=”press-kit””, but even after this whatever I’ve declared in the style.css won’t change the div. This is weird because if I go into say the file called “single.php” and add a class to an element in there, it does work.

Viewing 15 replies - 1 through 15 (of 20 total)

  • I assume you are using a child theme for this customisation?

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    Yes Ma’am.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    After you add the class and view the page, does the class appear in the source code?

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    Yes. I also tried adding a “style=”background #000000″” to the div and nothing seems to work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding:

    style="border: 10px solid !important;"

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    Hmm that worked for the manual styles, but when I alter the styles under style.css and add “!important”, things do not change.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’ll need to link to the page in question, point out what you’re trying to style and then tell us the CSS you’re using to (try to) style it.

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    https://pieglobal.com/pie-press-kit/ Here’s the page. If you view it under source, you can see the div in question:<div class="press_kit">. The stylesheet is available here: https://pieglobal.com/wordpress1/wp-content/themes/twentythirteen-child/style.css

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What style doesn’t work?

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    There’s more than one, but the primary is the press_kit style located at the bottom of the stylesheet or just do a ctrl-f press_kit. This is the one I tried to change the background color with using the !important tag.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can’t see the ‘!important‘ rule you added to the press_kit element, but have you that there is one too many closing bracket on some of these styles:

    .press_kit

{width: 605px; /* fallback */
  background-color: #f5f6f7;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#d5e0e7), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(left, #d5e0e7, #fff));

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #d5e0e7, #fff));

  /* IE 10 */
  background: -ms-linear-gradient(left, #d5e0e7, #fff));

  background-position: 20px -30px;}

    ?

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    Ah good eye with the brackets. I removed those and I had added the important rule beforehand, but nothing had changed when I did.

    For clarities sake, I removed the added gradient css3 classes and added the !important rule back in. Even with caches cleared it does not seem to be working.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like there’s a caching plugin enabled too

    Thread Starter lowestofthekeys

    (@lowestofthekeys)

    Yes W3 Total Cache.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you deactivate that plugin?

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Theme interfering with CSS class/ids used in visual editor’ is closed to new replies.

Tags