How to apply css to specific Title only?

  • Resolved obiwan77

    (@obiwan77)


    3 years, 5 months ago

    I am trying to apply different colors to the collapsed titles on my page, different versions of blue (2) so they work on the different background colors.

    The css I added to the CollapseOMatic settings page (h4, h5) were applied to the whole website, and adding the class, such as

    .collapseomatic_content h4 {font-size: 16px; color: #4AAAFF;}
    .collapseomatic_content h5 {font-size: 16px; color: #1B75F9;}

    doesn’t work. I am not sure how they are exactly identified, when I look at the source code. I tried adding the id for each title, but it seems it’s dynamically generated so not a way to add this to css. I am not a developer, just fiddling to get this to display right. Please let me know if you have a solution.
    thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author twinpictures

    (@twinpictures)

    ok wait. did you want to apply this to just specific titles as the title of the thread states, or do you want to apply it to all of a specific type of title (h4 for example)?

    Regardless, the trigclass and targclass attributes will be your friends.

    so we have triggers and targets, yes? take the following example:

    [expand title="trigger" trigclass="my_special_class"]hidden target content[/expand]

    want to change the css of just the triggers (regardless of state) with a trigger class of my_special_class? add css like so:

    .collapseomatic.my_special_class{
   color: blue;
}

    In fact, we have a little post that kind of deals with exactly this issue:
    https://spacedonkey.de/2458/collapse-o-matic-css-tricks-colomat-close/

    Hope this helps point you in the right direction!

    Thread Starter obiwan77

    (@obiwan77)

    Thanks @twinpictures ! In my case, I am using h4 tags. How would the css you mention be applied so I have 2 h4 titles with 2 different classes (because of the different colors)é

    Plugin Author twinpictures

    (@twinpictures)

    You have two options… h4 with your special class:

    [expand title="trigger" trigclass="my_special_class" tag="h4"]hidden target content[/expand]

.collapseomatic.my_special_class{
   color: blue;
}

    Every h4 collapse trigger:

    [expand title="trigger" tag="h4"]hidden target content[/expand]

h4.collapseomatic {
   color: blue;
}

    Demo:
    https://spacedonkey.de/4175/collapse-o-matic-tag-class/

    Thread Starter obiwan77

    (@obiwan77)

    Thank you so much! I ended up using the h4 css attributes and added them to the special trig class css, but didn’t use the tag.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to apply css to specific Title only?’ is closed to new replies.