Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Image Widget in CSS

  1. amk002
    Member

    My theme is vigilance. I am trying to get my whole image to show (it says Keep Calm and Carry on). How can I do that? Right now, part of the image is cut off. I tried to play with the alignment, but that's not helping...

    Also, is there any way I can create a section divider in black or gray in between my blog entries and my sidebar (with my widgets). I would just want it vertically down the whole page.

    Thanks! Any and all help is appreciated.

    The blog I need help with is letmebewhatsunderneath.com.

  2. devblog
    Member

    I am trying to get my whole image to show (it says Keep Calm and Carry on). How can I do that? Right now, part of the image is cut off. I tried to play with the alignment, but that's not helping...

    That's because your image is way wider than your sidebar; it currently is 400px width. To make it fit properly you'd need to remove 50 pixels from each side (left and right) OR add this to your CSS

    #image-5 div a img {
margin-left: -50px;
}

    I would recommend the former, though.

    Also, is there any way I can create a section divider in black or gray in between my blog entries and my sidebar (with my widgets). I would just want it vertically down the whole page.

    You would need to use faux columns to achieve what you want.

  3. thesacredpath
    Member

    First off you have to edit the image and crop outf the majority of the white space on each side of the image. Then you have to to size what is left to 300px wide as that is the usable width in the sidebar. Then upload the new image and use it instead of the original.

  4. amk002
    Member

    Thanks for the help! I didn't realize the size of my images, but it's fixed now!

    There is no other way to create a black/gray line divider other than using faux columns..?

    Thanks again!!!

  5. devblog
    Member

    Not if you want the line go all the way down. You could add the line with CSS but the divider will be a high as contents your sidebar has... does that make sense?

    Try this and see if that meet your needs:

    #sidebar {
border-bottom: solid 1px #000;
border-left: solid 1px #000;
padding-left: 10px;
}

    If that doesn't satisfy you, then faux columns is the way to go.

  6. designsimply
    Staff

    I think you can get around using faux columns if you put the border on #content instead of #sidebar. Try this: 

    #content {
padding: 30px 30px 10px 0;
border-right: 1px solid #EEE;
}

  7. amk002
    Member

    Thanks designsimply...you're awesome! That's exactly what I wanted.

    One last question....how can I make the font on my page headers (at the top of my blog...home, about me, contact me, etc...) to appear a bit smaller?

    Thanks!

  8. devblog
    Member

    Well, placing the border in the #contents won't be a problem on the "home" page since the content area is longer than the sidebar... however, if you go to a single post/page whose contents are smaller than the sidebar, then it will look awkward... that's why, faux columns would be the better solution... just saying.

  9. designsimply
    Staff

    Good point!

    This might catch it for both then: 

    #content {
border-right: 1.5px solid #000;
padding: 30px 30px 10px 0;
}
#sidebar {
border-left: 1.5px solid #000;
padding-left: 19px;
margin-left: -19px;
}

  10. devblog
    Member

    very cool.

  11. designsimply
    Staff

    Yay. Thanks!

  12. designsimply
    Staff

    @amk002, try this to change the top navigation font size in the Vigilance theme: 

    #nav {
    font-size: 1.4em !important;
}

    Adjust the 1.4em to the size you want.

  13. amk002
    Member

    Thanks to you both! I didn't realize the different way it would display other than on the home page. I appreciate the help from both of you! I am very new to all of this and it's nice that everyone is so helpful!!!! :)

    Could either of you answer my above question about changing font size of the page headers at the very top of my page?

  14. designsimply
    Staff

    See above. :) I think we both replied at about the same time just now.

  15. amk002
    Member

    Thanks!! You are so helpful!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags