1. Homepage
  2. Documentatie
  3. Het KickButt Theme
  4. Extra CSS

Extra CSS

Wanneer jouw website net is gemaakt in het systeem, staat er in de Customizer wat aangepaste CSS.

Dit zijn regels om de kleuren van de pagina’s van de kennisbank te kunnen aanpassen. Dit is nog niet mogelijk door middel van de Customizer zelf.

Je kan een aantal dingen doen via deze code, en mocht je het per ongeluk wissen of er gaat iets fout, kan je onderstaande code kopiëren en weer terugzetten in de aangepaste CSS van de Customizer.

.col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 100%;
}
.wedocs-single-wrap {
    width: 1170px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    margin: 20px auto;
}
.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list>li.current_page_item>a, .wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list>li.current_page_parent>a {
    background: #9c257c;
    color: #fff;
    border-radius: 5px;
}
.wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list>li.current_page_ancestor li.current_page_item>a, .wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list>li.current_page_item li.current_page_item>a, .wedocs-single-wrap .wedocs-sidebar ul.doc-nav-list>li.current_page_parent li.current_page_item>a {
    border-left: 2px solid #9c257c;
    color: #191919;
    font-weight: 700;
}

.btn:hover, .button.button-primary:hover, button:hover, input:hover[type=button], input:hover[type=submit] {
    text-decoration: none;
    background-color: #9c257c;
    color: #fff;
    opacity: .9;
}

Wanneer je de kleuren wilt aanpassen, vervang je de kleurcode “#9c257c” overal in de CSS naar je eigen gekozen kleurcode.

Wanneer je de breedte wilt aanpassen van de inhoud, dan kan je onderstaande code wijzigen:

.wedocs-single-wrap {
    width: 1170px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    margin: 20px auto;
}

Verander dan het aantal pixels achter de waarde “width:”.

Heeft dit artikel je geholpen? Ja Nee

Hoe kunnen we je helpen?