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)
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;
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.
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.