Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

I need to reduce the size of the header image.

  1. mirantimira
    Member

    My theme is "clean home".

    My biggest problem is to move the header-image over the nav which is served as a menu right now. I saw that in the code div for "nav" is above div "header-image" but I think there should be a way to control it in the CSS but I can't find a way yet.

    The second problem is the theme only take image size 900x200 pixel but I want the header image height only 150px. I tried to use CSS to control by adding height to the "#header-image" on the stylesheet but that cause the layout to break. Is there anyway to reduce the size of the header-image?

    Also there is a huge wasted space on the top because of an unused div tag
    "<div class="header">
    <div id="logo">
    <h1>The High Heel Gourmet</h1>
    <h2>by Miranti</h2>
    </div>"
    This is the div for the "generic header" that I didn't use. It seems to take up the space even though, I did reduce all the padding and margin as much as I can until it looks like the current site now but it still takes at least 10-15 pixel. Is there anyway I can really remove that?

    And Yes, I use to be a web designer but I haven't been working hands on in the last 5 years so I'm not only rustic but I don't know what's new anymore.

    Thanks in advance.

    This div is for the "generic header" that I didn't use but it's there anyway. Is there a way I can remove it.

    The blog I need help with is highheelgourmet.wordpress.com.

  2. designsimply
    Staff

    This will move the navigation below the header in the Clean Home theme:

    .header {
position: relative;
padding-bottom: 20px;
}
#nav {
position: absolute;
bottom: 0;
right: 0;
}

  3. designsimply
    Staff

    The second problem is the theme only take image size 900x200 pixel but I want the header image height only 150px

    First, create an image that is 900 x 150 pixels, upload it to your media library, and copy down the link for it.

    Then add the following CSS to your Appearance → Custom Design → CSS page and replace YOUR_IMAGE_URL with the image link you just copied:

    #header-image a {
background: url(YOUR_IMAGE_URL) no-repeat;
display: block;
width: 900px;
height: 150px;
}

