Changing the Background colour.

[Jeff]

I don’t think I’ve been so frustrated as I have been just trying to simply change the background colour on this events calendar.
I een purchased the pro version of this plugin.
What I want is the simplest thing – making the background not transparent.
I do not want to create a whole new custom theme or anything like that.
Just a simple edit.

I’ve read through all the theme guides – watched some terrible quality video. Searched these forums. And it is so vague. Why can’t there be an answer of – “go here. click this. type that.”

http://www.theseahorsetavern.ca/upcomingevents3/list/?tribeHideRecurrence=1

Again, this has been extremely frustrating.

[George]

Hey Jeff,

Sorry you’ve found some frustration here. I went to the link your provided but unfortunately did not find The Events Calendar active on your site.

I’m curious: would you be willing to deactivate other Events plugins on your site, activate The Events Calendar, and share a link with us to your new events page? If so, we can take a closer look at the specific Events Calendar-generated page and try to offer some CSS pointers specific to your theme so that you can achieve what you’re hoping to achieve.

As for your disappointment with the materials on our site here, I’m sorry you found it frustrating. One thing to point out is a sentence I used in the paragraph just above this one: “we can take a closer look at the specific Events Calendar-generated page and try to offer some CSS pointers specific to your theme […]”.

I emphasized the “specific to your theme” part of that sentence because that should help explain a large part of why we don’t have many materials that are just “go here. click this. type that.”, as you described it – there are literally dozens of thousands of themes out there for WordPress, at least 10,000 (and that number is from 2 years ago!). That’s a wonderful thing, but also means that any given WordPress site can be so wildly different from another that we can’t just list some simple CSS tricks on our support site and expect it work for everyone, or even remotely a majority of users.

Every WordPress site is extremely different, so the best solution is honestly to try and field requests on a customer-by-customer basis in the forums, which is what we’re trying to do here 🙂

I hope you can see the limitations of offering “go here. click this. type that.”-style support recommendations, and can try to let us help you out here in this support ticket. There may be just a little bit of CSS needed to achieve what you want, and we’re happy to help!

Thanks,
George

• This reply was modified 11 years, 2 months ago by George.

[Jamie]

I have a similar issue. I’m running Nexus by Elegant Themes and have a dark background. I’d either like to change the background color or the text color for only the events section. Any suggestions?

Cheers!

[Jeff]

http://www.theseahorsetavern.ca/upcomingevents4/

WordPress 4.1.1 running K-BOOM theme

[Jamie]

Hey Jeff,

Here’s my site: http://livemusicmalta.com, you can see the issue I’m having in the events section.

[Jamie]

Sorry, that last message was meant for George, not Jeff! My apologies.

[George]

Hi Jeff,

There wasn’t much context provided with your recent reply, but I looked at the link you shared in it and assumed that what you were trying to do was make the events listing area have its own background separate from the background of the site – if this is not the case, let me know in more detail what you’re trying to accomplish.

Assuming what I described is accurate, here’s some CSS I tested out on your site:

#tribe-events-pg-template {
    background: #fefefe;
    padding: 5em 0;
}
h2.tribe-events-page-title {
    color: #000;
}
.tribe-events-list-event-title a {
    color: #000;
}

Here’s a screenshot of how these quick CSS changes looked on your site when I tested them → https://cloudup.com/c7ZydWXHdGs/f

If you add those styles to the bottom of your theme’s style.css file, you should be able to start with those styles and play around a bit to create exactly what you want.

I highly recommend getting and learning the basics of a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome – these tools can help you dig down into your site’s markup and figure out what exact CSS you need to write to overwrite the existing styles.

Cheers!
George

[George]

Hey Jamie,

For further assistance with your specific issue, I’d recommend opening up a new ticket here on your support forums. This just helps us keep things organized and ensure each customer is responded to with things specific to their issues – however, try playing around with some of the CSS I recommended to Jeff in the meantime, it may work well for you or spark some ideas for enabling you to take the reins from there on.

Thanks!
George

[Jeff]

Holy crap George!
That is exactly what I was looking for.
I got it working on my end. Thanks a million for your help.

[Jeff]

So I was able to get the background colour changed, thanks!
http://www.theseahorsetavern.ca/upcomingevents4/

Now I have two small problems to solve.

1 – where can I change the colours of the text where it says “reoccurring event”?
2 – There is a box around the venue name on each event that covers the date, is there a way to change that?

[George]

Hey Jeff,

I’m glad my first tidbit of CSS helped out, awesome.

For your other questions, here are some thoughts – changing the “Recurring Event” text can be done by writing custom CSS like this, which just applies a random orange-color I thought of to the text:

.type-tribe_events .event-is-recurring {
    color: #cc9900;
}

Here’s a screenshot of how that looks on your site → https://cloudup.com/cMuMljqfk_w

As for the box around venue information, this is something you’ll have to play around with – I don’t know if you meant changing the colors or not, but the following bit of custom CSS will at least cut the box padding down so that it doesn’t cover other information:

.tribe-events-venue-details span.author {
    padding: 0;
}

Try out this CSS, I hope it helps. I’m sure there will be many more little tweaks here and there to make, but unfortunately we cannot help with each one. It’s nothing personal! 🙂 We just have limited support resources and have to keep customization support minimal. I can’t recommend a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome enough – I recommended these tools above, and Jeff, I urge you to look into using these tools – they’re a lifesaver! You can use the “inspector” tool in each tool to hover an element on your page whose CSS you want to change, and the CSS that already exists for it will pop up in the Inspector window – then you can just copy it, and make what edits you want, and save your changes.

Those are great tools and I hope you take advantage of them Jeff. For now, just since the original items of this ticket have been addressed, would you say this ticket is “resolved”? If so, mark this ticket as such, or let us know if you have any other questions or concerns.

Thanks,
George

[Jeff]

I’ve been digging into the developer tools like you suggested, the problem I am running into now is that it says the info is coming from the “lists.css” which, in the wordpress plugin editor or via ftp, i cannot find that file for the life of me.

Any thoughts?

[Jeff]

George, once again your code worked wonders!

I got it working and I am off to the races.

Thanks again!
sorry for the frustration level in the first post. A1 support.

[George]

Hey Jeff,

No worries about frustration levels – I’m glad we were able to help here!

One last comment, related to your question here:

I’ve been digging into the developer tools like you suggested, the problem I am running into now is that it says the info is coming from the “lists.css” which, in the wordpress plugin editor or via ftp, i cannot find that file for the life of me.

Any thoughts?

If the developer tools say that that file is where the styles are coming from, that does not mean you should then find that specific file and edit the CSS there.

All you should really do is note what specific style rules are being applied period, regardless of their original file – you can then copy and paste these style rules into the bottom of your theme’s style.css file
, or in a child theme (which you can learn more about here). The rules you make there should still override whatever rules are coming from the original files, with the benefit of being able to keep all your customizations in one place – this makes maintenance, further editing, and updating your site a lot easier.

Just a little tip there – I hope it helps!

Thanks for being cool with the limitations of our support here. Since we’ve addressed some of your main concerns I’ll close up this ticket for now, but don’t hesitate to come back if any other questions or concerns arise.

Best of luck with your project,
George

[Author]

Posts