WordPress.org

Ready to get started?Download WordPress

Forums

Ajax Event Calendar
Override eventlist CSS? (6 posts)

  1. squidz
    Member
    Posted 2 years ago #

    I'm really liking how this plug works in general. However, I'm having hell overriding the CSS for the eventlist, in particular.

    Do I have to go in and edit the plugin CSS which will then be erased anytime the plugin is updated?

    http://wordpress.org/extend/plugins/ajax-event-calendar/

  2. squidz
    Member
    Posted 2 years ago #

    extra note: I've tried overriding some of the styles (example the event list background-color) by putting it in custom.css. However, this has no effect either.

    My main objective is to style the home page's event list to fit the design. That means removing the blue bg color and setting some font styles.

    The blue bubbles don't go with the design at all. The functionality is spot on though.

    It would be ideal i there were a custom.css file that lived outside of the plugin's directory so that it won't be killed off from an update.

  3. squidz
    Member
    Posted 2 years ago #

    Apologies for the multi-post. So, I've found that there is a big chunk of inline styles that are injected before the eventlist output. This will prevent ever overriding the eventlist display with any other stylesheet.

    So how might one alter the display generated by the eventlist shortcode?

    The FAQ says to override existing styles in your theme stylesheet, but this has not worked not has putting the edits into the custom.css due, I'm assuming, to the big block of inline styles shown below.

    <style>.cat1,.cat1 .fc-event-skin,.fc-agenda .cat1,a.cat1,a.cat1:active,a.cat1:visited{color:#FFFFFF !important;background-color:#517ed6 !important;border-color:#517ed6 !important}
    a.cat1:hover{-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;color:#FFFFFF !important;background-color:#517ed6 !important;border-color:#FFFFFF !important}
    .cat2,.cat2 .fc-event-skin,.fc-agenda .cat2,a.cat2,a.cat2:active,a.cat2:visited{color:#FFFFFF !important;background-color:#e3686c !important;border-color:#e3686c !important}
    a.cat2:hover{-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;color:#FFFFFF !important;background-color:#e3686c !important;border-color:#FFFFFF !important}
    .cat3,.cat3 .fc-event-skin,.fc-agenda .cat3,a.cat3,a.cat3:active,a.cat3:visited{color:#FFFFFF !important;background-color:#8fc9b0 !important;border-color:#8fc9b0 !important}
    a.cat3:hover{-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;color:#FFFFFF !important;background-color:#8fc9b0 !important;border-color:#FFFFFF !important}
    .cat4,.cat4 .fc-event-skin,.fc-agenda .cat4,a.cat4,a.cat4:active,a.cat4:visited{color:#FFFFFF !important;background-color:#82ba80 !important;border-color:#82ba80 !important}
    a.cat4:hover{-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;color:#FFFFFF !important;background-color:#82ba80 !important;border-color:#FFFFFF !important}
    </style>
  4. walkinman
    Member
    Posted 2 years ago #

    Hey squidz

    Have you tried backing up that file, and then uploading a new one with the edits in it you want. That's what I did, and it worked OK. It means those are overidden with updates, but at least it works.

    I was able to copy the code from this file into my style.css file and make the changes I wanted to, and get it to work. I'm not sure why it's not working for you.

    #aec-calendar {
    
    		font-size:13px;
    		line-height:16px;
    		background: #fefef3;
    		-moz-border-radius: 5px;
    		-khtml-border-radius: 10px;
    		-webkit-border-radius: 10px;
    		border-radius: 10px;
    		border: 2px solid #222222 !important;
    
    }

    That's all I had to do.

    When I ran the newest upgrade I ran into some other problems, as yet unresolved. But you should be able to do what you want here with the css thing.

    Cheers

    Carl

  5. squidz
    Member
    Posted 2 years ago #

    Thanks Carl -

    I did finally manage to get my styles properly configured to override those in the custom.css without actually editing custom.css.

    The key was actually that there is a shortcode setting for the Event List that strips the coloring out. So once I set:

    [eventlist whitelabel="true"]

    I was able to style from my own stylesheet.

  6. Adam
    Member
    Posted 1 year ago #

    Hiya,

    If you want to completely remove custom.css and roll your own, you can:

    add_action( 'wp_print_styles', 'deregister_aec_styles', 100 );
    function deregister_aec_styles() {
        wp_deregister_style( 'custom' );
    }

    in functions.php

    Hope that helps someone!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic