Editing the events.css inside theme

[Robert]

Hi guys,
This is not a major issue but I’m not having success when I try to edit the event calander css by adding to my theme’s css.
Basically, for evenything I try to change I have to add the !important suffix in order for the changes to take place.
I tried the following: Copy the events.css into my theme folder but even when I make changes there, noting actually shows up.
I guess I could continue using the !important term to execute but was wondering if there were any other work-arounds here?

Thanks

[Samuel]

You need to put events.css inside a folder called “events” inside your theme folder, the same place as any custom views you do for the system. Is that were you put it and it doesn’t register it? That’d be weird, works for all my installs, never had an issue with that.

[Rob]

Robert: Samuel’s point is spot on. Have you followed those steps but find you’re still having problems? Let me know if so and I can get a dev to take a look.

[Robert]

Hi Rob ( and Samual)
I actually did put the events.css into a folder but I can only access the folder in my hosting account to make the changes. I was looking for a way to directly adjust the css in the wordpress backend. That was the reason for copying the css directly (not in an events folder) into the theme folder itself, hoping the changes I made would stay.

[Rob]

Ah, gotcha. I’m not sure how possible that is, but then again I have no experience attempting it – so let me see if Jonah has any suggestions.

[Jonah]

Hey Robert, a good rule of thumb when coding CSS is to never use the !important rule unless you absolutely need which in this case I don’t think you do. A much better approach is to utilize our CSS friend, specificity. Read up briefly on it here if you want: http://css-tricks.com/specifics-on-css-specificity/

Basically CSS specificity is a scoring system for CSS declarations that weighs rules by the selectors used in the definition. So, a plain class declaration (.my-div) will score lower than an ID declaration (#my-div) and you can modify styles much more effectively by overriding an existing style by applying a higher specificity.

For example, say you have this style in place:

.my-div {
width: 100%;
}


You could simply override it by finding a ID selector before .my-div (maybe another wrapper div or something that contains it) and using:

#wrapper .my-div {
width: 500px;
}


You’re still targeting .my-div but by prefixing it with an ID selector the second declaration gets a higher score and that style will be applied. This is how I would suggest styling what you need to. Now, we do have a number of !important rules in our own stylesheet which we will be removing in the near future. So in cases where you want to override these styles you will need to always include the !important rule after your CSS.

I hope that all makes sense. If you can give me a specific example or two you’re still having trouble with I’ll see if I can get you some more relevant examples. Happy CSS’ing!

Regards,
Jonah

[Robert]

Thanks Jonah for the very in depth response – very helpful. I’ll give it a go with firebug and see if I can work it out from here.

Many thanks

[Jonah]

Sounds good Robert!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts