I want a bigger header.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Hi,

    I am currently working with an illustrator to design a custom header for my blog. However the current size of my header isn’t ideal for what I have in mind. I am currently using an already customised Forever theme. What is the CSS for making the header bigger? Also is there any way I can make the header part of the wrap around e.g. connected to the two long side panels on the left and right of the page?

    Thanks,
    Sarah

    The blog I need help with is daisychainsanddreamers.com.

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

  • Unknown's avatar
    hallluke · Member ·

    What sort of size is your final header image going to be? If you give me a best guess at the final dimensions I’ll see if I can help out.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thank you. I haven’t decided yet but i need to give the designer the dimensions so I need to figure this out. I wanted to have a play around with the CSS to see what would be best. I’m also looking at making my layout wider as when I view my blog on a larger screen it looks so small in the middle with these huge bars running down the side.

    The set dimensions for the header in Forever theme seems to be 885 x 252pixels and I am looking to have it at least 1000 wide. Any suggestions for the page width and header width would be greatly appreciated.

  • Unknown's avatar
    hallluke · Member ·

    I like the width as it is. If you make the site too wide you’ll end up with much longer lines of text in your posts, and this can make the readability worse – which is something to avoid!

    I might even go so far as increasing the font size a bit so that you hit the magic 60-70 characters per line which seems to be a widely agreed upon target:

    #page {
  font-size:1.3em;
}

    As for header width, based on your current them I would go for 950px wide so that it lines up with the top and bottom border on your navigation menu and the left and right margins surrounding your content area and sidebar. This will keep everything well-proportioned and the different sections will still fit together very well visually.

    I think your current header image height is good, it means even on my fairly small laptop monitor I can still see the navigation bar and the title of your first post without having to scroll down the page. If you go too much bigger then you run the risk of people navigating away from your site because they can’t see any of the new content you’re updating without having to mouse around a bit. It might not sound like much effort but picture the homepage of your favourite news site – I bet there’s a modestly sized logo and lots of space for headlines above the fold to grab your attention and keep you on the site!

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks so much for the advice. I’ve made a few tweaks and aligned the header. Also made the text a little larger using the code but not quite as large as recommended.

    Another q! And I hope this makes sense…

    Ideally I’d like the header to stand along on the background with the white content area below. I may like the headings e.g. home, to stand along on the background too. Is this possible?

  • Unknown's avatar
    hallluke · Member ·

    Actually I think the size you have the text now is better, it’s balanced nicely with the title text, good choice!

    Do you mean something like this?

    #page {
  background:transparent;
}

#colophon, #main {
  background:#fff;
}

#main {
  padding-top:37px;
}

#masthead {
  padding-top:0;
}

#access {
  margin:0.8em 0;
  border:none;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Yes something like that. Thanks! It doesn’t look great with my current header but once I have my new one designed then this could work and I’ll make the changes.

    How creative can you get with the headings? I’m not sure about how they look when I try this out as they look very ‘lonely’. Could I have a separate white content area behind them?

  • Unknown's avatar
    hallluke · Member ·

    Replace the #access section from my last suggestion with this:

    #access {
  margin:0.8em 0 1em -37px;
  border:none;
  background:#fff;
  padding:5px 37px;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    That’s much better. Thanks so much!

    How would I get my masthead to be as wide as the content area so it aligns? Also it has a very thin white border around it I don’t like.

    Is there also the possibility of having the sidebar as a separate content area too? And getting rid of the divider lines?

    Sorry for all the qs!

  • Unknown's avatar
    hallluke · Member ·

    To sort our your header image you’d want to upload your new image (in this case 1050 by 252px) to your media library and then copy the URL and dimensions into the code below (replacing the #access bit again!):

    #access {
  border:none;
  background:#fff;
  padding:5px 0;
}

#masthead {
  margin:0;
}

#masthead img {
  display:none;
}

#masthead a.custom-header {
  width:1050px;
  height:252px;
  background-image:url("http://placehold.it/1050x252");
}

    It basically adds in the new image, keeps it as working as a link and hides the old one. Your theme limits the width of the header image so you can’t upload one without it being scaled down or cropped. And if you try and expand a smaller image the quality gets worse, which is definitely something to avoid!

  • Unknown's avatar
    hallluke · Member ·

    You could add a gap between the main content and sidebar but seeing as the height of both columns can be different you’d end up with two white boxes with different heights. If that’s something you can live with then let me know and I’ll see if I can figure out the CSS you need.

    If you prefer it all in one block (which I think looks better) then you could try making the border separating the two sections more prominent instead:

    #secondary {
  border-left-width:5px;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks again for your help. I’m going to copy all this code for when I come to redesign next month!

    When you say the the main content and sidebar would be at different heights do you mean that when you scroll down the bottom of the sidebar content box would then appear leaving just the background and the main content area running down the left? I’m happy with this as long as the top of the side bar and main content area align. Does this make sense?

  • Unknown's avatar
    hallluke · Member ·

    OK, so here’s my attempt at combining all the requests so far in to one (sorry it got a bit messy!):

    #page {
  background:transparent;
}

#colophon, #content, #secondary {
  background:#fff;
}

#masthead {
  padding-top:0;
  margin:0;
}

#access {
  border:none;
  background:#fff;
  padding:5px 0;
}

#masthead img {
  display:none;
}

#masthead a.custom-header {
  width:1050px;
  height:252px;
  background-image:url("http://placehold.it/1050x252");
}

#content {
  padding:37px;
  margin-left:0;
}

