Opacity for text area

megmariemusic · Member · Oct 24, 2014 at 4:50 pm
Copy link

Add topic to favorites
Hi, I’m really having a hard time setting the opacity of the text area for my posts, etc. I have a very vivid background image, so I do not want the transparency to be too high for the area around the text because I want it to be readable. I’ve copied and pasted lots of different codes and none seem to work. Someone help! My blog is http://intothedeep.megmariemusic.com Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 24, 2014 at 7:28 pm
Copy link
Hi there, the following adds a transparent white background to the parent content div (#posts) and then sets a left and right padding on the child div (.post-wrap) so that there is some space on the left and right of the content.
```
#posts {
    background: rgba(255, 255, 255, 0.75;
}
.post-wrap {
    padding-left: 20px;
    margin-right: 20px;
}
```
As an alternative to the above, you could add a transparent background to the entire container area (content and sidebar) with the following.
```
.container {
    background: rgba(255, 255, 255, 0.75);
}
.post-wrap {
    padding-left: 20px;
}
```
See what you think of these and we can work from there.
megmariemusic · Member · Oct 24, 2014 at 7:46 pm
Copy link
Well the first one didn’t do anything when I pasted it in to CSS. The second one would work, but I would prefer it to just be more opaque for the text.
megmariemusic · Member · Oct 24, 2014 at 7:47 pm
Copy link
I’m using triton lite. I don’t know if that helps. I’m pretty new to this.
megmariemusic · Member · Oct 24, 2014 at 7:58 pm
Copy link
Actually, I think the container one would be fine, but now the header and the footer are really white. Can you help me get rid of that?
thesacredpath · Member · Oct 24, 2014 at 8:12 pm
Copy link
The text as it was declared in the original CSS was a grey. Are you talking about making that a darker color? If so, you can do this.
```
#posts {
color: #000;
}
```
That makes the text black although you have already done that to at least some posts from within the post editor.

The thing is, even with the text as black as it can possibly be (#000) I still can’t read hardly any of your content. It isn’t a text color issue, it is that your background just isn’t suited for a background for text. I think the only real option is setting a background color with transparency to the parent element, as you have now.

If you look here, http://intothedeep.megmariemusic.com/2014/10/16/where-have-all-the-voices-gone-an-artists-call-for-the-resurrection-of-harmony-and-polyphony/ , you aready have that text at #000. We can’t make it any blacker than that.
megmariemusic · Member · Oct 24, 2014 at 8:17 pm
Copy link
I know, I’m not talking about the font color. I’m saying the boxes containing the header and the footer are much lighter/ basically white compared to the body text using the container code. I think that might be because they already had some opacity. Is there a way to make them the same as the text body opacity? Or just not include them in the container code?
thesacredpath · Member · Oct 24, 2014 at 9:38 pm
Copy link
Give the following a try. It removes the existing transparent white from the footer and header areas.
```
.site-midrow {
    background: none;
}
.site-midrow {
    background: none;
}
#header .container {
    background: none;
}
```
megmariemusic · Member · Oct 26, 2014 at 9:23 pm
Copy link
One more thing. How do I embolden the tagline under the site title?
thesacredpath · Member · Oct 26, 2014 at 10:02 pm
Copy link
Hi there, you have already added the following CSS, which sets the site description to bold. You can set it to 800 (which is true bold) but it doesn’t seem to make a difference in this case.
```
.desc {
    font-weight: 700 !important;
}
```

No items found.