Where to Put Custom CSS (Directions aren't working)

[Wendy Limauge]

I have read the articles below and followed the steps and I can’t seem to get any css changes to work. Please tell me if I am adding them in the correct place? Even if I edit the .css files in events-calendar-pro/src/resources/css/ and the-events-calendar/src/resources/css/ directories nothing changes on the screen. I disabled the cache plugin I have installed and do a hard refresh each time to look for changes.

I can see the location of what I want to change by using the Chrome Developer Tools but changing the .css files does nothing.

https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/

If I make a copy of the master .css and put it in theme directory/tribe-events as indicated here that does nothing either.

https://theeventscalendar.com/knowledgebase/themers-guide/

I was able to make a few changes by adding the css directly into my theme’s css file but the other changes aren’t working.

I must be doing something wrong but can’t figure out what and could really use your help before I pull my hair out 🙂

Basically, I am trying to fix the look of a few things on the single event page and main calendar page.

Main Calendar Page:

http://connecticutlifestyles.com/events

Do not want address bold

Single Event Page:

Bulleted list is off the margin to the left (see attached screenshot). It needs to be indented say like 5 or 10 px after it is back in the post area (Example: http://connecticutlifestyles.com/event/new-haven-restaurant-week-returns-november-5-10/)

Main font is 16px on a single event. It is taking that from the theme. I would like it 14 px

Under Details the date, time, events Categories, Location text is too small. Would like it one or two px larger.

Thanks!

[Cliff]

Hi, Wendy.

Modifying the core plugin files isn’t advisable (of which I’m guessing you’re aware), but the reason your changes weren’t taking effect there is that you likely do not have define( 'SCRIPT_DEBUG', true ); in your wp-config.php file. With that in place, JS and CSS will load the unminified version.

You can add custom CSS code via your child theme’s style.css file, via WordPress 4.7’s Customizer CSS settings, or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• 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.

[Wendy Limauge]

Weeeee, don’t you just love it when you find the missing piece that makes it work 🙂 Thanks a bunch. I was able to add all of my css in my theme’s customizer and it all showed up after adding that line into the wp-config.php file.

One last question and I’m done.

I added the custom “My Button” to a single event. When I hover over it the link turns green. Green is a color I am using on the site but I’d rather it just stay white. I can’t find the css to change it though. Can you help?

Example: http://connecticutlifestyles.com/event/full-moon-walk-connecticut-college-arboretum/

[Cliff]

I’m very glad to help! It’s generally recommended to not have that line in wp-config.php for your live site. If that causes your theme’s custom CSS to take effect, it’s likely you’re still not quite doing something correctly or that the issue should be reported to your theme’s support.

You could also just choose one of those other Custom CSS methods I shared instead.

===

Regarding the button at your link–the code for which came from https://theeventscalendar.com/knowledgebase/url-as-word-button/–I see you have this CSS:

.my-button-class {
background-color: #336600;
border: 1px solid #336600;
padding: 10px;
color: #fff;
float: left;
}

I’d recommend replacing that with this:

body.single-tribe_events .my-button-class {
background-color: #336600;
border: 1px solid #336600;
padding: 10px;
color: #fff;
float: left;
}

body.single-tribe_events .my-button-class:hover {
background-color: #fff;
color: #336600;
}

Please let me know how this goes for you.

[Wendy Limauge]

Thanks, that worked for the button.

I will have to research your suggestions for my css since I am not really an expert and kind of just muddle through until it works 🙂

[Wendy Limauge]

I reread your message. The only thing I did was add that line to the wp-config.php and then I added all of the css changes into my theme’s customizer. That is when all my changes showed up. When I followed the directions on the site listed in my first messages – adding .css files into directories – nothing showed up when I added my changes in those files

So, that being said, does that mean I added it correctly since it shows properly on the site? Should I remove that line in the wp-config.php file or turn it to false?

[Cliff]

Yes, you should remove it (it’s set to false by default) and the CSS changes you added should still appear since you confirmed you added them in the Customizer.

Please let me know how this goes for you.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts