Jump to content

Archived

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

basmati

Accordion: How to use custom css class for accordions?

Recommended Posts

basmati    4
basmati

Hi Ellen,

I'd like to have accordions from different categories and with different colors on one page.

Is it possible to use the category as css class and than style each accordion class with different color settings?

 

Perhaps a better solution would be:

a custom class for each accordion category in the backend - like on pageliens boxes.

 

any ideas for a smart solution?

 

if there isn't an easy way: how much do you charge for adding a css class box into the accordion php template?

 

Greetings, peter

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

basmati Just to clarify what you would like, you have different accordion sets on a page and you want to target each accordion set individually and give each accordion in the set a different color?

 

If you want each set category to be a different color that's already part of Accordions in the PageLines Setting Panel for each Accordion Group you have on the page.

 

And, also you are using PageLines Framework, correct?

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
basmati    4
basmati

Ellen, yes thats right!

 

we need about 4 different accordion colors and they change several times in a year - for different events (each event slot has its own color design).

 

as far as i understand it i could clone the accordion section 4 times and than select the colors for each clone - in the accordion pagelines meta settings on the selected page.

but that would be a little confusing for some of the page editors. the editor has to look for the right clone of accordion sets and select the one with the right color. and than select the right accordion category. thats possible but confusing.

 

so, the easiest way would be to have a field in the pagelines metasettings - to fill in a css color class - for example:

.ret, .blue, .yellow, .pink (... and thats possible with pagelines boxes...)

 

i hope you understand what i mean!?

 

... using PageLines Version 2.

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

basmati See PageLines Boxes don't have you setting the colors in the options so it has a class so you can change the styling. With DMS it is an option with every section to have a class, Framework didn't setup that way and right now I am just making bug changes on Framework products. And, is it one accordion set on the page or 4? Still a bit confused. 

 

Also, the colors are inline and the hover works off of them too. So if I can add a class for you all your css is going to have !important on it to override the inline styles. Not pretty.

 

Let me see how long it would take to make that change, add the field and add the class to the html. If it is something simple then I will just add it, if not we can talk about customizing it for your needs.

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
basmati    4
basmati

understand! i now tested to clone the accordion section and than use the ones i need and hide the others.

i think this will work. thanks for your answer and help! 

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

basmati Thanks for understanding. Let me know if you do run into any difficulties with the cloning method.

 

Best,

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
basmati    4
basmati

ok, one more thing: by default only one accordion should be open at the same time - right?

its not working on pages with different cloned accordions. ... could that be a jQuery conflict?

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva
It could be a conflict, if you use Chrome Developer Tools you would see the error in the console.

Otherwise, do you have a link to the site I can look at by chance?

Ellen


Sent from my iPad using Tapatalk

Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
basmati    4
basmati
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

it has found this warning...

 

i could email you the page url

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

basmati Yes, that's just a warning so that's not it. Still could be a conflict.

 

If you click on my image you can send me a private message with the link. That would be great.

 

Thanks.

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

basmati I took a look at the site and the problem is that each accordion set is a separate entity, only within the Accordion Set will the accordion shut when the next one is open. So, if the accordions are all in the same set in the one Accordion section then they would open and close.

 

I don't know if there is any easy way around that problem with what you are trying to accomplish. Let me look at it over the weekend, I might be able to give you a small function, either that or I break down and add the ability to add a custom class to the accordion and you can add css to target that class, your original request.

 

Best,

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
basmati    4
basmati

adding classes would be great - but i suppose you haven't found an easy solution during the weekend?

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.
×