Misformatting of text bullets

[mkrasmussen]

I am having some display issues with text that are in bullets. It does not appear to be picking up the styles from my main template theme. I have plaid around with the style options under setting and cannot get this to be resolved.

If you look at the link below and click on one of the tabs, like Agenda, you will see that the bullets are not styled properly:

Risk Management by Design Workshop

They should look like the link below if you click on the agenda tab

How to Purchase Risk Management Solutions & Platforms

Any thoughts on how I can get bullets styled properly?

[Cliff]

Hi M.R.

We normally don’t provide support for theming/styling, but this should be an easy fix that I can help with.

Your Product link gets styling applied from WooCommerce CSS: http://cl.ly/262Z1l0i3b0n

Your Event link does not, since it’s not a WooCommerce page. However, with a bit of custom CSS, I believe you’ll get the look you’re wanting:

#tribe-events-pg-template .tribe-events-content .ui-tabs-panel ul,
.tribe-events-after-html .ui-tabs-panel ul,
.tribe-events-before-html .ui-tabs-panel ul {
padding-left: 30px;
}

You can add custom CSS code via your child theme’s style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[mkrasmussen]

Thank you. It is nearly perfect. The bullets are shifted over, but the font is not the same. The font for Paragraph style in my events is different than the bullets in the events still.

Look under the Who Should Attend tab. . .

http://grc2020.com/event/3486/

• This reply was modified 8 years, 3 months ago by mkrasmussen.

[Cliff]

http://grc2020.com/wp-content/plugins/the-events-calendar/vendor/jquery/smoothness/jquery-ui-1.8.23.custom.css has this rule: .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }

Your Product font-size is 100%, from here: http://cl.ly/1w3I2O3N1f3T

Finally, http://grc2020.com/wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-full.min.css is causing the larger line-height and margins: http://cl.ly/0N0B2N3f0T18

You should add custom styling to remove the Verdana font-family and larger font-size caused by the .ui-widget rule – and to override the line-height and margin-top and margin-bottom from the TEC plugin’s styling. For example:

body .ui-widget {
font-family: inherit;
font-size: inherit;
}
body #tribe-events-pg-template .tribe-events-content ol li,
body #tribe-events-pg-template .tribe-events-content ul li,
body .tribe-events-after-html ol li,
body .tribe-events-after-html ul li,
body .tribe-events-before-html ol li,
body .tribe-events-before-html ul li {
line-height: inherit;
margin-top: inherit;
margin-bottom: inherit;
}

I hope this helps but please understand we cannot be providing more custom styling assistance for your site/theme. You’ll need to find someone who knows CSS to assist further for similar questions in the future.

Thanks for your understanding and for your business. I hope your site gets looking perfect and is successful.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts