• A
    User Newbie •

    shortcode ultimate

    buongiorno a tutto il forum,

    sono un novello, conosco poco css e sto cercando di creare una classe personalizzata per un componente di tipo box con le etichette (che a seconda dell'etichetta selezioni, fa vedere un riquadro diverso con relativo testo) il codice css è questo:

    .su-tabs {    margin: 0 0 1.5em 0;    padding: 3px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    background: #eee;}.su-tabs-nav span {    display: inline-block;    margin-right: 3px;    padding: 10px 15px;    font-size: 13px;    min-height: 40px;    line-height: 20px;    -webkit-border-top-left-radius: 3px;    -moz-border-radius-topleft: 3px;    border-top-left-radius: 3px;    -webkit-border-top-right-radius: 3px;    -moz-border-radius-topright: 3px;    border-top-right-radius: 3px;    color: #333;    cursor: pointer;    -webkit-transition: all .2s;    -moz-transition: all .2s;    -o-transition: all .2s;    transition: all .2s;}.su-tabs-nav span:hover { background: #f5f5f5; }.su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; }.su-tabs-nav span.su-tabs-disabled {    opacity: 0.5;    filter: alpha(opacity=50);    cursor: default;}.su-tabs-pane {    padding: 15px;    font-size: 13px;    -webkit-border-bottom-right-radius: 3px;    -moz-border-radius-bottomright: 3px;    border-bottom-right-radius: 3px;    -webkit-border-bottom-left-radius: 3px;    -moz-border-radius-bottomleft: 3px;    border-bottom-left-radius: 3px;    background:;    color:;}.su-tabs-vertical:before,.su-tabs-vertical:after {    content: " ";    display: table;}.su-tabs-vertical:after { clear: both; }.su-tabs-vertical .su-tabs-nav {    float: left;    width: 30%;}.su-tabs-vertical .su-tabs-nav span {    display: block;    margin-right: 0;    -webkit-border-radius: 0;    -moz-border-radius: 0;    border-radius: 0;    -webkit-border-top-left-radius: 3px;    -moz-border-radius-topleft: 3px;    border-top-left-radius: 3px;    -webkit-border-bottom-left-radius: 3px;    -moz-border-radius-bottomleft: 3px;    border-bottom-left-radius: 3px;}.su-tabs-vertical .su-tabs-panes {    float: left;    width: 70%;}.su-tabs-vertical .su-tabs-pane {    -webkit-border-radius: 0;    -moz-border-radius: 0;    border-radius: 0;    -webkit-border-top-right-radius: 3px;    -webkit-border-bottom-right-radius: 3px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 3px;    border-top-right-radius: 3px;    border-bottom-right-radius: 3px;}.su-tabs-nav,.su-tabs-nav span,.su-tabs-panes,.su-tabs-pane {    -webkit-box-sizing: border-box !important;    -moz-box-sizing: border-box !important;    box-sizing: border-box !important;}/* Styles for screens that are less than 768px */@media only screen and (max-width: 768px) {    .su-tabs-nav span { display: block; }    .su-tabs-vertical .su-tabs-nav {        float: none;        width: auto;    }    .su-tabs-vertical .su-tabs-panes {        float: none;        width: auto;    }}

    di fondo voglio lasciare il colore per le etichette non attive, per l'etichetta attiva il colore rosso vivido #ff4209 quindi nella sezione css personalizzato ho creato questa classe:

    .su-tabs.red {    margin: 0 0 1.5em 0;
    padding: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: none;
}
.su-tabs.red .su-tabs-nav {
    background:;
    cursor: default;
}
.su-tabs.red .su-tabs-nav span:hover { background: #ffb39c; }
.su-tabs.red .su-tabs-nav span.su-tabs-current { 
    background:;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    color:#ffffff;
    cursor: default;
}

    e fin qui tutto ok, ora vorrei che tutte le tabs che non hanno la classe su-tabs-current abbiano un colore diverso in modo da dare lo stesso effetto visivo del curent con il suo colore.

    Grazie per chi mi saprà dare una risposta.

    Il link per vedere la pagina è assicurazioni-on-line.org/assicurazione-auto/

    0
Effettua l'accesso per rispondere