Need to hide text overlay on front page image in SELA theme
-
Hello-
I am using the SELA theme for my website, and I would like to hide the white text overlay box in the featured image at my site’s front page. The featured image that is there right now is not the one I will stay with; I placed it there to see what a featured image will look like.
I would appreciate any CSS coding help!
Thank you,
GordonThe blog I need help with is: (visible only to logged in users)
-
Hi Gordon, In Sela, if you go into your Dashboard and go to Appearance > Header and scroll to the bottom, you can choose to hide the site title and description. You can then add it back in at Settings > General so that the search engines can find it.
-
Hi… I already had that setting, but it didn’t work. What else can I try? Can I create a home page with no title?
-
Sorry Gordon, I got myself confused. To hide the overlay box on the hero section, add the following CSS.
.home .hero .hentry { display: none; } -
Yes! That worked!!! Will that CSS code stay for all images, or do I need to re-enter it for each new image I put on the home page?
-
-
-
-
Hello again…
I need help with one more subject. What is the CSS code to remove the white box overlay on featured images on pages? (Default, Full width, and Grid pages) I find the box to be distracting. I would like the page title to be just below the featured image on all pages with featured images.
See these pages for examples of the white box overlay:
https://belgianbeerjournal.wordpress.com/grid-test-page/
https://belgianbeerjournal.wordpress.com/grid-test-page/advertise-with-us/Your help is greatly appreciated!!
-Gordon
-
Plus,
I noticed that the images on the “grid” pages are 360 pixels wide. Using an image that wide looks great on the “grid” )because none of the image is cropped) but when you visit that “page” the featured image of 360 pixels wide is too small.
If you use a featured image (that is 1180 pixels wide) on a page that is “linked” to a main grid page, the thumbnail image on the grid page is cropped.
How can I use a image on the grid page that is 360 pixels wide (so none of the image is cropped) but when that image is clicked on, the page that it goes to has a “full size” (1180 pixels wide) featured image?
I look forward to your answer!
-Gordon
-
To continue my comment on different image sizes for the grid page, click on this link:
https://belgianbeerjournal.wordpress.com/grid-test-page/grid-test-1/
…to see my dilemma.
-
Where the content overlaps the featured image a negative top margin has been used to move the content wrapper up, we can move that back down with the following.
.content-wrapper.full-width.with-featured-image { margin-top: 0; }On featured images for pages, the theme will not try and expand a 320px wide image to fill the full space on the pages since it would result in serious distortion and loss of quality. The Sela Theme Showcase page (at the bottom in Quick Specs) recommends a featured image of at least 1180px wide for featured images on pages. It will then crop and size that image for the grid pages.
If you look at your Advertise with Us page, where you have an 1180px wide image, it fills the entire width.
-
Hello,
Thanks for your reply. Perhaps I need to word my question in a different way.
For the “grid” page images, I’d like to use an image for the “grid” that is 360 pixels wide, but use a separate image for the featured image on the page the grid link goes to of 1180 pixels wide. Is that possible?
Plus, I tried the code:
.content-wrapper.full-width.with-featured-image {
margin-top: 0;
}…unfortunately, the way I entered it (I copied and pasted the code to the “advertise with us” page), and it did not work.
I noticed that the CSS code of:
.home .hero .hentry {
display: none;
}…was already there. I placed the NEW CSS code you gave me this morning underneath the .home .hero .hentry code, and I did not achieve my desired result. You are welcome to gain access to my site to see if I did something wrong.
I look forward to your reply.
-Gordon
-
Gordon, on moving the content down, the single page view require a different selector. Use this instead.
.content-wrapper.full-width.with-featured-image, .content-wrapper.with-featured-image { margin-top: 0; }If you choose to use 320px wide images for the featured image so they fit in the grid, then you are going to have to create a separate CSS rule for each page, using the unique page id in the opening body HTML tag. Any new page you create will require its own unique rule. There isn’t a way to have two featured images set for a page, one to show in the grid and one to show on the actual page. This would be a sample of what would be needed for the Grid Test 1 page.
.page-id-7939 .entry-thumbnail img { visibility: hidden; } .page-id-7939 .entry-thumbnail { background: url('URL_OF_IMAGE') no-repeat scroll 0 0 transparent; }The above would have to be done for each individual page where you want a different image on the page itself, changing the page id number and then uploading the images to your media library and replacing URL_OF_IMAGE between the quote marks with the URL of full width image.
-
The CSS code on moving the content down worked! Thank you!!! That saves me from a graphics design nightmare!
As far as the other CSS code for having two different size images, I’ll work on that when I am closer to getting to that point.
Thank you again, for your tremendous help! By the way, I don’t know your first name…
-Gordon
-
-
Hi Richard…
I have one last favor to ask, then I believe My website will have the look and feel that I want for now…
When you click on a top menu item that has a drop down menu,,, (e.g. – BREWVIEWS > BELGIAN BEER STYLES) The main menu item (“BREWVIEWS”) grays out too much. How can we edit this so the main menu item with a dropdown box has “some” visibility to it?
Looking forward to your reply!
-Gordon
-
Gordon, add the following and adjust the color as desired. The original color was #4f4f4f.
.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a { color: #cc0000; } -
I tried several variations, and none seemed to work quite right. I am going to keep the default CSS.
Richard- thank you for your time and effort. If I need any other CSS customization, I know who to ask!
Cheers!
-
- The topic ‘Need to hide text overlay on front page image in SELA theme’ is closed to new replies.
WordPress.com Forums 