Goran Theme – Text Box

kierstinrae · Member · Nov 24, 2014 at 4:13 pm
Copy link

Add topic to favorites
Hi there,

I’m loving the Goran theme, but am looking for one solution.

On my site: http://www.theembracingproject.org, you can see that the white text over the header image is slightly difficult to read.

I would like to add a text box or fill that matches with the navigation box to underlay the text and make it a bit more visible.

Suggestions?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 24, 2014 at 6:08 pm
Copy link
Hi there, give the following a try. It puts a transparent background behind the text using RGB color with an opacity setting. The first three numbers in the background declaration are the RGB colors (0 0 0 is black) and the fourth number (0.5) is the opacity. The closer to 1, the more opaque and the closer to 0, the more transparent.
```
.hero .hentry {
    background: rgba(0, 0, 0, 0.5);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}
```
creativerrarts · Member · Dec 23, 2014 at 10:35 pm
Copy link
Hi all,

How can i add text on top of the header image?
creativerrarts · Member · Dec 23, 2014 at 10:36 pm
Copy link
This is for rrarts.co.uk website. I’d like to add our slogan on top of the header image.

Thanks in advance.
thesacredpath · Member · Dec 26, 2014 at 5:54 pm
Copy link
@creativerrarts, give the following CSS a try. You can edit the “content” placeholder text I have. The second rule below limits some of the change to screens/windows wider than 1020px because below that width, the theme switches to the tablet/mobile view and by limiting that part of the change, we keep things looking as they should be in that view.
```
.site-title:after {
    content: "This is my slogan";
    display: block;
    font-size: 75%;
    margin-top: -20px;
}
@media screen and (min-width: 1020px) {
.site-title {
    position: absolute;
    top: -15px;
}
}
```
creativerrarts · Member · Dec 27, 2014 at 6:52 pm
Copy link
@thesacredpath Thank you very much for the help!
One last question do you know if it’s possible to post the slogan mid header without being attached to the top?
thesacredpath · Member · Jan 6, 2015 at 5:47 pm
Copy link
We can include a positioning rule in the media query I gave above to move the line of text down into the middle area of the header, and then at 1020px and narrower it will move back up to the top. I’ve included a slight background so that the text is more readable, and also a bit of left and right padding. Change the media query to this.
```
@media screen and (min-width: 1020px){
	.site-title{
		position:absolute;
		bottom:-30px
	}
	.site-title:after {
		position: relative;
		top: 150px;
		background: rgba(0, 0, 0, 0.3);
		padding-left: 5px;
		padding-right: 5px
	}
}
```
creativerrarts · Member · Jan 7, 2015 at 11:56 pm
Copy link
Thank you very much for all the help. It has worked!!

HAPPY NEW YEAR
thesacredpath · Member · Jan 9, 2015 at 5:35 pm
Copy link
You are welcome and Happy New Year to you too.

No items found.