Note: This simple tutorial is best for those who know how to manage and play around with files of their website. I use FileZilla for my needs. For more info on how to use FileZilla with WordPress.org, check out this link.
I’ve lately been enjoying the Ultimate Posts Widget for my site, Freespanishshortfilms.com. It’s a good option if you want to display links to different posts on your website. I like how it’s highly customizable, and it did a good job in displaying what I needed to have displayed on my site’s sidebar (that being a bunch of random posts with their categories displayed).
If you want to check out the plug-in, you can do so here: https://wordpress.org/plugins/ultimate-posts-widget/
Something that’s been bothering me lately, however, was how to center the titles/text of the widget. Just choosing the posts I want to be shown on the widget, with no other changes to CSS, etc., gave me something like this:
It does the job, but it would be great if the titles and descriptions could line up in the center somehow.
I’m not very good (yet) at playing around with the CSS of widgets and what not, so I went ahead and did what I typically do: go over the editable files of the plug-in I have an issue with, and try to tweak the stuff in there.
For this particular concern, I went to the CSS folder of the Ultimate Posts folder under wp-content/plugins. The CSS file I messed around with was the upw-theme-standard.min.css.
There will be a line with code in the file, which you can edit to your liking. To center text in the widget, however, I only touched the CSS for entry-title & entry-categories.
Previous code:
.upw-posts .entry-title{margin-bottom:.5em}
.upw-posts .custom-field,.upw-posts .entry-categories,.upw-posts .entry-custom-fields,.upw-posts .entry-tags{margin-bottom:.5em}
New code (to make the titles and description centered):
.upw-posts .entry-title{margin-bottom:.5em;text-align: center;}
.upw-posts .custom-field,.upw-posts .entry-categories,.upw-posts .entry-custom-fields,.upw-posts .entry-tags{margin-bottom:.5em;text-align: center;}
… And that’s it. Hit save, make sure the edited CSS file is uploaded, and check out your site to see if the change reflected. Mine definitely did, as you can see below:
It’s a simple enough tweak, even a newbie website admin like me can do it. In all honesty, this is really easy to do, and I’m just blogging about it here in the event I forget how to do it again (which had happened a couple of times).
If it has helped you in your own site, let me know in the comments! I’d be glad to know if my little tweak helped you, too. 🙂 You can also check out my humble site, Freespanishshortfilms.com, where I weekly feature Spanish-language short films available freely on the Internet. Cheers!