Does anyone know how to make the header as wide as the screen? For example: this website the header goes from one end to other. Already tried changing the header size in css and didn't have much luck. Please advise. Thanks!
Simply Fresh Themes Support Forum
Header as wide as screen?
(17 posts) (3 voices)-
admin
Key MasterEmailMaribel,
Thanks for purchasing Fresh Journal!Fresh Journal's structure isn't meant to lend itself to this style characteristic. In order to make the header as wide as the screen, you will have to completely detach the header from the body and from within the main container. This will require customizing not only the stylesheet, but also the header.php file (which means every time you upgrade to a new version, you will need to carry over this customization).
This will change the structure of the design. I can walk you through the steps you will need to take to do this if you're still interested. Let me know.
Posted 2 years ago # -
admin
Key MasterOk, please give me a little time. This is a big customization and I will have to test it on my end to make sure I give you the proper code.
Posted 2 years ago # -
admin
Key MasterHere you go:
1. Change Header.php
Since there is php code to post here and the forum doesn't handle that well, I've uploaded a text file to my server that you will need to download. Download it here: http://simplyfreshthemes.com/FullWidthHeader_Header.txt
Replace everything in your header.php file AFTER the <body> tag with what is in this file.
This will restructure the layout of Fresh Journal. Your header will no longer be attached to the rest of the blog.
2. In your style.css file, please do the following:
REPLACE
#header {
margin: 0px;
padding: 0px;
width: 1000px;
height: 93px;
background: #ffffff;
clear: both;
overflow: hidden;
}WITH
#headercontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 133px;
background: #ffffff;
clear: both;
overflow: hidden;
}#header {
margin: 0px auto;
padding: 0px;
width: 1000px;
height: 93px;
clear: both;
overflow: hidden;
}AND REPLACE
#navigation {
margin: 0px;
padding: 0px 25px;
width: 950px;
height: 40px;
background: #000000;
color: #ffffff;
clear: both;
overflow: hidden;
}WITH
#navigationcontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 40px;
background: #000000;
clear: both;
overflow: hidden;
}#navigation {
margin: 0px auto;
padding: 0px 25px;
width: 950px;
height: 40px;
color: #ffffff;
clear: both;
overflow: hidden;
}This will style your header and make it full-width.
3. In your style.php file, make the following changes:
REPLACE
#header {
background: #<?php echo $freshjrl_headerbkg_color; ?>;
}WITH
#headercontainer {
background: #<?php echo $freshjrl_headerbkg_color; ?>;
}AND REPLACE
#navigation {
background: #<?php echo $freshjrl_navbkg_color; ?>;
color: #<?php echo $freshjrl_navlink_color; ?>;
}WITH
#navigationcontainer {
background: #<?php echo $freshjrl_navbkg_color; ?>;
color: #<?php echo $freshjrl_navlink_color; ?>;
}This will allow you to change the colors of the header on your Theme Options Page under "Style Options."
That should do it. Remember, every time you upgrade Fresh Journal, you will need to redo these changes. Let me know if you have any questions.
Posted 2 years ago # -
emailmaribel
MemberWow! You are simply the most amazing person ever on explaining this is in detail! I would of never been able to do all this without your help! YOU ARE SIMPLY AMAZING! THANK YOU SO MUCH!
IT WORKED BEAUTIFULLY AND LOOKS COMPLETELY AWESOME!
I will send you the link when I am finished so that you can post it if you'd like in your showcase panel as an example with the wider header.
I absolutely love your theme. It has been the easiest to work with ever! Very user friendly! Again, thank you very much!
Posted 2 years ago # -
emailmaribel
MemberKeller,
After I made all the changes as stated above, I tried to adjust the height of the logo image to 175 instead of 93 it completely erased my navigation bar and changed everything.
Prior to making the above changes, I had changed the height of the logo to 175 and it looked fine. Should I not change it after making the changes above or is it possible to do?
Thank you for your great help!
Posted 2 years ago # -
admin
Key MasterI'm so happy you were able to make the changes EmailMaribel!
As for the size issue, you now have a "headercontainer" surrounding your header and navigation. This element has a height specified (it's the height of the header PLUS the height of the navigation). In order to change the height of your header, you will need to change both the header's height and the headercontainer's height:
#headercontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 133px;
background: #ffffff;
clear: both;
overflow: hidden;
}Make sure to add the new height of your header with the height of the navigation (40px). So, if the new logo image is 175px, you need to do the following:
CHANGE:
#header => to 175px high
#headercontainer => to 215px (logo plus nav)
Can't wait to see your website!
Posted 2 years ago # -
Hi Keller! I'm also interested in doing this but petrified to make a tragic mistake... so I thought I'd put a vote in for having a full size header option (like 175px high) if it's possible in a future upgrade? I'm thinking about having a logo/header designed but would want it to be full width & taller, if so! I'm obviously still loving the theme & even "won" a stylish blog award! Keep up the great work!
Elle @ http://www.nutritionella.comPosted 2 years ago # -
emailmaribel
MemberKeller,
You are definitely my hero! It worked perfect and you explain everything so thoroughly that even a blind person could do it!
I can't wait for you to create more and more themes! You are very talented!
@ellecurtin, it is extremely easy if you follow her steps above! She explains it extremely well!
Thank you again!
Posted 2 years ago # -
@emailmaribel would you mind sending me the link to your blog so i can see what it looks like before i start working with a graphic designer?! you've inspired me to give it a try!
Posted 2 years ago # -
admin
Key Masterellecurtin - Congratulations on your stylish blogger award! As for the feature request, I've added a special feedback forum to the site for requests. I haven't fully announced it yet, but if you go to http://simplyfreshthemes.com, you should see a red tab on the left side of the screen. Use it to formally make ANY request you have for features - I want to hear from Fresh Journal users!
emailmaribel - thank you so much! I have a number of new themes in the works, but with the birth of my son a few months ago and the launch of my latest store, I've been swamped. Now that the new store is open, I hope to do a major update to Fresh Journal and get to work on a new theme soon!
Posted 2 years ago # -
Hi Keller,
I tried to adjust the header height and now have no menu bar, too! I saw the post above and made sure my headercontainer and header are ok (header 150, headercontainer 190). I am not sure what I did to the stylesheet but I keep copying/pasting the following code (from your instructions above) into the navigation portion and it still won't come back!#navigationcontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 40px;
background: #000000;
clear: both;
overflow: hidden;
}#navigation {
margin: 0px auto;
padding: 0px 25px;
width: 950px;
height: 40px;
color: #ffffff;
clear: both;
overflow: hidden;
}Posted 2 years ago # -
admin
Key Master@ellecurtin - I can see the navigation on your site. Did you fix the issue?
Posted 2 years ago # -
Hi! Yes, it came back. :) On another note, I'm trying to tweak my header so that it is really the full width (I had the designer make it 1000px wide but it doesn't seem to be full width)... or trying to make the posts, navigation, & sidebar wider... (so it looks kind of like http://www.eatingbirdfood.com, with a smaller, more centered header and wider text area) Any suggestions on which would be easier?
Posted 2 years ago # -
admin
Key MasterA completely full-width design would require more customization of the stylesheet than I listed above, which only related to the header/nav. I'm not completely clear on what it is you want with your header. Are you saying you would like your logo to start at the left side of the screen and stretch all the way to the right side? That would require a background graphic that is tiled horizontally. Otherwise if you want the body of the theme to be wider, you will have to change the CSS relating to your posts, pages, sidebar, footer, etc.
Posted 2 years ago #
Reply
You must log in to post.
Statistics
Total Posts: 406 | Total Topics: 81 | Total Members: 53
Simply Fresh Themes Support Forum Is Proudly Powered By bbPress.