#header-image a img {
display: none;
}

  4. mirantimira
    Member

    @DesignSimply you are a real angel. Thank you very much!

    I did fix the top nav but didn't change the size of the top image because I will be changing the top image every month. I don't want to go through the trouble of changing the URL every month too.

    Another problem! I think this will be last since I'm pretty much done with everything else. The image that I uploaded to the content, (I think it called .henty img or body .attachment img) is now has the width for the original size 590px ?!?! It was 520px. I must have screwed up the adjustment somewhere in the stylesheet not knowing that it will effect this. So my quick fix is to assign the size of the image AFTER I uploaded them but it's quilt time consuming.

    Do you have any quick fix in the CSS that will make the uploaded images become 520x344 by default?

    Thanks

  5. designsimply
    Staff

    Do you have any quick fix in the CSS that will make the uploaded images become 520x344 by default?

    First, go to Appearance → Custom Design → CSS in your blog dashboard and change the limit width in the CSS Settings at the bottom left. Set the limit width to 520, and see if that fixes the problem.

    If that doesn't help, you could try adjusting image size with CSS, but there's a chance it will affect some images in an unexpected way, so that's something to watch out for. The max-width property might work the best. Give this a try:

    .post img {
max-width: 520px;
}

  6. mirantimira
    Member

    The box works like magic! (Ridiculous, how I didn't see that box but ruin my eyes trying to read every line of style in the CSS...lol)
    Thank you so much.

  7. designsimply
    Staff

    I'm happy I could help! Cheers :)

  8. mirantimira
    Member

    Urgent!

    I went in to the style sheet today and would like to change the style for the caption (below are the changes). Once I added them the whole right side column had disappeared! I tried to restore using history on wordpress css but it didn't change back. What did I do wrong? Can you please, help me change it back?

    .hentry .wp-caption {
    background:#eee;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    /*border:1px solid #ddd;*/
    margin-top:10px;
    margin-bottom:10px;
    text-align:center;
    padding: 4px 0 5px 0;
    }

    .hentry .wp-caption-text {
    font-size:11PX;
    margin:0;
    font-style: italic;
    line-height: 13px;
    color: #999;
    padding: 5px;
    }

    Thanks
    -mira-

  9. mirantimira
    Member

    I compared the existing stylesheet to the last one I saved and found that all the width aspect had almost all removed from the style sheets. Some style that only has width aspect also got removed (toward the bottom). This is really weird!

  10. mirantimira
    Member

    Also I tried to copy my saved stylesheet with the width back on to the CSS but as soon as I click "save stylesheet" the width had disappeared!

  11. designsimply
    Staff

    Looking.

  12. designsimply
    Staff

    Is it possible you changed the CSS settings from "Add my CSS" to "Don't use Clean Home's CSS" recently on your Appearance → Custom Design → CSS page? If so, can you try changing that setting back as a first troubleshooting step?

  13. designsimply
    Staff

    I double tested this using my test blog and your CSS as well as the Preview button on your Appearance → Custom Design → CSS page. And switching back to the "Add my CSS" option in CSS Settings should fix the width for you.

  14. mirantimira
    Member

    trying

  15. mirantimira
    Member

    Then what should I do with ALL the style that I need change?

  16. mirantimira
    Member

    Now it changed back to the 2 column whewwwwww...but then I still need to change colors roll over and many many things. Can I switch it back to the use my style sheet or I need to start it over.

  17. mirantimira
    Member

    It doesn't seem to take the new style that I put in.

  18. designsimply
    Staff

    Ah, okay, so let me explain. Both of those options use your styles.

    With the "Add my CSS" option, the styles from the original theme are used and then any *changes* that you add in the edit CSS area are used on top of the built in styles. This is the best option for taking a theme and making adjustments to it.

    With the "Don't use Clean Home's CSS" option, that means you dump all of the built in styles from the theme and just use styles that you add. This is a good option for experts who want to completely redesign an entire theme from scratch.

    The first option, "Add my CSS," is what I almost always recommend to most users. It makes it easier to do adjustments and easier to debug CSS later. In fact, in order to make your theme easier to read, you might try removing the original styles that you copy and pasted in before and try just adding back the adjustments. It will probably help you in the long term!

    If you need any help with it, just reply back and I'll take a look to see how else I can help/direct you.

    P.S. I'm glad you asked about it!

  19. mirantimira
    Member

    Glad you explain that...Thanks!

    I'm fixing the stylesheet and using the "additional style" instead of replacing the whole stylesheet now. Almost everything is back in place of course left a few glitch that I can't seem to fix on my own.

    1) The top navigation: You fixed this for me before but now it becomes an issue again. The "Navigation" is now back on top of my header image instead of above the solid line. How can I push it down?

    2) All of my images that has no caption showing a dotted line underneath them. I tried .hentry img, .hentry image a, and try to assign border-bottom: none; to them but they don't work. How can I successfully get rid of them?

    3) The "meta" underneath the header h1 seems to have too much line-height but I can seem to find the class to close the gap. I tried .content .post-meta, .content .post-meta a and of course they didn't work.

    Thanks so much for the help. I couldn't do it without you.
    -mira-

  20. mirantimira
    Member

    Knock knock...I'm still patiently waiting.

  21. mirantimira
    Member

    Hi Designsimply

    I'm still waiting to hear back from you regarding a few issue with the stylesheet. Let me ask the questions again one more time.

    1) The top "Navigation" is now back on top of my header image instead of above the solid line. How can I push it down?

    2) All of my images that has no caption showing a dotted line underneath them. I tried .hentry img, .hentry image a, and try to assign border-bottom: none; to them but they don't work. How can I successfully get rid of them?

    3) The "meta" underneath the header h1 seems to have too much line-height but I can seem to find the class to close the gap. I tried .content .post-meta, .content .post-meta a and of course they didn't work.

    Thanks

  22. designsimply
    Staff

    I'm still waiting to hear back from you regarding a few issue with the stylesheet. Let me ask the questions again one more time.

    There are several other people waiting too! I'll be back around to help soon, I promise.

  23. mirantimira
    Member

    ok Thanks...just want to make sure that the message didn't get lost.

  24. designsimply
    Staff

    1) The top navigation: You fixed this for me before but now it becomes an issue again. The "Navigation" is now back on top of my header image instead of above the solid line. How can I push it down?

    Based on the current setup and custom CSS you already have in place, I think you could move the navigation menu a little lower like this:

    #nav {
right: 23px;
margin: -25px;
}

  25. designsimply
    Staff

    2) All of my images that has no caption showing a dotted line underneath them. I tried .hentry img, .hentry image a, and try to assign border-bottom: none; to them but they don't work. How can I successfully get rid of them?

    The dotted line you're referring to is set in the theme using the ".content a" selector. You can turn it off with the following CSS. Note this will affect all links in the main content area, not just images.

    .content a {
border-bottom: none;
}

  26. designsimply
    Staff

    3) The "meta" underneath the header h1 seems to have too much line-height but I can seem to find the class to close the gap. I tried .content .post-meta, .content .post-meta a and of course they didn't work.

    You need to add display: block to get it to work. Try this:

    .post-meta {
display: block;
line-height: 1.5em;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags