Forums

jquery.ui.css screwing up my accordion's style

Permalink
I've checked the threads, jacked off twice but not found a solid way to override jquery.ui.css, and liberate the aesthetic essence of my jquery-pow-pow-powered McCordion, a slinky.

Anyway, I've migrated jquery.ui.css from concrete/css to /css, where i've since been pucking with it. I've tried a few tricks, including !important and a couple of different .classes in my migrated stylesheet, none of which do it cleanly. jquery.ui.css overrides the stylesheet in my block, the McCordion. And jquery.ui.css lags a few seconds before its styling kicks in. Here's my head:

<head profile="http://gmpg.org/xfn/11">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getStyleSheet('typo.css')?>" />
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getStyleSheet('main.css')?>" />
   <?php  Loader::element('header_required'); ?>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/mcjquery.js"></script>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/ddsmoothmenu.js"></script>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/infobubble.js"></script>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/mapsensor.js"></script>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/mapfire.js"></script>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/sbar.js"></script>
   <script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=318328594907785"></script>
   <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
   <script type="text/javascript" src="//platform.linkedin.com/in.js"></script>
Viewing 15 lines of 19 lines. View entire code block.



custom.js is where i get the DOM ready. Thanks for the help up front.
McCormick
 
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
Have a look at the documentation for http://www.concrete5.org/marketplace/addons/magic-tabs/...

It describes how to override the built in jquery.ui.css styling for tabs. A similar technique should work for accordion.
McCormick replied on at Permalink Reply
McCormick
John, this is perfect. The data-selected-class attribute set my McCordion free. Much thanks for your help.
JohntheFish replied on at Permalink Reply
JohntheFish
Glad it helped. I am going to be doing an accordion variation of Magic Tabs some time, so may well come across some of this myself.