Transparent text background

• 

  hkzg · Member · Oct 13, 2017 at 9:37 am

  • Copy link
  • Add topic to favorites

  How can I change sites text color to white and set text background to transparent for my posts and pages?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 13, 2017 at 7:53 pm

  • Copy link

  Hi there, let’s start with this and then go from there. I think this gets everything, but the Writr theme is a bit different and more complex.

  .content-area, #page::before, body::before, .entry-content .sharedaddy:last-of-type, .entry-summary .sharedaddy:last-of-type, .entry-title, .entry-thumbnail {
    background-color: transparent;
  }
  .content-area, #page .entry-content h3.sd-title, .entry-title, .entry-title a, .content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6 {
    color: #fff !important;
  }
  .entry-title::after {
    border: none;
  }

• 

  hkzg · Member · Oct 14, 2017 at 3:39 pm

  • Copy link

  This is awesome, thank you so much! Writr theme is a bit more complex I agree, but it’s perfect on this project for me. This code works fine, but as I apply it I feel I need to tweek up a thing or two. So for instance if I wanted to change post title color to yellow or red without affecting the rest of the text how would you suggest to do that?

• 

  thesacredpath · Member · Oct 17, 2017 at 3:04 am

  • Copy link

  Add this to your custom CSS.

  .entry-title, .entry-title a {
    color: #C0392B !important;
  }

• 

  hkzg · Member · Oct 17, 2017 at 8:46 am

  • Copy link

  Thank you! Works like a charm :)

  But to fully customize this template I need a little more help. I’ve made screenshots of the remaining changes I need to do regarding colors on the site. https://imgur.com/p08vJC8
  https://imgur.com/V0oxs9x
  Hope you could help me finalize the whole thing.

  Oh, one more thing. Don’t know if I should start a new thread with this question but, why is the background white and there is no background image when the site is viewed on mobile phones? https://imgur.com/zTaoYS1

• 

  hkzg · Member · Oct 17, 2017 at 10:16 am

  • Copy link

  Here’s full image… the other one got cropped by imgur…
  https://imgur.com/jF2pmn3

• 

  thesacredpath · Member · Oct 18, 2017 at 8:14 pm

  • Copy link

  I believe this catches all you indicate in your screenshots (thanks a lot for those).

  #page .entry-content div.sharedaddy h3 {
    color: #c0392b !important;
  }
  .sd-sharing-enabled .sd-sharing-enabled {
    border-color: #c0392b;
  }
  .entry-content hr {
    background-color: #c0392b;
  }
  blockquote {
    border-color: #c0392b
  }
  input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], textarea {
    border-color: #c0392b;
  }
  input[type="submit"] {
    background-color: #c0392b;
  }

• 

  thesacredpath · Member · Oct 18, 2017 at 8:20 pm

  • Copy link

  And, here is for the search form.

  input[type="search"]:focus {
    border-color: #f1c40f !important;
  }

• 

  hkzg · Member · Oct 19, 2017 at 9:07 am

  • Copy link

  Respect is massive! Thank you so much! This is why Wp rulez, best support ever! :)

• 

  thesacredpath · Member · Oct 19, 2017 at 12:06 pm

  • Copy link

  You are welcome, and thank you!