Need to expand the size of the header area to accomodate large image

  • Author
    Posts
  • #13409

    nishikk
    Member
    Original poster

    I currently have the following in my css:

    #header {
    margin:0 auto;
    min-height:250px;
    overflow:hidden;
    width:960px;
    }

    It works fine for the header image that I have.

    Now, I want to use a different header image (size 1102 x 250 px). However, when I upload that, I am asked to crop the header image to the Luscious default (which is 960 x 100 px).

    I am not sure why changing the width in the above code does not allow me to use the uncropped image. Is there something I am doing wrong?

    In addition, if I want to increase the width of the entire blog, not just the header, what is the code I need to manipulate?

    The blog I need help with is: nishitak.com

    #13558

    sillyandrea
    Theme Author

    No, it;s not something you are doing wrong. :)

    The header cropping is controlled in the php of the theme, which cannot be edited on this platform.

    For the overall width:

    You have to adjust #wrap, #header, #nav, #subnav, #inner, #content-sidebar-wrap, #content, #sidebar, #sidebar-alt, #footer, and several other elements that will be nested within these elements. The home page in particular will require more adjustments as will the #title-area and #header .widget-area within the #header. Image sizes should be adjusted to fit the new sizes created for the home page sections that will need to be adjusted, and the font size should be adjusted accordingly as well.

    #13570

    nishikk
    Member
    Original poster

    Wow, that sounds like a lot of tweaking. I guess I”ll hold off for now. I did manage to increase the header size to accomodate my large images, so I am happy for now.

    #13573

    sillyandrea
    Theme Author

    Yes, for changing the entire width, there’s a number of elements to change. :)

    Glad you found a quick solution for now tho!

    #13688

    whskr
    Member

    Andrea,

    If I want a larger picture, without changing the width, how do I do this. Nishitak has a more substantial image and I like the look of it. Width is not an issue (as I see from this thread, changing that could be complex) but a more substantial image does look rather good.

    Marjorie

    #13693

    sillyandrea
    Theme Author

    whskr – Can I get a link to your site, so I can go look?The default should be 960px wide in this theme.

    #13694

    whskr
    Member

    Sorry, I didn’t include it.

    http://whskr.wordpress.com/

    I am tinkering with stuff and would love larger image.

    #13767

    sillyandrea
    Theme Author

    Larger taller or larger wider? :)

    #13770

    nishikk
    Member
    Original poster

    Hi,

    Just saw this…

    This is the code I used to widen the header space:

    #header {
    margin:0 auto;
    min-height:250px;
    overflow:hidden;
    width:960px;
    }

    .header-image #title-area,.header-image #title,.header-image #title a {
    display:block;
    float:left;
    height:250px;
    overflow:hidden;
    padding:0;
    text-indent:-9999px;
    width:400px;
    }

    I played with the height and min height fields in the above code. Look for something equivalent in your blog theme css

    #13844

    kellyglover
    Member

    nishikk i’d also like to enlarge the header area. Did you have to purchase the $30 add on to be able to change the CSS??

    I just want a bigger photo up top!

    #13845

    kellyglover
    Member

    Ideally i’d like the title on top then the pic below it (so the writing isn’t over the photograph)

    #13846

    sillyandrea
    Theme Author

    Did you have to purchase the $30 add on to be able to change the CSS??

    Yes, you do.

The topic ‘Need to expand the size of the header area to accomodate large image’ is closed to new replies.