|
rachel Perry
|
March 7, 2014 at 3:41 pm
How do I change the font and spacing on the upcoming Events widget (sidebar)?
|
|
Lorenzo Orlando Caum
|
March 7, 2014 at 4:03 pm
Hi Rachel,
Could you please link to a page where I can see the sidebar?
—
Lorenzo
|
|
rachel Perry
|
March 7, 2014 at 5:22 pm
Thanks for getting back to me so quickly. Here’s a link:
http://rachelperrymedium.com/testimonials/
See how the font is too small and there’s not enough space, plus the events are indented.
|
|
Lorenzo Orlando Caum
|
March 7, 2014 at 5:35 pm
The indentation is coming from the ordered list (ol) which is set to no style.
Here is what it looks like with the ordered list restored and some spacing added:
http://cl.ly/image/2x0I3f2m0G0q
Did you want it to look similar to the screenshot above?
—
Lorenzo
|
|
rachel Perry
|
March 9, 2014 at 1:08 pm
Thanks, that would look great. But I would not want them to be numbered.
|
|
Lorenzo Orlando Caum
|
March 9, 2014 at 2:55 pm
You can add the following CSS to add some spacing between the list items:
.widget.events li {
padding-bottom: 10px;
}
This can go into your theme’s style.css file or in a plugin like My Custom CSS: https://wordpress.org/plugins/my-custom-css/
—
Lorenzo
|
|
rachel Perry
|
March 9, 2014 at 3:00 pm
Thanks!! I appreciate your help.
Will this remove the numbering? I don’t want this list to be numbered or have any type of indentation. Also, can the “Date” be in bold?
|
|
Lorenzo Orlando Caum
|
March 9, 2014 at 3:12 pm
Alright, this will add some spacing and remove the indentation:
.widget.events li {
padding-bottom: 10px;
margin-left: -25px
}
The date alone can’t be bolded.
—
Lorenzo
|
|
rachel Perry
|
March 9, 2014 at 3:58 pm
Excellent! You’re the best. Thanks. Also, the font for the headings of my events are huge and do not resize when viewed on a mobile device. Any tips on how to handle this?
|
|
rachel Perry
|
March 9, 2014 at 3:59 pm
here’s a link to an event.
http://rachelperrymedium.com/event-registration/
|
|
Lorenzo Orlando Caum
|
March 9, 2014 at 4:41 pm
It has a fixed size set: font-size:1.2em.
Try a different size like medium: http://cl.ly/image/0C34230A3J44
h2.ui-widget-header, h3.ui-widget-header{
font-size:medium;
}
Add the CSS above to the My Custom CSS plugin as well. Then refresh the page and it should load the new style.
—
Lorenzo
|
