WordPress.org

Ready to get started?Download WordPress

Forums

adjust page width and header image dimensions (16 posts)

  1. wildpluckings
    Member
    Posted 2 years ago #

    http://www.wildpluckings.com

    I am trying to add a custom header (960x70px)

    The child theme I have created is based on twentyeleven, the current header image is a placeholder.

    I tried adding this code to functions.php:

    // The height and width of your custom header. You can hook into the theme's own filters to change these values.
    	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
    	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 960 ) );
    	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 70 ) );

    I have also tried all sorts of edits on my style.css but I haven't been successful

    I believe the default page width is 1000px. I also think that the header image is 1000x288px by default. What I am looking for is where I can edit these values. I also want to add an image map to the header with clickable hotspots but I think this will be simple once I learn where to look.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. wildpluckings
    Member
    Posted 2 years ago #

    tada http://www.wildpluckings.com

    update: I just realised that the new header size of 960x70 will not be in effect UNTIL after we change to a new header image. This is why I was not seeing it update. I had to go to:

    appearance --> header -->

    and to my delight;

    "Images of exactly 960 × 70 pixels will be used as-is."

    SO it did work after all =) Sorry I didn't see your response esmi. Thanks for the link, I assume that either method is ok? Or maybe the method I have used is why I am experiencing the second problem I have listed below?

    Three problems to iron out:

    1) I believe the overall page width is still 1000px. This has caused some stretching on my header. How can I resolve that?

    2) There is a ~two pixel area of grey space at the top of my header image. Not sure why this is does anyone have any ideas? I have set it to be 960x70px, and the image I have used is also 960x70px.

    3) Ideally I would like for the header image to be docked at the very top of the page, rather than the small gap. Where can I adjust this?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    All of your remaining problems can be fixed by adjusting your child theme's CSS to overwrite the parent's. Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  5. wildpluckings
    Member
    Posted 2 years ago #

    firebug is mega handy for getting id's thanks!

    I'm experimenting on my footer background/text color. After using firebug I think "site-generator" is the footer id. Here is my code:

    #site-generator {
        background-color:#333;
        color:#ccc;
    
    }

    I hardly know any code for different colors. Doing it without dreamweaver holding my hand through the process will take time to get used to ;) Not sure how to set the font colour to "#ccc" (light grey). On my old webpage I could just put the above code for a dark grey background and light grey text, but it is not affecting the text on my wordpress site.

    Any idea why? Thanks :)

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    When you examine that footer with Firebug, which CSS is controlling it (ie at the top of the list)?

  7. wildpluckings
    Member
    Posted 2 years ago #

    screen capture :) div id "site-generator"

    1280x720

    Still a beginner with Firebug I hope I am using it correctly

    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    All you have in your child theme's stylesheet is

    #site-generator {
        background-color: #333333;
    }
  9. wildpluckings
    Member
    Posted 2 years ago #

    that is confusing maybe it didn't update? I can confirm now that it has the following:

    #site-generator {
        background-color:#333;
        color:#0000000;
    
    }

    http://www.wildpluckings.com/wp-content/themes/wildtheme/style.css

    It isn't affecting the footer text color though (wrong code?)

  10. wildpluckings
    Member
    Posted 2 years ago #

    I noticed my main navigation menu items "squash" when I make the window smaller, my header logo scales down in size too! These are two things I definitely need to resolve (want a fixed page width)

    What can I change in the style sheet to have fixed width instead of fluid (I think it will be a question of changing "%" to "px" somewhere.

    It is frustrating having to ask questions at literally every hurdle. I promise I am spending hours looking through the documentation and google searches before asking questions but I rarely get anywhere. Thanks for being patient with me

  11. esmi
    Forum Moderator
    Posted 2 years ago #

    If you want a fixed width theme. then you'll need to adjust your child's CSS to create a fixed width page.

  12. wildpluckings
    Member
    Posted 2 years ago #

    I may have identified something which is messing with me. Like you noticed earlier, sometimes "updating" my style.css just doesn't work. It isn't updating on my pages for whatever reason. So to complicate things, I am not able to see changes and I probably assume I did something wrong.

    Trying this in the child style.css:

    #site-generator {
        background-color:#333;
        color:#f0f0f0;
    
    }
    
    .block-content{
      width: 960px; /* <- for IE6 */
      max-width: 960px;
    }

    It's not updating!

    here is a screenshot with "file updated successfully" lies I tells ya!

    stylesheet here...

    edit: I closed my browser and tried again and finally it updated. My code has not worked though. Is this a case of finding another theme which does not use a scaling/resizing width? if I use a layout without sidebar the website is terribly broken, bad on mobile devices too!

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    It's not updating!

    It is for me. I can see both in the child's stylesheet at the moment. Not sure what .block-content is referencing but it's in the stylesheet.

  14. wildpluckings
    Member
    Posted 2 years ago #

    Yes it did update after restarting my browser. I took the .block-content code from another post where someone was asking the same question. It is apparently a fixed width for all body content (header etc will still scale I guess)

    I have just discovered the intuitive looking "weaver ii admin" menu. Maybe this is what I've been looking for... did over 4 hours of intensive searches trying to fix the width. Weaver ii admin has a check-box for it.

    Getting this set up is a grind. Designing html/css/php from scratch even with no previous experience was infinitely more intuitive but the comments/user registration and plugins for wordpress are too good to ignore. I like to think of this as a good long term investment haha

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    I took the .block-content code from another post where someone was asking the same question.

    There's no such class as block-content in Twenty Eleven, so that is never going to work. Have you tried using Firefox with the Firebug add-on for this kind of work?
    http://getfirebug.com/

  16. wildpluckings
    Member
    Posted 2 years ago #

    yes I have firebug but I was confused identifying different classes and such. I will get used to it.

Topic Closed

This topic has been closed to new replies.

About this Topic