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 |
