Ondersteuning » Thema en CSS/opmaak » Colorway Home Top Feature

  • Wie kan mij helpen met het volgende:

    In Colorway op de homepage heb ik een foto geplaatst. Voor die foto is een wit (doorzichtig) kader/vorm zichtbaar waarin het mogelijk is om tekst te zetten. Ik wil dit kader en deze tekst aanpassen qua grootte. Hoe en waar kan ik dat doen? Het gaat om de invulling van de Home Top Feature.
    Op dit moment staat er in het kader Verwonderen, Ontdekken, Ervaren, Leren.
    De eerste letters wil ik vetgedrukt houden en alle letters groter. Ook wil ik graag dat het kader zich automatisch aanpast aan de woorden in het kader en niet teveel wit rondom plaatst. Nu vind ik het teveel. Kijk op http://www.kleurenrijkatelier.nl
    Graag zie ik tips tegemoet!

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Wijzig onderstaand in je (child) style.css:

    .slide .slide-content.entry {
        /*width: 415px;*/
        left: 0px;
        bottom: 85px;
        padding: 0px 15px;
        position: absolute;
        /*font-size: 16px;*/
        /*background-color: rgba(0, 0, 0, 0.6);*/
    }

    .slide-content p {
        /*color: #2B2B2B;*/
        font-size: 24px;
        line-height: 24px;
    }

    .slide .slide-content.entry {
        /*background: url(../images/purple.png);*/
        border-right: 4px solid #757575;
        background-color: rgba(255, 255, 255, 0.4) !important;
    }

    Thread starter Atelier KleurenrijK

    (@atelier-kleurenrijk)

    Dank je Ruurd voor je hulp!

    Heb het aangepast en daarna ook de font size.

    Heb je nog tips voor de volgende twee vragen?

    1. De margins zijn nog niet evenredig qua grootte om de slide (tekst) heen. Ik heb het getracht met de margin codering binnen de slide content in de css te doen, maar dat lukte niet….. waarschijnlijk doe ik iets verkeerd! Hoe kan ik het wel voor elkaar krijgen?
    2. De opacity is wel aan te passen, maar wanneer ik het aanpas verandert de opacity van de tekst ook. Ik heb al gezocht op internet, maar kan geen simpele manier vinden om los de tekst en slide opacity te veranderen. Mijn doel is om de slide liefst niet te zien en de tekst wel. Of is dit een niet oplosbaar gegeven?

    Geen dank.

    Alles wat tussen /* … */ staat wordt niet meegerekend in je css. Je kunt het of dus zo doen of je haalt de hele regel weg.

    Zijn niet onmogelijke dingen die je vraagt 🙂 Verander echter eerst het volgende:

    .slide .slide-content.entry {
          /* border-right: 4px solid #757575; */
          background-color: rgba(255,255,255,0.4) !important;
          /* opacity: .9; */
          /* text-align: left; */
          /* margin: 0; */
    }

    Ik zie dat je de opacity wilt veranderen op de gehele div element. Hierbij rekent css ook je tekst en dit wil je niet. De rest van de waarden die ik tussen /* .. */ heb gezet is dubbele css en kan voor fouten zorgen en/of niet gewenste resultaten. De opacity pas je aan door in bovenstaande css de waarde te wijzigen van 0.4 – 1.0. Hierbij veranderd alleen de achtergrond transparantie en niet je tekst transparantie.

    De padding pas je aan door in je custom css het volgende dikgedrukte aan te passen:

    .slide .slide-content.entry {
          left: 0;
          bottom: 85px;
          padding: 0 35px;
          position: absolute;
    }

    Thread starter Atelier KleurenrijK

    (@atelier-kleurenrijk)

    Dank, ook deze keer weer!

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘Colorway Home Top Feature’ is gesloten voor nieuwe reacties.