Jump to content

Archived

This topic is now archived and is closed to further replies.

chrischmer

Different colors for individual accordions

Recommended Posts

chrischmer    2
chrischmer

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

 

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

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


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
chrischmer    2
chrischmer

Hi Ellen,

 

this works perfectly!

Thank you very much.

 

Redards,

Christian

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • petere21
      By petere21+
      As I understand El Sues Accordions section is broken. Simon solved this problem by fixing section and we need to download it again.
      But in my account in download area there is no accordions section to download. Where can I download it? !!! Asap please my web is broken.
      Peter
       
    • chamois_blanc
      By chamois_blanc+
      Hello,
      All accordion entries are shown every time, independently of the set selected. See example here:
               http://swinginatthesavoy.com/register/
      The first accordion should only show the 2nd and 3rd entries, instead of all of them. The second accordion should only show the 1st entry.
      Please fix asap! I haven't changed anything to my content in a few weeks and it was working fine before. I am guessing this appeared in one of the latest DMS updates. I am going to use some CSS to try to hide the undesirable entries.
      Gilles
    • balfred1345
      By balfred1345
      Hi Ellen,
      I've tried every way I could think of to use CSS to get rid of what I assume is padding or margin from the top of the accordion section so that it can be closer to the <p> above it. 
      Here's a screenshot of the way it looks now:  http://screencast.com/t/2c66f6y0dex
      If you'd like to look at the page please see: http://whub34.webhostinghub.com/~videoh6/cidev2.com/moving-services/mankato-mn-movers/
      I'd like to have the accordion section with the word "More" much closer to the paragraph line above it. If you look at the CSS you'll see several instances where I put in margin: 0 !important; and padding: 0 !important.
      Can you please tell me how I can adjust the section so it is closer to the paragraph above it?
      This site is on latest versions of DMS 2 and WP. 
      Many thanks,
      Bruce
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I wanted to let the community know that there is a problem that has happened on a couple of DMS sites that we manage. The problem is that there are certain plugins/sections that DMS uses (such as 'Accordions' and 'Sidekick') that will appear to have an update. However, when you actually update the plugin it is replaced but a similarly named plugin. Here are the original plugins:
       
      Original: http://dms.elsue.com/accordions/ (authored by @ellenmva)
      Replaced with: https://wordpress.org/plugins/accordions/
       
      Original: http://www.pagelines.com/shop/third-party-extensions/sidekick/ (authored by Evan Mattson)
      Replaced with: https://wordpress.org/plugins/sidekick/
       
      I just wanted to know if there is anything I can do to make sure that other plugins/sections do not get replaced when I update them in the future as well as bring it to the DMS community's attention so that others do not experience the same confusion and frustration. Any thoughts would be very welcome in order to avoid this in the future.
      Thanks!
    • alisamski
      By alisamski+
      Using the accordion section... and I am trying to link a menu item to the accordion title.. not individual areas...
      My links work in the main menu, linking to an accordion title... however, they seem to have issues... I have two accordions on this page...
      When I use the menu link (below).. it breaks the accordion action... it will not open the accordion to show all the content.
      http://bit.ly/1TepJ3s
      http://bit.ly/1Hwqf84
      however when I go to the actual page.. there is no issue.
      http://bit.ly/1QPBt8r
      Please if you can take a look, I'd appreciate it.. not sure if I have the link correct.
×