Hi, I would like to change the size of the font in my sidebar. Tried some of your CSS codes and found that it works on the heading but not on the body font. Please help. Thank you.
URL: http://atcas.org.sg
Sidebar font size
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Chandran
If we’re looking at a page like this: http://www.atcas.org.sg/events/ then you could use the following:
/* Sidebar */ #secondary .textwidget h4 { font-size: ; } #secondary .textwidget p { font-size: ; }Insert font sizes as required.
Hi Andrew, many thanks. The code works on the body text of the of the sidebar but not on the heading. Tried using !important but no luck either.
Sure.
The code I sent is working on the H4 tag, “2014” that I was targetting. To target the very first heading you’d need to use:
#secondary .widget .widget-title, #footer-widgets .widget .widget-title { font-size: ; }Hi Andrew, many thanks for the code and a big thank you for the clarification. Could you show me how to change the font size of the title “Past Events” also, please?
For sure.
/* Past Events */ .page-id-137 .entry-content h4 { } .page-id-137 .entry-content p { }h4 is the headings, p is the content. Insert the font-size: ; property and adjust as required.
/* Sidebar */
#secondary .textwidget h4 {
font-size: 20px;
}
#secondary .textwidget p {
font-size: 16px;
}
#secondary .widget .widget-title, #footer-widgets .widget .widget-title {
font-size: 18;
}
/* Past Events */
.page-id-137 .entry-content h4 {
font-size: 20px;
}
.page-id-137 .entry-content p {
font-size: 16px;
}
Hi Andrew, did I do it right as above. I still don’t see the title font size changing. Sorry for the trouble.
Please also tell me how to change the line spacing in the content text. Many thanks.
That looks changed to me, the text is smaller on the Past Events page. I can see the CSS in effect.
To change the paragraph margins:
.page-id-137 .entry-content p { font-size: 16px; margin: 1em 0; }Change 1em to a px value if you’d like. It represents top and bottom padding.
Many thanks, Andrew but I don’t see the font size change having any effect on the line “Past Events”. Please help.
Hi Andrew, ref: the code below which you gave me to adjust the line spacing – you say change the 1em to a px value? Don’t really know what you mean. Tried a few things like, “1em 10px” Sorry. Could you explain please? And the sidebar title font size change is also not taking effect but the p text is working. By the way it’s the line height which I want to adjust. Is it called the margin in CSS?
Thank you again.
.page-id-137 .entry-content p {
font-size: 16px;
margin: 1em 0;
}
Sure. 1em is a unit of measure. In this case it equals 16px. Change it as required to adjust the margins on the parahaphs on the page. Eg:
.page-id-137 .entry-content p { font-size: 16px; margin: 10px 0; }What that equates to is:
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
I don’t see a sidebar on the Past Events page.
On the Upcoming Events page, all your sidebar edits are taking effect.
Hi Andrew, first off another very big thank you for the help. I think I may have confused you as to the page involved. I was all along referring to the sidebar in the UPCOMING EVENTS page. Terribly sorry. I have a learnt a few things along the way, despite the mess up. Thank you. The font size change I need is for line “A few past events of 2014” and the code to increase the line spacing of the list of events.
Hi Andrew, I managed to resolve my issue with the following code:
#secondary .textwidget p {
line-height: 22px;
}
Would appreciate it if you could take a minute to see if I have done it right? I wanted to increase the spacing between lines in the sidebar. Many Thanks.
Nicely done. It’s taking effect and looks good.
Thank you, Andrew. Appreciate your input very much.