Widget Section Text CSS Customization

vlogazul · Member · May 2, 2014 at 8:40 am
Copy link

Add topic to favorites
Hello! I am currently using the Forever theme and am wondering if there’s a snippet to decrease the white space between the pics and the tittle text on my widget section. As you can see there’s two pics that have a tittle and you can see the white space on between, so I would appreciate if I can get a snippet to decrease that space. Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 2, 2014 at 6:51 pm
Copy link
Hi, there is bottom margin and padding on the widget titles. Add the following and adjust as desired. I’d start with the margin, and if that doesn’t get you close enough, even at 0, then go to the padding and adjust it.
```
#secondary .widget-title {
    margin-bottom: 0.6em;
    padding-bottom: 0.8075em;
}
```
vlogazul · Member · May 3, 2014 at 6:29 am
Copy link
It worked perfectly! Thanks

I was wondering, by any chance is there a snippet for the following!
After every featured image post on the main page theres a gray line that divides each post, is there a snippet to make that particular line bolder and just a little bit more thick? If possible to do the same thing on the gray lines on the widget section. Thanks
vlogazul · Member · May 3, 2014 at 8:15 am
Copy link
Also, is there a snippet to erase the comment bubble that is on the top right side of the posts but only from the particular posts and not from the main page posts. Thanks
hafizr · Member · May 3, 2014 at 8:35 am
Copy link
Hi,

After every featured image post on the main page theres a gray line that divides each post, is there a snippet to make that particular line bolder and just a little bit more thick?

You can use this, and modify the ‘1px’ part to any thickness you want (‘2px’, ‘3px’, and so on. Px means pixels).
```
footer.entry-meta {
    border-top: 1px solid #eee;
}
```
If possible to do the same thing on the gray lines on the widget section.

For this, I see that in your custom CSS you already have a declaration for “#secondary .widget-title”:
```
#secondary .widget-title {
    margin-bottom: .1em;
    padding-bottom: .0075em;
}
```
Add the following border setting, and like previously, change the ‘1px’ part to something you like:
```
#secondary .widget-title {
    margin-bottom: .1em;
    padding-bottom: .0075em;
    border-bottom: 1px solid #eee;
}
```
Also, is there a snippet to erase the comment bubble that is on the top right side of the posts but only from the particular posts and not from the main page posts.

To hide the bubble only on single post view, use this:
```
body.single .comments-link {
	display: none;
}
```
vlogazul · Member · May 3, 2014 at 8:57 am
Copy link
It worked perfect, one last thing!
Can you also get a snippet to have the line that divides the featured image posts and the widget section on my main page be bold and tick as the one you provided me on the featured image posts? Thanks
hafizr · Member · May 3, 2014 at 9:29 am
Copy link
That divider line is this, I suppose:
```
#secondary {
	border-left: 1px solid #eee;
}
```
As always, change the ‘1px’ part to something thicker.
vlogazul · Member · May 3, 2014 at 9:40 am
Copy link
It worked perfectly! Thanks

As you already provided me with a snippet to make the gray line on the widget section to be bold, is there a snippet to erase that line?
vlogazul · Member · May 3, 2014 at 9:47 am
Copy link
Is there also a snippet to make the text “Noticias Anteriores –>” on the bottom of the main page be centered but only on the main page?
hafizr · Member · May 3, 2014 at 10:26 pm
Copy link
As you already provided me with a snippet to make the gray line on the widget section to be bold, is there a snippet to erase that line?

Not sure which line you were referring to, but you can replace ‘1px’ to ‘0’ to make a zero width line (so they’re now invisible).

Is there also a snippet to make the text “Noticias Anteriores –>” on the bottom of the main page be centered but only on the main page?

Try this:
```
body.home #content nav .nav-previous {
	width: 100%;
	text-align: center;
}
```
(In case you didn’t know, that navigation part is pushed to the left originally to make space for another navigation link that can appear, for example on page 2: http://vlogazul.com/page/2/)
vlogazul · Member · May 5, 2014 at 6:15 am
Copy link
I see and it worked perfect!

is there a snippet to make the main page slider be 100% width just like the menu bar?
vlogazul · Member · May 5, 2014 at 10:08 am
Copy link
Is it also possible to get a snippet to erase the gray comment bubble from the featured image posts on the main page and overall pages! Thanks

No items found.