Changing image padding in the Oulipo theme
-
How do I change the padding between images in the Oulipo theme? So grateful for any help. Kindest regards, Alisa
The blog I need help with is: (visible only to logged in users)
-
What exactly are you wanting to accomplish? I see several different spacings in your main page between images. If you can give us an idea of what you are looking for, we can zero in on that.
-
Hi Sacred Path : ) ,
I was hoping to slightly decrease the set space between images in the main content. I don’t want to change the set spacing between images and text at all.
I was trying to get around it by creating strips of images in Photoshop where I could set my own space between each one but it’s becoming too time consuming and I need to post more often.
Does that make sense?Hopefully, Alisa
-
This can be a little tricky. In general when you insert a full-sized image it is inserted on a blank line below some text or something and that means it is inserted inside of paragraph tags, so the paragraph spacing set in the CSS rules and creates the spacing between consecutively inserted images. You can add a “style” statement in the HTML tab in the editor to override the CSS paragraph spacing. Since there would likely be times that you would want the spacing below the image, such as when it is followed by text, making an overall change in the CSS would work well.
What could be done though would be to create a CSS rule specifically for that situation and then assign that class to the paragraph that the image is in.
This would be a sample rule for that to add to your CSS (I haven’t tested any of this on your site so there might be adjustments that would need to be made).
.alisa-img { margin-bottom: 5px !important; }You would then do this in the HTML tab in the editor for each image that you wanted to tighten up the spacing on.
<p class="alisa-img">all the image code here</p> -
-
-
Hi Sacred Stone,
I gave it a try but I had no luck in reducing the space. It seems far easier to add space than to take it away.
-
Ok, I’ll work on this. I’m seeing several image within one set of paragraph tags, so that means that other things take precedent over the code I gave above. This gets a little tricky because it depends on how the images are inserted (in separate paragraphs vs. all in one paragraph). If I give you the code to take away the top margin set in the CSS for the images then in some instances that is going to mess up alignment, so what might have to happen is that we implement the above and then you have to insert your images in a certain way to get the tight spacing you desire.
Let me work on things a little and see what I can do with the image top margin issue and what other problems that might create.
-
-
Alisa, give this a try instead. It may be that at some point, with some combination of text and images, that this will cause you issues, but given what I’m seeing on your site, it may not. If it does, you can come back to the forums and we will figure something else out for you.
.entry img { margin-top: -5px; } -
Hi Sacred Space,
Thanks for that. I had a little play and stumbled across exactly the spacing I was looking for. I added this:.entry img {
margin-top:-1px;
margin-bottom:10px;
}It probably doesn’t make any sense, but do you foresee any problems… ?
Cheers, Alisa -
No I don’t, but only time will tell. If you have a post with only a single image and text, the spacing might not be right, but if that happens we can give you some stuff to put into the image code inside the post or page to recover. Then again it might not be an issue.
It looks good the way you have things, and you are welcome.
- The topic ‘Changing image padding in the Oulipo theme’ is closed to new replies.
WordPress.com Forums 