Goran Theme – Decrease Page Header Height

• 

  sarahqsuhail · Member · May 20, 2015 at 3:00 pm

  • Copy link
  • Add topic to favorites

  Hi All!

  I’m wondering if it’s possible to decrease the height of a page header image in the Goran Theme. And if not, can we remove both the header image and title? (I ask this because then I’d just add the page title with an H1 format.

  I like the theme, but the page headers just take up way to much space!

  ps. I also don’t know why the page title is showing up the way it is, i.e. grey outline, white fill. But will work on that too….

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  macens16 · Member · May 20, 2015 at 7:03 pm

  • Copy link

  I don’t have an answer for you, but I’m looking to increase the size of my header photo. I’m assuming the answer to your question will help me too.

• 

  isabelashdown · Member · May 20, 2015 at 7:22 pm

  • Copy link

  Looking to decrease mine too – hope there’s a genius wordpresser out there with the answer!

• 

  staff-totoro · Staff · May 21, 2015 at 4:33 am

  • Copy link

  Hi @sarahqsuhail

  You can try the following block of code, entered into the CSS tab of your site customizer here: https://wordpress.com/customize

  Here is the code to paste in:

  .hero-image .hero.without-featured-image {
  		padding: 180px 0 2em 0 !important;
  	}

  If you like you can tweak that first CSS value (180 px) to place the page title as high or low as you need. Feel free to experiment, and be sure to save your changes when you are done.

  As for your page title color, this will also work:

  .hero .page-title {
    color: #000;
    text-shadow: none;
  }

  Hope that helps. Cheers!

• 

  isabelashdown · Member · May 21, 2015 at 7:52 am

  • Copy link

  Thanks so much staff-totoro – worked a treat to reduce my homepage header – have been trying to find that answer for ages and was told it couldn’t be done! Is there a similar piece of code to do the same for the featured images on my other pages?

• 

  staff-totoro · Staff · May 21, 2015 at 8:52 pm

  • Copy link

  @isabelashdown I actually cribbed my answer from this older CSS post on the same subject, but for pages where a Featured Image is used:

  https://en.forums.wordpress.com/topic/goran-theme-reduce-height-of-featured-image?replies=2

  So that code should work for you as well. For those keeping score at home, the primary difference is the use of .hero.with-featured-image as a class instead of .hero.without-featured-image in my example above. :)

• 

  isabelashdown · Member · May 21, 2015 at 10:31 pm

  • Copy link

  staff-totoro – simply using your suggestion and replacing ‘without’ with ‘with’ did the trick perfectly. Many thanks – really appreciate it!

• 

  staff-totoro · Staff · May 21, 2015 at 11:01 pm

  • Copy link

  :)

• 

  sarahqsuhail · Member · May 22, 2015 at 2:13 am

  • Copy link

  So helpful! Thank you! Have a wonderful weekend!