Custom CSS
-
I am trying to add some Custom CSS to the toggle bar, so the toggle function fits the theme of my site. Is this possible? I need my title the actual toggle bar to be a specific color (i.e., font style, font color, background color, hover color, etc.)
I brought the following in to Custom CSS, made a few changes, and nothing happened on the front-end:
/*************************************************************** Begin Toggle */ .doptoggle-wrapper{ margin: 0 0 1.5em 0; } .doptoggle-wrapper .doptoggle{ background: #414141; color: #fff; display: block; font-family:"Petita", Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size: 1em; line-height: 2em; padding: 0 1em; text-decoration: none; z-index: 1000; } .doptoggle-wrapper .doptoggle .icon, .doptoggle-wrapper .doptoggle .active-icon{ background: none; color: #e2e2e2; display: block; float: right; font-size: 1.5em; line-height: 1.35em; -webkit-transition: color 300ms linear; -moz-transition: color 300ms linear; -ms-transition: color 300ms linear; -o-transition: color 300ms linear; transition: color 300ms linear; } .doptoggle-wrapper.dopactive .doptoggle{ background: #e2e2e2; color: #212121; -webkit-transition: background 300ms linear, color 300ms linear; -moz-transition: background 300ms linear, color 300ms linear; -ms-transition: background 300ms linear, color 300ms linear; -o-transition: background 300ms linear, color 300ms linear; transition: background 300ms linear, color 300ms linear; } .doptoggle-wrapper.dopactive .doptoggle .icon, .doptoggle-wrapper.dopactive .doptoggle .active-icon{ color: #212121; -webkit-transition: color 300ms linear; -moz-transition: color 300ms linear; -ms-transition: color 300ms linear; -o-transition: color 300ms linear; transition: color 300ms linear; } .doptoggle-wrapper .doptoggle:hover{ background: #000000; color: #e2e2e2; -webkit-transition: background 300ms linear, color 300ms linear; -moz-transition: background 300ms linear, color 300ms linear; -ms-transition: background 300ms linear, color 300ms linear; -o-transition: background 300ms linear, color 300ms linear; transition: background 300ms linear, color 300ms linear; } .doptoggle-wrapper .doptoggle:hover .icon, .doptoggle-wrapper .doptoggle:hover .active-icon{ color: #e2e2e2; -webkit-transition: color 300ms linear; -moz-transition: color 300ms linear; -ms-transition: color 300ms linear; -o-transition: color 300ms linear; transition: color 300ms linear; } .doptoggle-wrapper .doptoggle .icon, .doptoggle-wrapper.dopactive .doptoggle .active-icon{ display: block; } .doptoggle-wrapper.dopactive .doptoggle .icon, .doptoggle-wrapper .doptoggle .active-icon{ display: none; } .doptoggle-wrapper .doptoggle-content{ border: 1px solid #e2e2e2; display: none; padding: 1.5em 1em; }
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Custom CSS’ is closed to new replies.