WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom CSS and upgrades [plugin: the-events-calendar] (5 posts)

  1. argraff
    Member
    Posted 4 years ago #

    Loving this plugin, but having some issues with custom styling. The plugin's CSS file supercedes the main CSS (boo!) so just adding styles to the main CSS is out, as is prescribed here. My solution (temporary) is to blank out the plugin's CSS and copy those styles over to my main stylesheet.

    This is obviously going to be a problem.

    • One: I am using wp-hive and all sites share the plugin files, so blanking one out is not a good idea.
    • Two: I'm going to have to remember to blank it out again after an upgrade.
    • Three: If the code changes and that results in a CSS class change (for example), that's going to cause me headaches down the road.

    Is there a better solution to this?

    The site I'm working on is here.

  2. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Hi,

    Thats odd. On my test site, the plugin css is superseded by the theme css file. Let me check into this and get back to you.

  3. argraff
    Member
    Posted 4 years ago #

    Thanks! I'm really hoping this is something silly.

  4. Dan Cameron
    Member
    Posted 4 years ago #

    argraff,

    The events.css file should precede your theme's style sheet, my guess would be your theme is not using wp_enqueue_style for the site's stylesheet.

    Regardless, if the events stylesheet supersedes the main style we're using simple CSS selectors ( most of the time ) so if you add a parent selector your theme's CSS will override the events.css ( no matter which stylesheet comes first ).

    Example,

    This is what we have in events.css -

    .tec-calendar th {
    	width: 250px;
    	height: 10px;
    	background: #999 url(images/grid-th-bg.png) repeat-x;
    	color: #fff;
    	padding:4px 0;
    	text-shadow:1px 1px 0 rgba(0,0,0,.5);
    	text-align:center;
    }

    If we wanted to overrite the background we could do something like this in the theme's stylesheet -

    .category-events .tec-calendar th {
    	background:#000;
    }

    .category-events is used on the calendar page, if you wanted to override something on the post page use something like .single or #content ( these selectors are specific to your site ).

    Another method to overrite the events.css selectors would be to use !important.

    Example,

    This is in the events.css and since it uses the .category-events there isn't a parent to use -

    .category-events #tec-content {
    	background:#fff;
    	width:670px;
    	padding:1px 35px;
    	margin-left:10px;
    }

    but in the parent theme we can overrite the background regardless, like so -

    .category-events #tec-content {
    	background:#fff !important;
    }
  5. argraff
    Member
    Posted 4 years ago #

    Awesome - thanks for posting. I hadn't considered the !important tag solution at all. I will be trying that out!

    I did find out that my stylesheet was being called before the TEC one, hence the issues. I wish WP had a way to designate "put plugin stylesheets here" in the header...

    For my temp fix, I simply put the call for my stylesheet at the very bottom of the head.

Topic Closed

This topic has been closed to new replies.

About this Topic