Question

Posted · Report post

Hi Ellen,

 

ellenmva Using the accordions and having a bit of trouble isolating some of the css for color and border-radius.

 

Three things...

1. Within an actual section added to a page... the color works fine.

When I use the shortcode I cannot set the color. See this link: http://bit.ly/1mkP5xi (shortcode is in the tab loans)

 

I would rather not change all accordions to one color in CSS (as I have some color changes on individual pages) see here: http://bit.ly/1niW9uB

 

2. I was able to change the overall border radius to 10px  however, in the shortcode it does not work.

 

3. Using Font awesome.... the closing selector gets activated on only some of the accordions in the calculator on this page : http://bit.ly/1niW9uB (I have it set not to use the open close selector) Did not want it to show up just the icon.

 

I'm not isolating the correct css..

 

Please advise.

Thanks

Share this post


Link to post

17 answers to this question

  • 0

Posted · Report post

jharri74 Yes, that's the shortcode within DMS, not the shortcode for the Accordions Section. Glad you got it sorted.

 

Share this post


Link to post
  • 0

Posted · Report post

alisamski I like the way you are using Accordions. I am working on an update that will make it easier to style. That's a little ways off though so let's see if we can get things working right for you.

 

1 & 2. For the shortcode, try targeting the styling with the accordion id like so:

.accordion-heading.ac432033324-consumer-loans {
	background: #000000 !important;
	border-radius: 10px;
} 

Right now you need to put the important in to override the background color (that's one of the things I'm working on in the update, not to need the !important).

 

Each accordion has a class along with .accordion-heading, so the one for Auto Loans is  .accordion-heading.ac432033324-auto-loans

 

3. I'll need to look into the font-awesome issue so that it only puts the closing icon if the opening icon is used, not any other icon. Probably just a quick fix in the section. Will let you know when update with fix is available, should be next day or two.

 

Let me know if the css works.

 

Best,

 

Elen

 

 

Share this post


Link to post
  • 0

Posted · Report post

ellenmva

That CSS does not seem to work....

 

:-(

 

Share this post


Link to post
  • 0

Posted · Report post

alisamski I'm not seeing it when I look at http://devweb.coreplus.org/rates/. Can you publish the page so I can see what the css is doing?

 

Thanks,

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

Can you see now?  I've published it...

 

and I'm still not seeing it...

 

I've checked the backend in Pagelines LESS and the code is there.

Share this post


Link to post
  • 0

Posted · Report post

alisamski Ah, I see the problem. The accordion group number is changing because it is random. To fix that, in your accordion shortcode we are going to give the set of accordions a name by adding accordions_id="loans" So your shortcode would look like (may have more to it as well)

[accordions accordion_set="your_accordion_set" accordions_id="loans" accordion_hash="slug"]

Then target the accordion with .accordion-heading.acloans--consumer-loans (see how the number is replaced with acloans.

 

Let me know if that works.

 

Sorry for the trouble.

 

Ellen

 

Share this post


Link to post
  • 0

Posted · Report post

Will try that. and report back... thanks

Share this post


Link to post
  • 0

Posted · Report post

ellenmva

So a bit of tweaking... this is how the css looks and is working!... needed to add the id "number" not name... thank you!

 

.accordion-heading.ac3-consumer-loans {
    background: #e2db6a !important;
    border-radius: 10px;
}
.accordion-heading.ac3-auto-loans {
    background: #e2db6a !important;
    border-radius: 10px;
}
.accordion-heading.ac3-home-equity-loan {
    background: #e2db6a !important;
    border-radius: 10px;
}

Share this post


Link to post
  • 0

Posted · Report post

alisamski Super! I'll work on the icon fix and let you know when the update is ready.

 

Best,

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

Hello, I've put the accordion shortcode in a page but each accordion set is NOT getting its own class. See link.

 

http://www.jayharry.com/localtemplates/Restaraunt01/?page_id=60

 

I'd like to give each Menu set its own background image like the attached. Is this possible? Thanks.

Screen-Shot-2015-01-06-at-3.11.48-PM.png

 

 

Share this post


Link to post
  • 0

Posted · Report post

jharri74 What is the shortcode you are using? Doesn't seem to be picking up any styles for the accordion set.

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

HI Ellen, I should've updated this but my quesions was anwsered the other day by Danny.

 

I was using:

  1. [pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
  2. Content 1
  3. [/pl_accordioncontent]
  4. [pl_accordioncontent name="accordion" number="2" heading="Title 2"]
  5. <img class="pl-imageframe" src="" alt="" />
  6. [/pl_accordioncontent]
  7. [/pl_accordion]

 

 

and he suggested (which worked) using this css:

For example:

 

// This maintains the collapse area as a white background

#site .collapse {
  background: white !important;
}
 
#site .accordion-group:nth-child(1) {
  background: red;
}
#site .accordion-group:nth-child(2) {
  background: green;
}

Share this post


Link to post
  • 0

Posted · Report post

thanks. Sorry but whats the difference (if you have time to explain)?

Share this post


Link to post
  • 0

Posted · Report post

jharri74 not a problem. I hated working with the shortcode that PageLines had for creating accordions so I created a section where each accordion is a post (Accordions post type) and then accordions are grouped together in accordion sets (a custom taxonomy) and displayed on pages using the Accordions Section.

 

I need to update my website, didn't realize so out of date (the last site worked on is always your own), but this shows Accordions and different accordion sets as sections on the page and as a sidebar widget.

 

You can also insert accordion sets using a shortcode, that's what I thought you were referring to.

 

Let me know if any more questions. 

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

oh ok. thank you. I understand now

Share this post


Link to post
  • 0

Posted · Report post

Hello Ellen,

 

I am trying to do the same as jharri but with the Accordion Section (which I love!)

 

I've read the threads relative to putting diferent colors to different tabs, but I am not being  able to put an image instead of color.

 

This is the url I am working on: http://patriciacangas.com/ux-projects/

 

Thank you in advanced.

 

Patricia

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now