Remove the outline and border around post content for Sparkling?

Sparkling
1

I think it is the outline, but I would like to remove the big box that goes around the page. I figured out how to change the color so it is just white, but there is still a box shown su-partners.com/pparavis

Also, what are the hex color codes used for the various buttons (specifically the dark and light blue Primary and Info buttons)

thank you

2

Hello? Thought I would see if someone could help with this question about removing the outline box. Thanks!

3

You can remove border around post content by adding this simple CSS to Appearance >> Theme Options >> Other >> Custom CSS

.post-inner-content {
  border: 0 !important;
}

Hex color for dark blue primary button is: #337AB7

Color code for light blue info button is: #5BC0DE

4

THANK YOU! Last question, now that the border/outline is gone, there is still a gap at the top I can’t get rid of. If I put a picture up there or text, there is a gap of about 20-30 pixels between it and the top header - anyway to remove that gap?

5

Hi - checking in again about that other question. Now that the border/outline is gone, there is still a gap at the top I can’t get rid of. If I put a picture up there or text, there is a gap of about 20-30 pixels between it and the top header – anyway to remove that gap? There is probably a gap at the bottom near the footer - basically wherever there was the border/outline

thanks!

6

I see that you have switched to a different theme. If you still need help, please enable this theme and notify me again. Make sure to post URL where this problem appears.

7

Sorry about that, I am still using Sparkling but made edits to the colors, etc, and moved things to dev.supartners.com. The picture has a gap of about 20-30 px from the blue header area where I think the outline was. Then at the bottom, I think there is a gap there too to the bottom black footer where the outline was. If I remove that custom CSS code you told me earlier that does remove the outline - it seems the outline fills in that gap area, so I think the outline box must have some padding around it?

Thanks!

8

You ran remove that white gap between header and your image by adding this simple CSS to Appearance >> Theme Options >> Other >> Custom CS.

.home .main-content-area, 
.home .entry-content {
  margin-top: 0;
}

.home .post-inner-content {
  padding-top: 0;
}

Let me know if this is what you were looking for.

9

That is perfect, thank you. Is there also padding or margin at the bottom too? For the heck of it, I tried “-bottom” and it seemed to work, but I hope I did not break anything! Thanks

.home .main-content-area, 
.home .entry-content {
margin-bottom: 0;
}

.home .post-inner-content {
padding-bottom: 0;
}
10

You did not break anything. However, I would keep this code in mind when you start adding content on your website as it could overlap something as everything is squeezed together. Not a big deal for now but just keep in mind if you are having some problems in the future.

11

You are awesome and thanks so much for the responses! They do now look squeezed together, so I tried using one or the other (not both) and they seem to have a similar effect, so was wondering is one better to use than the other? That is should I only use the padding-bottom versus the margin-bottom (or vice versa, if using only one of these). And I do think this is my last question on this so as not to continually pester you…

12

Both are two different things. One is for padding and one is for margin. There is a difference in CSS but I don’t think it makes any difference in your case, so you can stick with one that you prefer.