Support » Plugin: DOP Shortcodes » 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;
    }

    The site I am working on is

    http://wordpress.org/plugins/dop-shortcodes/

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS’ is closed to new replies.