Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 517
  • Last Modified:

jquery accordion color help

I am using an accordion and I can not seem to get the bullets to to know take the default of the title in terms of color.  I add links to it and it defaults to my text on the heading part.  I have added the css and html below.

The links want to be white #fff.  If I change this it messes up the h3 setting.  Ideas?

Thank you


/*****accordion*****/

#app-accordion h3 a{padding-left:15px;}

.ui-icon-circle-arrow-s, .ui-icon-circle-arrow-e{display:none;}



dl#accordion {

	  list-style-type:none;

	  margin: 0;

	  padding: 0;

	  width:100%;

	  overflow:hidden;

	}



	dl#accordion a {

	  display: block;

	  text-decoration: none;

	}



	dl#accordion dt {

		border-right:1px solid #cacaca;

		border-bottom:1px solid #cacaca;

		background:url(../images/acardion-dt-tail.gif) 0 0 repeat-x #f6f8f0;

		margin-bottom:2px;	

		border-radius:6px;

		-moz-border-radius:6px;

		-webkit-border-radius:6px;

	}

	dl#accordion dt.last {

		margin-bottom:0px;

		

	}

		dl#accordion dt a {

		  font-size:18px;

		  line-height:35px;

		  color:#000;

		  text-decoration:none;

		  display:block;

		  background:url(../images/acardion-marker.png) 8px 10px no-repeat;

		  padding-left:38px;

		}



	dl#accordion dt a:hover {

	  cursor:pointer;

	}



			dl#accordion dt.active {

				background-image:url(../images/acardion-dt-active.gif);

			}

		dl#accordion dd {

			display:none;

			margin-bottom:0;

			height:233px;

			font-size:14px;

			line-height:19px;

			font-style:italic;

			color:#8d927d;

		}

			dl#accordion dd .ind {

				padding:30px 5px 0px 17px;

			}

			

/* Application Accordion */

#app-accordion{

}

#app-accordion h3{

	margin:0;

	color:#fff;

	font-size:15px;

	font-weight:normal;

	border:1px solid #716036;

	cursor:pointer;

	background-color: #9b8449;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#9b8449), to(#594c2a)); /* Saf4+, Chrome */

	background-image: -webkit-linear-gradient(top, #9b8449, #594c2a); /* Chrome 10+, Saf5.1+ */

	background-image:    -moz-linear-gradient(top, #9b8449, #594c2a); /* FF3.6 */

	background-image:     -ms-linear-gradient(top, #9b8449, #594c2a); /* IE10 */

	background-image:      -o-linear-gradient(top, #9b8449, #594c2a); /* Opera 11.10+ */

	background-image:         linear-gradient(top, #9b8449, #594c2a);

	-pie-background: 			linear-gradient(#9b8449, #594c2a);

}

	#app-accordion h3.first{

		-moz-border-radius:5px 5px 0 0;

		-webkit-border-radius:5px 5px 0 0;

		border-radius:5px 5px 0 0;

	}

	#app-accordion h3.last{

		-moz-border-radius:0 0 5px 5px;

		-webkit-border-radius:0 0 5px 5px;

		border-radius:0 0 5px 5px;

	}

#app-accordion a{

	display:block;

	color:#fff;

	padding:5px 15px;

	text-decoration:none;

	border-top:1px solid #cdc1a4;

}

	#app-accordion a.first{

		-moz-border-radius:5px 5px 0 0;

		-webkit-border-radius:5px 5px 0 0;

		border-radius:5px 5px 0 0;

	}

	#app-accordion h3.last{

		-moz-border-radius:0 0 5px 5px;

		-webkit-border-radius:0 0 5px 5px;

		border-radius:0 0 5px 5px;

	}

#app-accordion .active{font-size:22px;}

#app-accordion div{padding:5px 15px; border:1px solid #ccc;}

#app-accordion p{}

Open in new window

<div id="app-accordion">
        <h3><a href="#">WRITTEN MATERIAL</a></h3>
        <div>
          <div class="extra-wrap">
                           	        <h3>Literature</h3>
      <ul>
                       		          <li><A href="pdf/premier_Rev3.pdf">Premier Informational Flyer (2 page   Flyer)</A></li>
                            <li><a href="pdf/CLEARFlyerRev2.pdf">Clear Flyer (2 page   Flyer)</a></li>
                            <li><A href="Calibration_Check_Flyer.pdf">Calibration Flyer (2 page   Flyer)</A></li>
                                    </ul>
            </div>        </div>
        <h3><a href="#">SUBJECT 2</a></h3>
        <div>
          <p>Test<a href="pdf/article1.pdf">tanks</a>. Test text 1</p>
          <p>Test Text 2.</p>
        </div>

Open in new window

0
solsticeint
Asked:
solsticeint
1 Solution
 
RobOwner (Aidellio)Commented:
I would suggest creating your own theme, very easy and then you know you won't conflict with other jquery ui objects

http://jqueryui.com/themeroller/
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now