CSS post titles & dates in recent posts/entries sidebar widget

artypixie · Member · Oct 18, 2015 at 7:34 pm
Copy link

Add topic to favorites
Hi, I have added some space between the ‘post titles’ in the sidebar blog entries widget with #secondary .widget.widget_recent_entries to make them easier to read…

I would now like to create a line-break before the .post-date (also, it’s very small)

And also..reduce spacing/padding slightly below title of sidebar .widget-title

I have experimented with setting padding to 0 em, but not really working – not sure if I have selected correct elements (using web inspector). Any advice appreciated, many thanks.

P.s. Using custom design CSS upgrade with 2012 theme.

The blog I need help with is: (visible only to logged in users)
ehtis · Staff · Oct 19, 2015 at 3:03 am
Copy link
Hi there,

Let’s see.

I would now like to create a line-break before the .post-date (also, it’s very small)

We can apply display: block attribute to .post-date class so that it forms its own new line:
```
#secondary .post-date {
    display: block;
    margin-top: 0.6em;
    margin-left: 0;
}
```
You can adjust margin-top for the desired line spacing, with margin-left set to zero.

And also..reduce spacing/padding slightly below title of sidebar .widget-title

You were using the correct selector, but it had one mistake as you were placing a dot before h3. Dots are only placed before classes. :) See the following for the correct code, we’re adjusting the margin for reducing space:
```
#secondary h3.widget-title {
    margin-bottom: 2px;
}
```
It’s great to see you’re using Web Inspector to try CSS changes. The best part is that you’re going to become only better at it with practice. :)
artypixie · Member · Oct 23, 2015 at 6:39 pm
Copy link
Yes, the web inspector is a very useful learning tool, combined with the CSS editor, to see changes ‘live’.

Many thanks for your help – issue solved – much appreciated!

No items found.