Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CSS problem with a widget WordPress

  • SOLVED

Hi there,

This is a real dumb question but I just can't work out how to style the images in a widget. My website is http://hazyknits.com

On the sidebar, there is a section called 'instagrams' and the images are clearly not styled yet. I'd like them to be arranged like the widget above.

Can someone help me with the css needed to format it? I am using the Quest theme and the Instapress plugin.

Answers (3)

2011-04-30

Maor Barazany answers:

I'm not sure how you wanted to design them, but try adding this to your style.css file -


.instagram-image {
margin: 5px 1px 9px 7px !important;

2011-04-30

Sébastien | French WordpressDesigner answers:

replace
.instagram-image
{
float:left;
margin-right: 5px;
margin-top: 5px;
}

by
.instagram-image {
float: left;
margin: 5px 0 5px 5px;
}


Sébastien | French WordpressDesigner comments:

in this file
http://hazyknits.com/wp-content/plugins/instapress/instapress.css


Sébastien | French WordpressDesigner comments:

as you can see this is a file in your FTP in the folder "plugin"
plugin > instapress > instapress.css


Sébastien | French WordpressDesigner comments:

if you want you can edit this file directly in you backoffice
go to this url
http://your-site.com<strong>/wp-admin/plugin-editor.php?file=instapress/instapress.css&plugin=instapress/instagram.php</strong>

and modify the first lines
simply


Hazel comments:

Great. That has fixed the main problem. How do I get rid of the extra space between the image and the widget header?


Sébastien | French WordpressDesigner comments:

i tell you that in one minute :-)


Sébastien | French WordpressDesigner comments:

replace
h3.recpost{
height:35px;
background:#47587A;
border-right:1px solid #445472;
border-left:1px solid #445472;
border-top:1px solid #445472;
line-height:35px;
padding-left:10px;
font-size:14px;
font-weight:normal;
color:#fff;
text-transform:uppercase;
margin-bottom:10px;
}


by

h3.recpost{
height:35px;
background:#47587A;
border-right:1px solid #445472;
border-left:1px solid #445472;
border-top:1px solid #445472;
line-height:35px;
padding-left:10px;
font-size:14px;
font-weight:normal;
color:#fff;
text-transform:uppercase;
margin-bottom:0;
}

in
http://hazyknits.com/wp-content/themes/Quest/glide.css


Sébastien | French WordpressDesigner comments:

you can edit it probably here

http://your-site.com<strong>/wp-admin/theme-editor.php?file=/themes/Quest/glide.css&theme=Quest&dir=style</strong>


Hazel comments:

Thank you. That seems to have done it. Thanks for all your help.

2011-04-30

Nilesh shiragave answers:

add this in your themes style.css file

You can find that file at

http://hazyknits.com/wp-content/themes/Quest/style.css


.instagram-image img
{
margin:0px 10px 10px 0px !important;
}


change 10 will be gap between two images.. change it what ever you want.