- This topic has 6 replies, 2 voices, and was last updated 10 years, 3 months ago by
.
-
Posts
-
Brook helped me in this topic with customizing the tribe-events-theme.min.css
https://tri.be/support/forums/topic/where-do-i-change-these-colors/#post-96148I would also like to change these colors https://www.dropbox.com/s/jibhw7iybrghrgs/capture-20140124-082429.png
But I can’t figure out what code to add to the tribe.events.css in my theme that I already added the other codes to (and it works fine. It doesn’t seem to be covered in the theme guideHowdy again runekjensen,
It looks like both of those are defined within tribe-events-theme.min.css.
It is quite true that we do not cover finding CSS styles in our themer’s guide. The guide, and our support, is geared towards those who completely understand the fundamentals of web design; including things like using your browser’s inspector (or other favored tool) to find elements, identify their classes, and their parents. Since this is something most designers will do many times on each site (easily hundreds on some sites), understanding that aspect of web design is a thoroughly necessary requisite to following our themer’s guide.
Personally I generally use Chrome’s inspector in instances like this. I would right click on the elements, click Inspect Element, double check that It selected the right one, then examine the styles pane to see what rules are applying to the style. You may have noticed in that last post I simple copied/pasted existing styles, but add body before each set of selectors. That added a an extra level specificity so that my my style overrided existing ones. Then I changed the colors, and removed the extra stuff I did not need. This is just one technique, there are plenty of them out there and so you might prefer a different one. Here is some documentation/tutorials to elaborate a bit more on the tools I used:
https://developers.google.com/chrome-developer-tools/docs/dom-and-styles
https://developers.google.com/chrome-developer-tools/docs/elements
If that last paragraph or the links are looking like Greek to you, then if is probably a good idea to hire a developer who can make these sorts of changes for you. I hope you understand.
Does that all make sense? If you are interested in hiring a developer, we know some good ones. You can email [email protected] and request a list. They should know all of the necessary stuff to perform customizations.
– Brook
I know how to inspect the element in Chrome, but from that I knowing how to add the code to the theme is not that clear to me.
I find it weird that I should need to hire a developer for something as changing the standard color of the calendar…and I find that a bit alarming that it should be necessary for $65 plugin
I mean it´s more expensive than my entire theme, which is much much easier to change standard elements.
And by the ammount of topics regarding the color changing I can see I´m not the only one whom this is an issue toHowdy runekjensen,
I hope you enjoyed the weekend.
If you are knowledgeable about Chrome Inspector then there would be no need to hire a developer. Simply use the inspector to find the style you want to change, and copy and paste it into your theme CSS. Now you and change the color. The final step is to add an additional selector to your new CSS rule, so that it is more specific than the default one and thus overrides it. You will notice than in your last thread I gave you the following rule:
body #tribe-events-content .tribe-events-tooltip h4{ color:#000; }
I added body before each of the CSS rules as seen in that topic since all elements on the page are inside of the <body> element. See how easy that is? It really is straightforward if you understand the technologies in play.
We do on occasion have people ask similar questions. Many of them are not web designers and thus do not have the requisite CSS/HTML knowledge to design a website on their own, in such cases hiring a developer is very appropriate. That said we are always listening to feedback. If you would like to see a color selector feature built-in to our plugin, like you would see on some themes that cater to the non CSS crowd, please request it. Here is our feature request page. As you can see it allows others in the same scenario to easily voice their support for the idea.
Thanks!
– Brook
I´m really trying but I can’t seem to figure it out.
The problem is that I can’t even see how you found that element style on the last change, because when I inspect that element, nothing like that turns up.
This is what I get when I inspect the elements I want to change
media=”all”
.tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“], .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“]>a, #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .entry-content .tribe-events-button, .tribe-events-button.tribe-inactive, .entry-content .tribe-events-button:hover, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover {
background-color: #21759b;
}This is what I tried, but of course it doesn’t work, as I´, pretty much just guessing :/
body #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .entry-content .tribe-events-button, .tribe-events-button.tribe-inactive, .entry-content .tribe-events-button:hover, .tribe-events-button:hover,body .tribe-events-button.tribe-active:hover {
background-color: #719430;
}
This is extremely frustrating that is this hard to change some simple colors 🙁
Nevermind I got it to work afterall
This is the code that should e added, to anyone interested:
body .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“], .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“]>a,
#tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .entry-content .tribe-events-button, .tribe-events-button.tribe-inactive, .entry-content .tribe-events-button:hover, .tribe-events-button:hover,
body .tribe-events-button.tribe-active:hover {
background-color: #719430;
}
Thanks for sharing your solution. I am sorry you found it so frustrating. Personally I would like to see a few CSS classes added here and there to ease customizations as well. I will talk to the team and see what they think. If you have any suggestions of your own please throw them up on the uservoice page. Thanks!
I am closing this topic now that it’s resolved. Happy site building!
- The topic ‘Customizing the tribe-events-theme.min.css’ is closed to new replies.