Support » Thema en CSS/opmaak » Template transparant maken

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Moderator Mike

    (@mike_vl)

    De reden dan je een witte achtergrond hebt is onderstaande css code:

    .page-wrap .content-wrapper {
      padding-top: 15px;
      padding-bottom: 15px;
      background-color: #fff;
    }

    Je kan dit aanpassen door in je child theme de code te wijzigen naar:

    .page-wrap .content-wrapper {
      padding-top: 15px;
      padding-bottom: 15px;
      background-color:none!important;
    }

    Je sidebar is dan nog niet transparant.

    Thread starter Richard

    (@richardgijsbertse)

    Thx, dat is wat ik zocht.

    Je raad mn tweede vraag dan al wel:

    Hoe maak ik de widget sidebar ook transparant?

    Heb al gezocht, maar helaas.

    Moderator Mike

    (@mike_vl)

    In het vervolg raad ik je aan vervolgvragen in een nieuw topic te plaatsen. Dat maakt het makkelijker om je vraag te beantwoorden (soms kan een vraag/antwoord behoorlijk complex zijn) en het maakt het eenvoudiger voor iemand met hetzelfde probleem om het antwoord te vinden.

    je kan de kleur verwijderen van de sidebar maar dat leest niet heel makkelijk.

    Dit is de code die de achtegronkleur op wit zet:

    #secondary {
      background-color: #ffffff;
    }

    Deze aanpassing in je child.css haalt de achtergrond weg:

    .content-wrapper #secondary {
      background-color: none;
    }

    Deze aanpassing verwijdert de achtergrond niet maar maakt hem transparant:

    .content-wrapper #secondary {
      background-color: none;
      opacity:0.8;
    }

    Tip: kijk eens naar chrome hulpprogramma’s voor ontwikkelaars: hiermee kan je op je site de css code bekijken en aanpassen om het effect te bekijken:
    https://developer.chrome.com/devtools

    Thread starter Richard

    (@richardgijsbertse)

    Geweldig Mike! De achtergrond is nu transparant, maar heb nog die tekst boven het vlak.

    Het is overigens de stylesheet.css

    http://www.twiin.nl/website/statisch/ volgens mij heb ik alles goed staan met haakjes enzo,

    _____________________________________________________________

    /*————————————————————–
    Widgets
    ————————————————————–*/
    .content-wrapper #secondary {
    background-color: none;
    opacity:0.8;
    }
    .widget-area .widget {
    position: relative;
    margin-bottom: 30px;
    padding-top: 50px;
    }
    .widget-area .widget:before {
    content: “”;
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 1px;
    }
    .widget-area .widget:first-child {
    padding-top: 0;
    }
    .widget-area .widget:first-child:before {
    height: 0;
    }
    .widget-area .widget-title {
    font-size: 16px;
    line-height: normal;
    color: #443f3f;
    font-weight: 600;
    padding-bottom: 24px;
    margin: 0;
    text-transform: uppercase;
    }
    .widget ul {
    list-style: none;
    }
    .widget-area .widget ul li {
    padding: 5px 0;

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘Template transparant maken’ is gesloten voor nieuwe reacties.