Support » Themes and Templates » [Theme: Edin] remove featured image from pages but not front page thumbnails

  • HI there,

    I just installed EDIN on a new website: http://www.blogwritersonline.com

    The front page is there structurally, with the 3 full width pages and their featured images being thumbnailed fairly well, (the 3 blue logos).

    However when you click through to the full width pages, the featured images themselves look terrible – I tried every size and they just look bad, so I want to remove them from these pages.

    I’m ok with removing featured images from all the full width pages if needs be, except the front landing page

    I can’t disable featured images, because that removes the related page thumbnails from the front page.

    In Stylesheet (style.css) is /* Hero */ section and this does reference the featured image.

    .hero.with-featured-image references background colour #1279be which is blue – which is exactly what I’m getting on my three thumbnailed pages once you click through to the actual page, so to my mind this MUST be close to the correct area!

    I see .hero appears to be pulled for both php Front Page Page Template and Full Width Page Page Template. Could we just copy the .hero code, paste it in style.css underneath the original .hero code….change it so it doesn’t display an image and call it .hero1, then change the Full Width Page Template php code to pull .hero1 instead of .hero?

    would that retain the featured image thumbnails on front page, but remove the featured image from the full width pages?

    ……..or please tell me there is a much easier way to do this! Can I add some code to the Full Page Page Template that just blocks the featured image from being displayed, but still allows Front Page to thumbnail the featured image I upload through wordpress cms? that would be so much easier!!

    Thanks so much for your help – I’m not a code writer, but I feel like I’m close to the solution (with your help, of course)!

    Richie

Viewing 7 replies - 1 through 7 (of 7 total)
  • I see you have Jetpack installed. Jetpack allows you to add your own custom CSS. Don’t edit the theme’s style.css file (or any file for that matter). Any changes you make to the theme files will be lost the next time you update or upgrade the theme.

    To activate Jetpack’s Custom CSS option, go to Jetpack → Settings. Once activated, you will see an entry under Appearance → Edit CSS. Go to that option and copy & paste the following rule to the very end:

    body:not(.home) .hero.with-featured-image {
       background-image: none !important;
    }

    So what this rule will do is to hide the featured image on all pages except for the home page.

    Thread Starter 20vk

    (@20vk)

    First of all, thank you so much for taking the time to help me – I really really appreciate it.

    Your code managed to remove the image, but left the background blue colour. It already looks so much better.

    Having never written code before, I copied and pasted in the code for the featured image and added your first line of code, (so front page was not affected), then adjusted the height (to none). I also changed the colour from blue to white.

    So now it looks like the background has gone, but the space dedicated to the background image on Full Width pages is still there. I tried replacing “cover” with “none”, but that didn’t help.

    Is there a way to remove this dead space so the body of the text sits higher up, nearer the menu?

    I feel like I’m so close now! Thanks for your help again and I’m truly sorry for the abomination of code you are about to see below:

    body:not(.home) .hero.with-featured-image {
    	background-image: none !important;
    }
    
    body:not(.home) .hero.with-featured-image {
    	position: relative;
    	margin-top: -1px;
    	background-color: #fff;
    	background-position: 50% 50%;
    	background-repeat: no-repeat;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	-webkit-background-size: cover;
    	background-size: cover;
    	border-bottom: 0;
    }
    
    body:not(.no-image-filter) .hero.with-featured-image:before {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: none;
    	background: #fff;
    	opacity: .3;
    }

    Hmm, so you don’t want the page title displayed? I thought you might still want it. Otherwise, you can just use this rule to remove the entire space:

    body:not(.home) .hero.with-featured-image {
       display: none;
    }

    Thread Starter 20vk

    (@20vk)

    NAILED IT!!

    Yeah, it would have been nice to keep the title, but I can always add it within the main body of the text.

    Thank you so much for all your help – You’ve no idea how much this will help me out. Hugely appreciated!

    Richie

    Thread Starter 20vk

    (@20vk)

    Hmmm – of course the title I typed in the body of the text now appears on the front page.

    Perhaps I have to keep the title then.

    Could you please tell me how would I reduce the height of the dedicated featured image, then, without completely removing it?

    Sorry to be a pain!

    Change the rule to this instead:

    body:not(.home) .hero.with-featured-image {
       background-image: none;
       padding: 180px 0;
    }

    The 180px is the current value. That is, there is 180px of empty space at the top and bottom of that section. Decrease the value to whatever spacing you’d like.

    Thread Starter 20vk

    (@20vk)

    That’s awesome!

    I’m pretty sure I can take it from here and recolour the background.

    Thank you again – I’ve actually learned a huge amount about how to write code from each of the suggestions you made. It seems to be a really clean language to work with.

    I also think this will be really useful for other people, as it covers all the options.

    Have a great weekend! I expect I’ll be finishing off this website!

    Richie

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Edin] remove featured image from pages but not front page thumbnails’ is closed to new replies.