Change Toggle Colors - Support | Kriesi.at

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

Author

Posts
October 29, 2013 at 3:36 pm #182071

thesebogroup
Participant

Hi, I have posted this before but the site was not live. Now it is.

See the toggles on this page http://amplidata.com/amplistor/architecture-2/

I’m looking to change the color of each toggle (on this page) to a different color. See this example http://amplidata.com/?attachment_id=2330

Not being a css expert, I would appreciate specific guidance for this site.

Regards,
Seth

October 30, 2013 at 8:25 pm #182557
Josue
Inactive Moderator
Hey Seth!

Try with this (add it to Quick CSS):
```
.av_toggle_section:nth-of-type(1) .toggler{
  background: red;
}
.av_toggle_section:nth-of-type(2) .toggler{
  background: red;
}
.av_toggle_section:nth-of-type(3) .toggler{
  background: red;
}
.av_toggle_section:nth-of-type(4) .toggler{
  background: red;
}
.av_toggle_section:nth-of-type(5) .toggler{
  background: red;
}
```
Change red for your desired color in each iteration.

Best regards,
Josue
October 31, 2013 at 12:55 pm #182929

thesebogroup
Participant

Thanks Josue, I’ll try this.

What would the css look like to customize the other elects of the toggle such as hover color and content background color? Also, will the colors show up on responsive versions of the site for mobile devices?

Regards,
Seth

October 31, 2013 at 7:48 pm #183087
Josue
Inactive Moderator
Hi Seth!

For the hover color just repeat the previous code but add :hover in the end, that will target the :hover state:
```
.av_toggle_section:nth-of-type(1) .toggler:hover{
  background: orange;
}
.av_toggle_section:nth-of-type(2) .toggler:hover{
  background: yellow;
}
```
Regarding the content, it’s easier, simply target it like this:
```
#toggle-id-1-container{ background: blue; }
#toggle-id-2-container{ background: blue; }
#toggle-id-3-container{ background: blue; }
```
And so on, the last one would be 8, because you have a total of 8 tabs in that page.

Best regards,
Josue
October 31, 2013 at 10:24 pm #183126

thesebogroup
Participant

Thanks Josue.
I’m making the changes and it appears to work; however, the css impacts all the toggles on the site. I need to restrict it just to the following page http://amplidata.com/amplistor/architecture-2/

Thanks for your help.

Regards,
Seth

October 31, 2013 at 10:26 pm #183127
Josue
Inactive Moderator
Hi Seth!

Simply prefix the id to every selector:
```
.page-id-544 .av_toggle_section:nth-of-type(1) .toggler:hover{ ... }
.page-id-544 #toggle-id-1-container{ ... }
```
Cheers!
Josue
October 31, 2013 at 10:26 pm #183129

thesebogroup
Participant

One other thing I noticed is when the toggle opens, the color of the toggle changes, I need to control that as well.

Regards,
Seth

October 31, 2013 at 10:30 pm #183131
Josue
Inactive Moderator
Hey!

I noted that too, add the important rule to the base selector, this will prevent it from changing:
```
.av_toggle_section:nth-of-type(1) .toggler{
  background: red !important;
}
```
Best regards,
Josue
November 1, 2013 at 2:28 pm #183366
thesebogroup
Participant
Ho Josue,
We are getting there. On the target page http://www.amplidata.dev/amplistor/architecture-2/ there are two sets of toggles. The second set of toggles just repeat the colors of the first set even though they have separate toggle ids. Any idea what’s going on?

You can’t see this on the live site because I’m doing the work on a copy of the site in a development area. Here is the code. No matter what I change the color to on id 6-8 they repeat colors on id 1-3. I’m testing the hover color in id 1 and works fine.

Thx, Seth
```
/*For Toggle Colors:*/

.page-id-544 .av_toggle_section:nth-of-type(1) .toggler{
  background: #DCE6F2;
}
.page-id-544 .av_toggle_section:nth-of-type(1) .toggler:hover{
 background: #EFEFEF;
}
.page-id-544 .av_toggle_section:nth-of-type(2) .toggler{
  background: #C4BD97;
}
.page-id-544 .av_toggle_section:nth-of-type(3) .toggler{
  background: #93CDDD;
}
.page-id-544 .av_toggle_section:nth-of-type(4) .toggler{
  background: #B3A2C7;
}
.page-id-544 .av_toggle_section:nth-of-type(5) .toggler{
  background: #D7E4BD;
}
.page-id-544 .av_toggle_section:nth-of-type(6) .toggler{
  background: #C7C7C7; !important;
}
.page-id-544 .av_toggle_section:nth-of-type(7) .toggler{
  background: #C7C7C7;
}
.page-id-544 .av_toggle_section:nth-of-type(8) .toggler{
  background: #FFFFFF;
}
#top .toggle_icon .hor_icon, #top .toggle_icon .vert_icon, #top .toggle_icon{
border-color: #666666;
}
```
November 1, 2013 at 9:19 pm #183502
Josue
Inactive Moderator
Hey!

The first one is .avia-builder-el-5 and the second one is .avia-builder-el-8, in order to differentiate them simply prefix that to the selector:

Like this:
```
.page-id-544 .avia-builder-el-5 .av_toggle_section:nth-of-type(1) .toggler{
}
```
Regards,
Josue
November 2, 2013 at 1:01 am #183573

thesebogroup
Participant

Josue,
Thank you for your great help on this, I truly appreciate it.

I’m still having an issue targeting the second set of toggles on the page. The first set is working and is now live.

I left the code in for the second set even though the colors are not completed. I verified element 8 is correct as you said. I also tried to force it with !important; and that did not work either.

Please advise.

Regards,
Seth

November 2, 2013 at 1:05 am #183576

thesebogroup
Participant

Josue,
While you are look the toggle issue, I have another request :)

How to remove the vertical line between the social icons on the top bar of the header. I want the vertical lines on the far right of the topi bar, but not the left in between the social icons.

Thanks again!

Regards,
Seth

November 4, 2013 at 4:04 pm #184292

Devin
Inactive Moderator

Hey!

The numbers are not correct for the second set. There is no 6th element so that css effects nothing visible. Changing it to 1,2,3 for each would however.

For the border, you can use:
#top .social_bookmarks li { border: 0;}

Any other issues should be started in a new topic.

Best regards,
Devin
Author

Posts

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

The topic ‘Change Toggle Colors’ is closed to new replies.