Ondersteuning » Thema en CSS/opmaak » Content '50%' transparant maken

  • Welke css code moet ik gebruiken om te zorgen dat de body/content 50% transparant wordt? Of iets in die geest?
    Krijg nu alleen de achtergrond of de hele body, dus incl inhoud!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • De precieze code is afhankelijk van het gebruikte theme…

      Geef zoveel mogelijk info!

    1. Geef aub de url van je site en het [parent]theme dat je gebruikt.
    2. wat je WILT BEREIKEN
    3. wat je NIET wilt
    4. wat je totnutoe hebt geprobeerd

    == == == algemeen

    • gebruik ‘rgba-kleuraanduidingen’ want die hebben ‘opacity’ [transparantie-waarden] ingebakken
    • voorbeeld:
      entry-content{
      background-color: rgba(255,137,14 0.6);/*oranje 60% transparant*/
      }`
      !!NB het kan heel goed zijn dat ‘entry-content’ in dit voorbeeld, in jouw theme, anders is genoemd…!!

      == == == extra
      Hoe weet je wat je moet aanpassen…

      Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
      Gelukkig zijn daar goede gereedschappen voor.

      In je browser: Installeer en activeer ‘webontwikkelaar’ add-ons en -plug-ins.
      Aanbevolen: ‘firebug’ of rechtsklik in de browser en kies ‘element inspecteren’
      Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

      == == ==

      Gebruik van firebug – enkele eerste stappen
      [‘element inspecteren’ werkt hetzelfde / vergelijkbaar.]
      In browser:

      1. re-klik > element inspecteren met firebug
      2. Het firebug scherm opent:

      * boven de webpagina
      * firebug-werkbalken
      * li-onder: scherm met HTML/ CSS en bijv. DOM
      * re-onder: stijl= css

      3. In de FB-werkbalk: klik het tweede icoon van links [pijltje in vakje];
      4. Beweeg je muis over de webpagina [en klik]. Hiermee selecteer je een element in de webpagina, om daarmee de code zichtbaar te maken in het FB-scherm
      5. In het FB-scherm:

      * Links: de HTML-code van het gekozen element
      * rechts: de stijl =CSS
      * klik in de css en verander de waarde; kleur grootte of voeg een regel toe
      * controleer in het deel van de webpagina of het gewenste effect wordt bereikt
      * Nee? Druk <F5> verversen browser. Probeer iets anders
      * Ja: neem de aanpassing op in de ‘style.css’ van je childtheme

      6. Er is veel info over het gebruik van firebug.
      begin eens hier: https://getfirebug.com/faq/

      == == == leesvoer
      http://www.w3schools.com/css/default.asp
      http://codex.wordpress.org/Getting_Started_with_WordPress
      http://codex.wordpress.org/CSS
      http://codex.wordpress.org/Finding_Your_CSS_Styles
      http://codex.wordpress.org/FAQ_Troubleshooting
      http://codex.wordpress.org/Backing_Up_Your_Database

      Natuurlijk zijn er ook trainingen op het internet te vinden

    Thread starter nikki

    (@eigenste-ik)

    1. De URL kan ik niet geven is beveiligd met ip adres en niet door mij 😉
    2. Ik wil bereiken dat de body/achtergrond (waar te tekst en elementen op staat) deels transparant wordt. Dus niet de achtergrond van de hele website.
    3. Ik wil NIET dat hij ook de inhoud van de body deels transparant maakt, wat me tot nu toe wel gelukt was.
    4. Had tot nu toe wel door hoe ik de afbeelding op de achtergrond transparanter kon maken. En was me dus ook al gelukt om de hele body transparanter te maken.

    Geef je content-box een achtergrondkleur in rgba, dan heb je je doel bereikt, net als W.P. Info zegt. Misschien wat handige aanvullende info: Heb je een hex-kleur uitgkozen (bijvoorbeeld #0f4455), zet hem dan om met een converter (googlen ‘convert hex to rgb’). De a factor (een decimaal cijfer tussen de 0 en 1) bepaalt de transparantie: 0 is geheel transparant, 1 is geheel dekkend. Jij wilt 50% transparantie, dus jouw a factor is 0.5

    Om te ontdekken welke class je kunt aanroepen, moet je firebug gebruiken, precies zoals W.P. Info je vertelt. Omdat je je website-adres niet kunt vrijgeven, kunnen we je niet verder helpen.

    groet & succes,
    Lianne

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Content '50%' transparant maken’ is gesloten voor nieuwe reacties.