Need to hide text overlay on front page image in SELA theme

bieresdechambly · Member · Apr 28, 2015 at 4:39 pm
Copy link
Hi Richard-

I decided to leave the color scheme on the links bar as is. What I really need help with on the home page. I have decided to not use a title for the home page. However, now there is too much white space between the featured image and the social media icons just above the “Latest Additions” section.

I’d like the white space between the social media icons and the bottom of the featured image to be only 15 pixels max. And, I only want this on the home page ONLY. Can you help? I need to get this done ASAP.

Thank you,
Gordon
thesacredpath · Member · Apr 28, 2015 at 10:13 pm
Copy link
First off, edit your home page and add a title back in since the search engines like to see page and post titles and then add the following CSS to hide it and tighten up the spacing.
```
.home .hentry .entry-header {
    display: none;
}
```
When you leave a title of a page or post blank, the div where the title would show is still in the HTML, so that is why you have the white space. You can use CSS to hide that div where the title was as the code above does.
bieresdechambly · Member · Apr 28, 2015 at 10:45 pm
Copy link
Hi Richard…

Thank you so much for the code. I did put it in, but there is still too much white space. I’d like to tighten it down to where the social media icons are only 15 pixels below the bottom of the featured image.

I have invited you to gain private access as an editor to tweak the CSS code.

-Gordon
thesacredpath · Member · Apr 29, 2015 at 3:01 pm
Copy link
Hi there, there was a white image in the post content above your social icons. I removed that for you.
bieresdechambly · Member · Apr 29, 2015 at 4:32 pm
Copy link
Hi Richard-

Thank you!!! It looks great!

-Gordon
thesacredpath · Member · Apr 29, 2015 at 6:17 pm
Copy link
Gordon, you are welcome. :)
bieresdechambly · Member · May 6, 2015 at 3:29 pm
Copy link
Hi Richard-

I need help with a new issue.. I would like 5 pixels of white space at the top and bottom of the main Belgian Beer logo at the very top of the website. Can you help?

Thank you in advance,
Gordon
thesacredpath · Member · May 7, 2015 at 8:13 pm
Copy link
Gordon, I would add some top and bottom margin to .site branding like this. You can adjust the numbers as you see fit.
```
.site-branding {
    margin-top: 5px;
    margin-bottom: 5px;
}
```
bieresdechambly · Member · May 7, 2015 at 10:16 pm
Copy link
Hi Richard-

That worked great! Thank you VERY MUCH for this help and ALL your CSS help thus far!!

Blessings,
Gordon
thesacredpath · Member · May 8, 2015 at 1:13 am
Copy link
Thanks Gordon and you are welcome.
bieresdechambly · Member · May 12, 2015 at 3:40 pm
Copy link
Hi Richard-

Yes I know… I have a need for CSS help for one issue! :)

I would like to remove the white text overlay for all blog posts now and in the future.

The most recent post with the white text overlay example is here:

http://belgianbeerjournal.com/2015/05/11/the-birth-of-a-new-trappist-brewery/

I look forward to your kind help!

-Gordon
thesacredpath · Member · May 12, 2015 at 5:03 pm
Copy link
If what you are wanting is to have the post title block down below the image, then that is a top margin setting. You can use this.
```
.single .post-thumbnail + .entry-header {
    margin-top: 0;
}
```
bieresdechambly · Member · May 12, 2015 at 7:29 pm
Copy link
Yes! That worked… that looks so much better! Thank you once again Richard… I think this is all the CSS help I will need for a great while!

-Gordon
bieresdechambly · Member · May 12, 2015 at 7:33 pm
Copy link
Actually, I spoke a bit too soon… the post is still covered with the post title block on the blog page:

http://belgianbeerjournal.com/blog/

Just one more tweak is needed… :)

-Gordon
thesacredpath · Member · May 12, 2015 at 8:14 pm
Copy link
Oh, that’s interesting. It shows correctly in Firefox on the blog page, but not in Chrome or Safari. Let’s add an additional CSS selector to specifically cover the blog page. Replace what I had given with the following.
```
.single .post-thumbnail + .entry-header, .blog .post-thumbnail + .entry-header {
    margin-top: 0;
}
```
bieresdechambly · Member · May 12, 2015 at 8:54 pm
Copy link
Yep- that worked… now we’re talkin’! Thank you again!!

-Gordon
thesacredpath · Member · May 12, 2015 at 9:06 pm
Copy link
You are welcome Gordon.
bieresdechambly · Member · Jun 5, 2015 at 4:23 pm
Copy link
Hi Richard…

I discovered yet one more issue I need CSS help with. When one does a search in the search box, the image (especially a featured image) is covered with the white overlay box.

Example- go to the home page:
http://belgianbeerjournal.com/

…use the SEARCH box in the right hand sidebar (at the top) and do a search for “UNIBROUE”. The first search result that comes up will be for the post- “UNIBROUE EARNS 10 MORE MEDALS FROM THE BEVERAGE TASTING INSTITUTE.”

I’d like to hide the white overlay box on all future search results… can you help? :)

Thank you,
Gordon
thesacredpath · Member · Jun 5, 2015 at 5:05 pm
Copy link
Gordon, I’m not seeing a white overlay on the image. Are you talking about where the content div projects up into the image? If so, this should do the trick for you.
```
.search .post-thumbnail + .entry-header {
    margin-top: 0;
}
```
bieresdechambly · Member · Jun 5, 2015 at 5:19 pm
Copy link
Hi Richard…

That did the trick! Thanks again!!

-Gordon

No items found.