Thread Starter
squidz
(@squidz)
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.
Thread Starter
squidz
(@squidz)
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>
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
Thread Starter
squidz
(@squidz)
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.
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!
