Changing Header Height and Font

10 posts from 3 voices

• Started 1 year ago by acornfactorynonprofit
• Latest reply from Devin
• This topic is not resolved

Tags:

No tags yet.

1. 

   acornfactorynonprofit
   Member

   Hi,

   I'm currently modfiying http://www.acornfactory.org. How do I change the header height? I'd like there to be more padding between the logo and the bottom of the header.

   Also, I've been trying to change the font to PT Sans Narrow, but the CSS code I'm using isn't working. Here's what I put in the custom.css file:

   @font-face {
   font-family: 'PTSansNarrowRegular';
   src: url('PTN57F-webfont.eot');
   src: url('PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
   url('PTN57F-webfont.woff') format('woff'),
   url('PTN57F-webfont.ttf') format('truetype'),
   url('PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
   font-weight: normal;
   font-style: normal;

   }

   Any ideas?

   Posted 1 year ago #
2. 

   Dude
   Dude

   You can change the header height with following code. Change the height value and add the code to css/custom.css:
   

   #header .container {
       height: 155px;
   }

   It seems like your current code points to http://www.acornfactory.org/www/wp-content/themes/abundance/ptsans/PTS75F-webfont.ttf or http://www.acornfactory.org/uploads/PT-Sans/PTS75F-webfont.ttf but the network tool shows me that both files don't exist (404 error).

   Posted 1 year ago #
3. 

   acornfactorynonprofit
   Member

   I have the font saved in http://www.acornfactory.org/www/wp-content/themes/abundance/fonts/PTS75F-webfont.ttf

   How should I change the code to direct to it?

   Also, how do I increase the spacing between the bottom of the heading and the submenu? I want the navigation menu to line up with the bottom of the logo.

   Daniel

   Posted 1 year ago #
4. 

   acornfactorynonprofit
   Member

   any ideas?

   Posted 1 year ago #
5. 

   acornfactorynonprofit
   Member

   I also tried dropping all the font files into the css folder as suggested in this thread, but it doesn't seem to change anything.

   http://www.kriesi.at/support/topic/using-custom-fonts-for-nav-headers-paragraphs-etc

   Here's a link to an image that shows where I've saved the font files - http://www.acornfactory.org/ftp-font/

   Posted 1 year ago #
6. 

   Dude
   Dude

   Try to replace the absolute paths you're using at the moment:

   http://www.acornfactory.org/www/wp-content/themes/abundance/fonts/PTC75F-webfont.ttf

   with:

   http://www.acornfactory.org/wp-content/themes/abundance/fonts/PTC75F-webfont.ttf

   This gives me a valid url and the fonts should work.

   Posted 1 year ago #
7. 

   acornfactorynonprofit
   Member

   Thanks Dude - that worked.

   I had a follow up question - How do I increase the spacing between the bottom of the heading and the submenu? I want the navigation menu to line up with the bottom of the logo.

   Posted 1 year ago #
8. 

   Dude
   Dude

   Hey!

   You can use following css code:
   

   #wrap_all {
       margin: 30px auto;
   }
   
   .stretched .sub_menu {
       margin: -56px auto 0;
   }

   You can adjust the 30px and -56px value if required.

   Best regards,
   Peter

   Posted 1 year ago #
9. 

   acornfactorynonprofit
   Member

   Peter,

   When I use the code above, it aligns the text but creates other issues with the rotating banner. Please see the picture below.

   http://www.acornfactory.org/abundance-issue/

   Note the space below the header and the bottom of the rotating banner. I altered the values you gave.

   Instead of 30px, I used 0 and instead of -56px, I used -26px, but it still cuts off the navigation (the circles) of the rotating banner.

   http://www.acornfactory.org/

   Any idea how to resolve this issue?

   Daniel

   Posted 1 year ago #
10. 

    Devin
    Moderator

    Hi Daniel,

    The site looks great! Try adding the following to your custom.css:
    

    .container.slideshow_big {
    padding-top: 24px;
    padding-bottom: 14px;
    }

    In playing with the padding and such using Firebug, those values helped show everything correctly. If it causes any other issues around the site, change it to the following to only target the home page:

    #top.home .container.slideshow_big {
    padding-top: 24px;
    padding-bottom: 14px;
    }

    Regards,

    Devin

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.