Text Color

[Henry]

Hi,

This CSS stuff is a bit above my knowledge, so I’m hopeful this is an easy question/answer you can help me with.

On this page – http://glitteryourpallet.com/events/?action=tribe_photo&tribe_paged=2&tribe_event_display=photo

I’d like the words “Upcoming Events” and “« Previous Events” and “Next Events »” to all display in color #fcedd9

Is that something you can help with? Thanks!

[Hunter]

Hello, Henry 🙂

I would be more than happy to help assist. Try adding the following CSS code to your theme option’s CSS section or directly into your theme’s style.css file:

.tribe-events-list h2.tribe-events-page-title {
margin-bottom: 15px;
color: #fcedd9;
}

#tribe-events-content a, ul.tribe-events-sub-nav a {
text-decoration: none;
color: #fcedd9!important;
}

The best (and easiest) way to change CSS is to right-click on the 'Upcoming Events' text (or whatever else you want to change), then select 'Inspect'. From there, you can identify and make changes in your browser, then copy those changes and paste them where you manage CSS (theme options or the style.css sheet). More info can be found by watching this YouTube Video.

Let me know if this helps and have a great Friday. Cheers!

[Henry]

Hi Hunter,

It worked!

But it worked too good! Hahaha

Now all my titles, including the titles to the event, are the same color. Unfortunately that means the title to the events is the same color as the background.

Any way to adjust that so the event titles don;t get affected by the color change?

Thanks!

[Hunter]

Hello,

Thank you for the update. You should be able to use the CSS code I provided for the ‘Upcoming Events‘ text, but if it’s overwriting the single event page title, use the following CSS code:

.tribe-events-single-event-title {
color: #fcedd9!important;
}

Learn more about using !important here.

Also, check out the PRO Color Customizer tool. It can help make color adjustments on the fly. Thanks again let me know how things go and have a great weekend. Cheers!

[Henry]

Hi,

Looks good so far but the bottom navigation buttons are still not #db7fc6. Any chance we can get “Next Events” and “Previous Events” adjusted? If I use:

#tribe-events-content a, ul.tribe-events-sub-nav a {
text-decoration: none;
color: #fcedd9!important;
}

It also adjusts the single event title color.

Thanks,
Henry

[Hunter]

Henry,

Let’s hope this CSS for the Previous Events/Next Events text helps! Let me know how it goes 🙂

ul.tribe-events-sub-nav a {
color: #fcedd9!important;
}

[Henry]

Looks great! Thanks Hunter.

I notice if I switch from “photo” view to “month” view I’m back to the default colors in the header. In particular, “Events for October 2016” isn’t #fcedd9.

Got any magic left?

[Henry]

Hi Hunter,

I’m also having problems on the single event pages. I’m using the Pro Color Customizer but it doesn’t seem to have an affect to the view. For instance http://glitteryourpallet.com/event/2109/

I’m trying to get the header to be #fcedd9, the body background to also be #fcedd9, and the footer to be #fcedd9. Additionally, I’m not seeing where I can adjust the button configuration.

Little help?

Thanks!

[Hunter]

Henry,

Welcome back. I would love to continue assisting, but if I could please redirect your attention to my first response as it contains helpful advice on how to make these changes yourself. CSS is one of the most basic tasks and I strongly encourage you to take a little time until you understand the process.

// Body background
.single-tribe_events .tribe-events-content {
max-width: 100%;
padding: 0;
width: 100%;
background: #fcedd9;
}

Please note, you’ll need to take the reigns from here as this type of support is outside the scope we’re able to provide. Please refer to our What support is provided for license holders? for more info.

[Henry]

Hi Hunter,

While I acknowledge CSS might be easy for some people, it is not easy for me. I’ll also note the code you gave me was wrong and did nothing.

Thanks,
Henry

[Hunter]

Henry,

While it may not be easy for you, it is ultimately your responsibility when it comes to styling your website and calendar beyond what we include in the plugin. I can assure you by right-clicking your mouse and opening the ‘Inspect‘ tool, it is fairly simple to identify and make changes. You’ll input the CSS code into your theme’s style.css file or if your theme author has included a CSS tab in your WordPress admin theme options, add it there.

You can input code right into the Inspect console to make sure the changes you’re making are correct. This YouTube video is an even better example, so please review it and spend some time until you get the desired results. While we are happy to help where possible, I’m not permitted to spend time customizing customer sites beyond a certain point. It is the first point made on our What support is provided for license holders? Knowledgebase article.

Sorry I can’t do more here. Have a great rest of your night 🙂

[Henry]

Hi Hunter,

I understand.

Can you direct me to an email for refunds? When I spent $90 for this plugin I didn’t realize I would need to teach myself CSS so your product wouldn’t look like shit on my website.

Thanks,
Henry

[Hunter]

Henry,

I am truly sorry to hear things aren’t working out for you. You can visit our Refunds page and we’d be more than happy to refund your purchase so long it’s within the 30-day timeframe.

Best of luck with your website and take care.

[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