Styling & Customization
CSS, theming, layout overrides, visual tweaks.
10 questions — sourced from GitHub discussions & issues.
TSML v3.11.3 and 12 Step Meeting PDF Generator v0.3.0
Show question & answer
Question
I see there is both an update to both these plugins; TSML (Version 3.11.3) and the Chris Toews 12 Step Meeting PDF Generator (Version: 0.3.0).
I also see there is a fix in the plugin which generated an error using the external PDF plugin. See #548 Egads! Looking at the View Version Details for 0.3.0, all it references is "fixed bug, thanks to Josh Reisner".
I will test this all out on the staging site, but before I do, can someone please walk me through what was changed? I finally got the TSML plugin to work for our needs (lots of CSS customization) and kinda forced the PDF generator plugin to function okay for us which we use to publish our in-person meetings.
Thank you.
Answer by @Grateful-Viv
I did install the updates to the plug-ins on my staging site and all I can see different was pdf which doesn’t currently work because it doesn’t recognize JSON feed. Was anything else done with the update?
Tag for "In Person" Meeting
Show question & answer
Question
Hi there!
We're wondering if anyone knows if/when/how to find the plug-in (and App) pre-created permanent tag for "in person" (for type of meeting.... for filtering in person meetings only)... is there something in the works? As a work around, we're thinking that we need to create a custom "in person" tag in our plugin , but are worried with software updates that we will loose our tag customization......
Please share any & all info you know.
Thanks!
** and my apologies if this has been addressed -- I scoured the forum and couldn't find anything! **
Answer by @joshreisner
Hi @aajcounty, our systems automatically tag meetings with Online, In-Person, Active, Inactive -- more info on how it decides is here: https://github.com/code4recovery/tsml-ui#how-are-metatypes-like-active-and-online-calculated
We don't have a way to manually type these. This is an intentional choice for a good user experience; we don't want the information supplied about a meeting not to match up with its designation.
Upcoming Meetings Legacy Widget - Title font size
Show question & answer
Question
I've enabled 2 widgets side-by-side in column blocks using 2023 Theme WP 6.2 ("Upcoming Meetings" and "The Events Calendar")
Using Chrome Inspect I believe "Upcoming Meetings" uses h3 for widget title and I would like to use h6 - so it better matches the "Events Calendar" title. Obviously, I'm not a php coder or I would have changed this.
How can I have my Upcoming Meetings title match the Events title? Development site: https://help.aaalbanyny.org (It's on the home page)
Thanks, Ed Mac AA Central Office - Albany, NY
Answer by @joshreisner
Hi @conrac01 they are both h2 tags, so you shouldn't need to change the code - the difference is that the events calendar is applying CSS to set the size of their h2 to 16px while ours is getting set by your theme. perhaps add some custom CSS to set ours to 16px as well?
.tsml-widget-upcoming h2 \{
font-size: 16px;
\}
Meeting alignment and font questions
Show question & answer
Question
Good morning everyone ~
I just installed this plug-in and the table of meetings on the main meeting page (as well as information on individual meeting pages) is aligned left, as if I have a right sidebar, which I don't think I do (all the pages I have created don't have a right sidebar, I have removed all the default widgets I could find, and and checked the customizer settings for Blog and Post and removed any sidebar defaults I could find. Here is a link to the main meeting page. We don't have SSL installed yet, so you might get a warning about that.
I built the site using the Astra theme and it has no page editors installed. I have used the plug-in before with other themes and sites using Elementor and Beaver builder and haven't had this issue. Does anyone have any thoughts?
Also, the title for the individual meetings is using the H2 font, which is a unique one on our site and not what we would want the title to use. Any ideas on how to change which Heading is used? Or do I need to just do this in CSS?
Thanks!
Answer by @joshreisner
hi @ACAwebbuilder - looks like your theme is applying the left-aligned layout, TSML UI will just fill the container it's put inside.
at any rate, CSS is the way to go! to center it you should be able to do:
body.tsml-ui .wp-site-blocks \{
margin: 0 auto;
\}
TSML UI uses h2 for semantic reasons, and that can't be overridden, but i can probably reset that font on my end to use the default font. (in the meantime you could also override that with CSS)
change column header colors on hover
Show question & answer
Question
Howdy! I work on a few 12-step sites that use this plug-in and have noticed that the column titles changing to white on hover, with the white background, causes them to disappear. Any suggestions for changing the on hover color? I am thinking CSS, but I am having difficulty finding what the element is for these.
Thanks!
Answer by @SIA-WEBSUP
Incidentally, I don't believe the plugin's is setting the hover color. So some other plugin's CSS or some other CSS would be causing this. So you'd have to be sure the CSS you're setting is not 'overridden' somehow by some other CSS.
Possible to change the background on only the main meeting list page
Show question & answer
Question
Hi,
My usual method of changing the background for a single page is via CSS and the page id, eg:
body.page.page-id-XX { background-color: YYY; }
But I can't see a page id for the main listing page, only the individual meeting detail pages.
Any help would be greatly appreciated -- thanks!
Answer by @joshreisner
hi @toddjsaunders try
body.tsml-meetings \{
background-color: tomato;
\}
meeting layout changed
Show question & answer
Question
Hi! I noticed today that the meeting layout has changed so that the info is justified left and squished (for lack of better words). I am not the only one that administers this site, so am not sure what was changed.
Do you have any ideas what could have caused this and how to fix it?
The page I need help with: https://rvaacadf.org/meetings/?meeting=freedom-from-the-past
Thank you in advance for any thoughts/suggestions!
Answer by @joshreisner
ok! the fix is out, if you refresh your browser window once or twice it should look correct
Applying color to footer of meeting details page
Show question & answer
Question
Can anybody tell me how to apply color to a text I have in the footer of the meeting pages? I have no experience with CSS, so if anyone can help, please do so in the simplest of ways so I can understand.
Much appreciated! Nicky
Answer by @anchovie91471
To change the text to red, add this to your stylesheet:
.meetings-widgets-bottom .widget p \{
color: red;
\}
Blank area at the top of the meeting list on all tested devices and browsers
Show question & answer
Question
Blank area at the top of the meeting list on all tested devices and browsers
div#meetings.container 1260X550 appears when inspecting the element. this element is <div id="meetings" their is no height key in the div tag nor inline css . This tag is within the <div id="tsml"> </div>
Answer by @thessnake03
Looks like it's padding all around. The sites I checked had 16 px on the sides, top and bottom. I was able to remove it with css, but it looks a bit odd without the side margins.
div#meetings.container\{
padding: 0px!important;
\}
TSML Colors
Show question & answer
Question
When I originally installed TSML, I got some CSS code to match the colors with those of our site. I looked at the page recently and realized that the text color on the gray stripe is unreadable. I was wondering if there is some code I can add to make the lettering white so it is more legible.
The current CSS is: #tsml .table-striped>tbody>tr:nth-of-type(odd) { background-color: #415e75; } #tsml a { color: white }
The URL for the page is: https://www.puebloaa.org/meetings/
Thank you in advance for your assistance and for all the work you do for the recovery community.
Kevin
Answer by @joshreisner
☝️ that works, or if you just want to set the color of the gray rows white, change your existing code to
#tsml .table-striped>tbody>tr:nth-of-type(odd) \{ background-color: #415e75; color: white; \}
#tsml a \{ color: white \}