Styling recent posts widget

Support
#1

Hello,

I would like to style my recent posts widget. However, inspecting the webpage, I couldnt find the ID for the widget. As compared to recent comments, I can see that the element ID for that is #recentcomments, but nothing for recent posts.

Can you advice on the element ID for recent post widget?

In addition, I would like to add a black line on the top and bottom of the widget as the following picture.

Thank you

#2

Hi Eric,

Please note that you can style it using class as well.

For recent posts you can use the class widget_recent_entries and for recent comments you can use the class widget_recent_comments

To add borders, you can add the code below in Theme Options > CSS

/* recent posts */
.widget_recent_entries {
     border-top: 2px solid #000; 
     border-bottom: 2px solid #000;
}
/* recent comments */
.widget_recent_comments {
     border-top: 2px solid #000; 
     border-bottom: 2px solid #000;
}

Hope that helps

#3

Hi Paul,

Thank you for respoding. The border is working now. However, I’d like to change the inner content of the recent post widget. Do you happy to know the element ID for it?

It’s currently looking like this,

but I would like it to look like

#4

Hello Eric,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.widget.widget_recent_entries ul{
    list-style: disc inside;
}

.widget.widget_recent_entries li a {
    display: inline-block;
    color: blue;
}

We would loved to know if this has work for you. Thank you.

#5

Hi RueNel,

That worked perfectly. I have one more question. I tried changing the font-family of my widget, and it works for recent comment but not on the recent post one. Can you advise how come this is happening?

This is what I have,

and also,

However, both of them doesnt change the font at all.

Thank you!

#6

Hello @FireMillionaire,

Please make use of this code instead:

.widget_recent_entries li a,
.widget_recent_comments li a{
    padding:5px;
    font-size:90%;
    font-family:"Montserrat" !important; 
}

We would loved to know if this has work for you. Thank you.

#7

Hi RueNel,

Thank you, that worked perfrectly.

I have one last question, can you explain to me what is the difference between the two,

.widget_recent_comments vs. .widget.widget.recent.comments.

I am struggling to figure out what the difference is.

Thank you!

#8

Hi Eric,

Basically, .widget_recent_comments and .widget.widget_recent_comments are the same but .widget.widget_recent_comments is more specific than .widget_recent_comments . So if you write CSS code, the CSS selector that is more specific will get more priority.

For further reading, kindly check these links:

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.