Reduce height of featured image header Goran CSS

  • Unknown's avatar
    isabelashdown · Member ·

    I’ve recently switched to Goran CSS theme – I’m really pleased with the theme, and just need help with a few tweaks!

    1) I would like to reduce the featured image/header height so that it’s nearly half what it is now. Any advice on how to do it – both as a general rule and as a page-by-page rule?

    2) How do I increase the font size of the site title?

    3) How do I change page titles, navigation titles, footer menu titles and grid titles to initial capitals instead of plain capitals?

    4) How do I add an additional credit to the footer (beside the ‘Create a free website at wordpress.com’ credit)?

    Big thanks for any help!

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

  • Unknown's avatar
    clundmark · Member ·

    Hi Isabel

    For 2 – 4 this code should work. For 1 you might need to clarify.

    1) This one is a little more complicated than it may seem. The theme is responsive and has 4 (I think) different width layouts. You can see them by decreasing the width of your browser. The height various based on the width. Are you only wanting to change the layouts WITHOUT the mobile menu?

    2) Change the percentage accordingly. 100% is the current size. 

    .site-title a {
  font-size:80%;
  }

    3) 

    .grid .entry-title,
.main-navigation li,
.footer-navigation li,
.page-title{
    text-transform: none;
}

    4) Change the text between the quotes as needed. 

    .site-info:before {
  content: "Books rule! |";
}

    Let me know how it works!

    …
    clint

  • Unknown's avatar
    isabelashdown · Member ·

    Your suggested pieces of code worked a treat, Clint. Thanks so much!

    I’d also like to apply ‘text-transform: none’ to the footer navigation (which contains my social network summary boxes) – I thought ‘.footer-navigation li’ would do the trick, but it’s remained in capitals. AND – is there a nifty trick to centralize that text, rather than left-justified as it currently is?

    Ref 1) Header/featured image height (and you’ll have to bear with my limited CSS experience!) – it looks fine on a phone or tablet, but when viewing the site on a pc, the height, of the header image feels too big, so you have to scroll down a fair bit before you see any page text or grid images. The problem is the same whether I choose to use a Header image under customization or a Featured Image within the page. When I remove the image altogether, I see an upper section which contains my logo, site title and navigation tabs, and below that another section which contains the page title (look at my blog page – it’s like this but with an additional section below for the page title). Is there any way to reduce the size of these sections, so that the featured image fits within those new size parameters?

    Many thanks!

  • Unknown's avatar
    clundmark · Member ·

    Here is an update to the code for #3. The area you are talking about is not really the footer navigation, but the footer widget titles (I think).

    .grid .entry-title,
.main-navigation li,
.footer-navigation li,
.page-title,
.footer-widget .widget-title,
.featured-page .entry-title{
    text-transform: none;
}
  • Unknown's avatar
    isabelashdown · Member ·

    Perfect! Big thanks.

  • The topic ‘Reduce height of featured image header Goran CSS’ is closed to new replies.