Changing WordPress default font size in theme sidebar?

Travelify
1

Hi!

I’m setting up a simple website for my employer based on Travelify, which I’ve set up as a child theme. I’m no expert as far as webdesign and coding goes, but I’m usually able to tinker and google my way to a solution eventually.

However, the seemingly simple matter of how to reduce the default font size of text in the right hand sidebar text widget has proven insurmountable. I’ve tried using the custom CSS field, I’ve tried jamming the code into the widget text field itself, and I’ve tried sticking numerous bits of code found around the web into the child theme’s style.css file. The sidebar text, however, stays exactly the same.

It may be that my HTML and CSS skills simply aren’t sufficient for doing these kinds of modifications. If you tell me this is the case, I’ll gladly return to my Codeacademy lessons and work them until I understand how this stuff works. However, at the moment, I suspect my trouble comes as much from not understanding how Travelify is set up as from being a coding rookie.

As it is still under construction, most of the website in question is password protected. For the purpose of this issue, however, you shouldn’t need to see more than the sidebar, which is visible to the right at Page Redirection I simply want to make the text smaller, perhaps 50% or 75% of the present size.

2

Well, after weeks stuck at this, I finally managed to figure it out myself! As I began to realize my problem stemmed from inability to address the relevant widget, I found this guide: How to Customize a Specific WordPress Widget Along with the Firefox plugin it recommended (Firebug), it gave me the final clues.

Thus, in the child theme’s style.css, I added the following, which yielded the text styling I wanted:

#secondary p {
	font-size: 96%;
	line-height: 100%;
}

Please let me know if this is not the optimal and proper way to do it. It works, but I’d be happy to hear how to do it better!

3

Your code is perfectly fine. One problem you might face in the future is then you will try to add more widgets as not you are targeting all sidebar content inside any paragraph.

If you want to be more specific and target only sidebar text widgets you might want to try something like this

#secondary .textwidget p {
  font-size: 96%;
}

Other than that you can stick with your as long as you don’t want to use different font size for different widget types.

4

Thank you very much, good tip!

5

I tried this on my own blog, and it did not work. I am trying to make ALL of the font in my sidebar smaller. Do you have any suggestions?

Thanks,
Erin
erinsalmonwrites.com

6

@erinsalmon

Each theme is difference and this thread is for Travelify theme but you are using Sparkling theme. Please start your own thread and we will help you from there.