3 h3 titles, make one different - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
July 9, 2015 at 12:49 am #204817
wasssu
Participant
Hi,

From a sort of visual composer for wordress I create 3 boxes (divs) and inside of every one of these I have a h3. But I want every one of them(h3) to have a different background color. Now every box looks like this:
```
<h3 class="title">Title for box X</h3>
```
And the class title look like this:
```
.title {
background: #FC3C2A;
}
```
Is it possible? The html code is the same for the 3 boxes and is added automatically by the composer.

Thanks
July 9, 2015 at 1:59 am #204820

Paulie_D
Member

Do you have the colors preset?

Do the wrapping divs have separate classes…is there an overall container?

You could create an array of colors and the cycle through them

http://codepen.io/Paulie-D/pen/gpzPNG/

July 9, 2015 at 2:22 am #204824

wasssu
Participant

I think it’s perfect your example. I’ll test it and let you know. Thank you very much.

July 11, 2015 at 8:32 am #204949

wasssu
Participant

I didn’t managed to do it, I’m still beginner at css/jquery/javascript.
The page is like this one: http://fitness-wellness.vamtam.com/, I want to change the background color of “YOGA COURSES” (middle box).

Thanks

July 11, 2015 at 9:34 am #204950
Paulie_D
Member
Ahhh…well that’s a lot harder…that’s not controlled by background color of the h3 as such…it’s controlled by a pseudo-element.
```
media="all"
.services.has-more .closed .title:after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  bottom: 0;
  width: 50px;
  background: #FC3C2A;
  z-index: -1;
  -webkit-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  transform: skew(-30deg);
}
```
…and those can’t be addressed directly with javascript/jquery.

You need to find some way of changing the PHP that outputs that h3 and giving it a class that could be addressed.

At least that would be the optimal way I guess, I’m not up on PHP.

As an alternative there is a very long ID on an ancestor several layers up that could be used but the selector would be a pain.

You’re much better of digging into the PHP and sorting that out rather than messing with JS/JS/CSS in my opinion.
July 11, 2015 at 12:11 pm #204953

wasssu
Participant

Ok, i’ll check also the php. Thank you very much for your support!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘JavaScript’ is closed to new topics and replies.