Styling the widget on the home page

Hi there,

I found this in your theme’s stylesheet:

h1 *, h2 *, h3 *, h4 *, h5 *, .tp-caption * {
  font-size: 32px;
}

If you take out the asterisk after the H4, that should do the trick.

Cheers!
Geoff

Geoff,

Thank you so much for your help. Aside from the fact that I can’t fathom why that would do the trick, it didn’t seem to. Would that stylesheet be found at Appearance > Edit Themes? And be named dynamic.css? Because I found that and made this change here which seemed to match what you found. But that didn’t change anything. Would I still need to have custom CSS to override it there? Because I tried that as well, but it didn’t, and isn’t taking so far. I’ll paste in the code from dynamic.css so you can see. Any more help you can provide will be greatly appreciated!

/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; line-height: 110%;}
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css *//* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css */
/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; line-height: 110%;}
/* END mdnw-dynamic-css *//* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css */
/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css */
/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css */
/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 *,h5 *, .tp-caption *{ font-size: 24px; }
/* END mdnw-dynamic-css */
/* BEGIN mdnw-dynamic-css */
body, p, span, .sf-menu li a { font-size: 18px; }
h1 *,h2 *,h3 *,h4 ,h5 *, .tp-caption *{ font-size: 32px; }
/* END mdnw-dynamic-css */

Hey @eturner99,

Your site has a ton of odd CSS that makes customizing things quite difficult. To change the font styles of those widget h4 tags, you will need to use CSS like the following:

.tribe-events-list-widget li h4.entry-title a {
    color: #cc9900 !important;
    font-size: 15px !important;
}

Now, these are just some example styles – they make the font size smaller and make the text a soft orange color, just to demonstrate the effect of this CSS. Here’s a screenshot of this CSS and its effects on your site → https://cloudup.com/c6sldIlYYqv

To add this CSS on your site, place it at the bottom of your theme’s style.css file.

To make more CSS customizations, your best option is to install and learn the basics of a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. With these tools, and a bit of Googling whenever you want to change something via CSS but aren’t quite sure what code to use, you should be able to get quite far with your customization goals on your site.

Cheers,
George

George,

Thank you so much, that did the trick! I actually had tried that approach, but it didn’t take, maybe I left off a semi-colon or something! But thanks again, I really appreciate it.

Eric

Glad you’re all sorted!