WordPress.com Forums » Topic: Image Widget in CSS

amk002 on "Image Widget in CSS"

amk002 — Sun, 18 Sep 2011 23:07:30 +0000

Thanks!! You are so helpful!!!!

designsimply on "Image Widget in CSS"

designsimply — Sun, 18 Sep 2011 22:59:46 +0000

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

amk002 on "Image Widget in CSS"

amk002 — Sun, 18 Sep 2011 22:57:46 +0000

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?

designsimply on "Image Widget in CSS"

designsimply — Sun, 18 Sep 2011 22:56:27 +0000

@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.

designsimply on "Image Widget in CSS"

designsimply — Sun, 18 Sep 2011 22:54:35 +0000

Yay. Thanks!

devblog on "Image Widget in CSS"

devblog — Sun, 18 Sep 2011 22:52:53 +0000

very cool.

designsimply on "Image Widget in CSS"

designsimply — Sun, 18 Sep 2011 22:50:26 +0000

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;
}

devblog on "Image Widget in CSS"

devblog — Sun, 18 Sep 2011 22:38:28 +0000

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.

amk002 on "Image Widget in CSS"

amk002 — Sun, 18 Sep 2011 22:15:38 +0000

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!

designsimply on "Image Widget in CSS"

designsimply — Sun, 18 Sep 2011 21:59:56 +0000

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;
}

devblog on "Image Widget in CSS"

devblog — Sun, 18 Sep 2011 20:25:49 +0000

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.

amk002 on "Image Widget in CSS"

amk002 — Sun, 18 Sep 2011 17:56:39 +0000

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!!!

thesacredpath on "Image Widget in CSS"

thesacredpath — Sun, 18 Sep 2011 17:46:56 +0000

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.

devblog on "Image Widget in CSS"

devblog — Sun, 18 Sep 2011 17:38:36 +0000

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.

amk002 on "Image Widget in CSS"

amk002 — Sun, 18 Sep 2011 16:10:03 +0000

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.