Jump to content


Photo
Accordions

Different colors for individual accordions



Best Answer ellenmva , 06 November 2013 - 06:12 PM

@chrischmer There is no option to give each accordion a different color however you can do it with a little bit of CSS/LESS since each accordion has its own class. To find the class for each accordion header use Chrome Dev Tools to inspect the element (just right click on the accordion heading and select Inspect Element). That will bring you into area to find the accordion header class <div class= "accordion-header" ... and next to it will be a class that starts with ac -- that's the class for that individual accordion.

 

DMS_Demo___Just_another_WordPress_site_a

 

Now we can target that heading. Since the background color is inline in the section we have to use !important in the code -- I apologize for that. Here is sample code to change the background and text color for that particular accordion and also the hover background and color.

 
	.section-accordions .accordion-heading.ac1298-accordions-ikrm23 {
  		background: #000 !important; /* Accordion heading background */
  		a {
    		color: #fff !important; /* Accordion heading text color */
  		}
  		&:hover {
    		background: #fff !important; /* Accordion heading hover */
    		a {
    			color: #000 !important; /* Accordion heading hover color */
    		}
 	 	}
	}

You can see the specific accordion class attached to the accordion-heading class, .accordion-heading.ac1298-accordions-ikrm23. Just change that for each accordion. 

 

Hope that helps.

 

Ellen

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 chrischmer

chrischmer

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 05 November 2013 - 04:18 PM

Hi,

 

with the plug-in "Accordions for DMS", is it possible to give each accordion within an accordion set it's own color?

 

Thanks and regards,

Christian

 



#2 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 06 November 2013 - 06:12 PM   Best Answer

@chrischmer There is no option to give each accordion a different color however you can do it with a little bit of CSS/LESS since each accordion has its own class. To find the class for each accordion header use Chrome Dev Tools to inspect the element (just right click on the accordion heading and select Inspect Element). That will bring you into area to find the accordion header class <div class= "accordion-header" ... and next to it will be a class that starts with ac -- that's the class for that individual accordion.

 

DMS_Demo___Just_another_WordPress_site_a

 

Now we can target that heading. Since the background color is inline in the section we have to use !important in the code -- I apologize for that. Here is sample code to change the background and text color for that particular accordion and also the hover background and color.

 	.section-accordions .accordion-heading.ac1298-accordions-ikrm23 {  		background: #000 !important; /* Accordion heading background */  		a {    		color: #fff !important; /* Accordion heading text color */  		}  		&:hover {    		background: #fff !important; /* Accordion heading hover */    		a {    			color: #000 !important; /* Accordion heading hover color */    		} 	 	}	}

You can see the specific accordion class attached to the accordion-heading class, .accordion-heading.ac1298-accordions-ikrm23. Just change that for each accordion. 

 

Hope that helps.

 

Ellen



#3 chrischmer

chrischmer

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 06 November 2013 - 07:57 PM

Hi Ellen,

 

this works perfectly!

Thank you very much.

 

Redards,

Christian


  • ellenmva likes this





Also tagged with one or more of these keywords: Accordions