Jump to content


Photo
Accordions

CSS questions

css shortcode accordion border-radius

  • Please log in to reply
8 replies to this topic

#1 alisamski

alisamski

    Advocate

  • Members

  • 473 posts
  • Framework Version:DMS 2 | DMS 1 | Frameworks | Child Theme
  • Country: Country Flag

Posted 10 July 2014 - 10:24 PM

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



#2 ellenmva

ellenmva

    Advocate

  • Members

  • 309 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 July 2014 - 12:24 PM

@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

 

 



#3 alisamski

alisamski

    Advocate

  • Members

  • 473 posts
  • Framework Version:DMS 2 | DMS 1 | Frameworks | Child Theme
  • Country: Country Flag

Posted 11 July 2014 - 01:34 PM

@ellenmva

That CSS does not seem to work....

 

:-(

 



#4 ellenmva

ellenmva

    Advocate

  • Members

  • 309 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 July 2014 - 01:42 PM

@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



#5 alisamski

alisamski

    Advocate

  • Members

  • 473 posts
  • Framework Version:DMS 2 | DMS 1 | Frameworks | Child Theme
  • Country: Country Flag

Posted 11 July 2014 - 01:46 PM

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.



#6 ellenmva

ellenmva

    Advocate

  • Members

  • 309 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 July 2014 - 02:12 PM

@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

 



#7 alisamski

alisamski

    Advocate

  • Members

  • 473 posts
  • Framework Version:DMS 2 | DMS 1 | Frameworks | Child Theme
  • Country: Country Flag

Posted 11 July 2014 - 02:22 PM

Will try that. and report back... thanks



#8 alisamski

alisamski

    Advocate

  • Members

  • 473 posts
  • Framework Version:DMS 2 | DMS 1 | Frameworks | Child Theme
  • Country: Country Flag

Posted 11 July 2014 - 02:33 PM

@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;
}



#9 ellenmva

ellenmva

    Advocate

  • Members

  • 309 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 July 2014 - 02:35 PM

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

 

Best,

 

Ellen





Also tagged with one or more of these keywords: Accordions, css, shortcode, accordion, border-radius