#secondary {
  margin:0;
  padding:37px;
  width:348px;
}

#secondary .widget {
  padding-left:0;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks so much. How do I adjust the margins between the content areas e.g. main area, masthead,sidebar,navigation menu? If you could let me know which figures they are in the code so I can play with them. I’d like to close the gaps a little.

    Thanks

  • Unknown's avatar
    hallluke · Member ·

    Sorry it’s taken me a while to get back to you.

    Try experimenting with the following, I’ll let you figure out which bit does which, in some cases it may be a combination of more than one declaration:

    #access {
  margin-top:1.615em;
  margin-bottom:1.615em;
}

#main {
  padding-top:1.615em;
}

#secondary {
  margin-right:3.64583%;
  width:29.5833%;
}

#content {
  margin-left:3.64583%;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks I can play with the space around the header but can’t seem to find the figure that adjusts the gap between the sidebar and main content area?

  • Unknown's avatar
    hallluke · Member ·

    I think for that one you need to set the content width like so:

    #content {
  width:520px;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thank you! I’ve finally got the layout as I want with the code ready to go :)

    I have a couple more qs if you don’t mind!

    1) a)On my homepage, how do I minimise the gap between the title and text extract on each post in the newsfeed? It’s quite a big gap at the moment.
    b) Also can I change the colour of the title font in each of these newsfeed items?

    2) Customising the menu bar that runs under the header:
    a)When this bar stands alone after I’ve made the discussed layout changes, can I change the shape? Eg turn it into a banner shape with inverted ‘V’ shapes at either end?
    b)Can I change the font of the menu headings? I’d like to choose a font that matches my masthead and I’d like to add in some little illustrations of daisies. Is it possible to exchange the menu words inside the menu bar for images of my chosen text/daisies, that when clicked will link through to the relevant pages?

    3) I’d also like to replace the headings in the sidebar with similar text/daisy headings. I’m guessing adding these as images from my media library will be the way to go and I know how to include these using widgets. However, how do I adjust the spacing to make these fit? Basically what I’m asking is how to adjust the spacing above and below each widget in the sidebar!

    4) Finally (hooray!) is it possible to round the corners of all the content areas on my blog eg masthead, menu bar, main content area, sidebar.

    Thanks again for your help (I’m sure I’ve been a nuisance!).

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thank you! I’ve finally got the layout as I want with the code ready to go :)

    I have a couple more qs if you don’t mind!

    1) a)On my homepage, how do I minimise the gap between the title and text extract on each post in the newsfeed? It’s quite a big gap at the moment.
    b) Also can I change the colour of the title font in each of these newsfeed items?

    2) Customising the menu bar that runs under the header:
    a)When this bar stands alone after I’ve made the discussed layout changes, can I change the shape? Eg turn it into a banner shape with inverted ‘V’ shapes at either end?
    b)Can I change the font of the menu headings? I’d like to choose a font that matches my masthead and I’d like to add in some little illustrations of daisies. Is it possible to exchange the menu words inside the menu bar for images of my chosen text/daisies, that when clicked will link through to the relevant pages?

    3) I’d also like to replace the headings in the sidebar with similar text/daisy headings. I’m guessing adding these as images from my media library will be the way to go and I know how to include these using widgets. However, how do I adjust the spacing to make these fit? Basically what I’m asking is how to adjust the spacing above and below each widget in the sidebar!

    4) Finally (hooray!) is it possible to round the corners of all the content areas on my blog eg masthead, menu bar, main content area, sidebar.

    Thanks again for your help (I’m sure I’ve been a nuisance!).

  • Unknown's avatar
    hallluke · Member ·

    The gap here is made up of padding on the two surrounding bits, change either/both of them to your liking:

    .indexed .format-image .entry-summary {
  padding-top:5px;
}

.entry-header .entry-meta {
  padding-bottom:5px;
}

    Title can be changed with the following, both normal appearance and the hover state:

    .entry-title a {
  color:#f00;
}

.entry-title a:hover {
  color:#0f0;
}

    The navigation menu, like all HTML elements, will end up by default as a big rectangle, one which we’ve applied some nice borders too. If you want to make it look different you will most likely have to create an image and apply that to the element in the background.

    You can create images to replace the menu items, each one has a unique ID (see below for more information on how to find these). Here’s an example of how you would replace one – it removes the existing hover effect too. The code you need might differ slightly depending on the size of the images:

    #menu-links .menu-item-1279 {
  background:url("http://placehold.it/77x43") no-repeat;
  text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#page #access li:hover > a {
  background:none;
}

    For your sidebar you might be better off creating one (or a number of) daisy images and apply these as a background to each existing widget title and offsetting it a littler, here’s an example that is specifically for the “Welcome” text widget, but if you remove that section of the code you can apply it to all widget titles:

    #secondary #text-5 .widget-title {
  background:url("http://placehold.it/40x40") no-repeat top right;
}

    And finally if you track down an element (in this case your header image) you can round the corners like so:

    img.custom-header-image {
  border-radius:20px;
}

    Here‘s a description of how to explore your theme’s HTML and the default CSS styles – you can often copy these and change the values you’re interested in. For picking specific widgets/menu items look for the unique IDs that are set as classes. This is what I see if I explore the “Lifestyle” menu item, notice the unique numberin both the class and ID:

    <li id="menu-item-1517" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1517">
  <a href="http://daisychainsanddreamers.com/category/lifestyle/">Lifestyle</a>
</li>
1 2
  • The topic ‘I want a bigger header.’ is closed to new replies.