Jump to content


Photo
Accordions

CSS questions

css shortcode accordion border-radius

Best Answer ellenmva , 09 January 2015 - 05:03 PM

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

 

Go to the full post


  • Please log in to reply
17 replies to this topic

#1 alisamski†

alisamski

    Advocate

  • DMS Subscriber†
  • 490 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

  • 385 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

  • DMS Subscriber†
  • 490 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

  • 385 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

  • DMS Subscriber†
  • 490 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

  • 385 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

  • DMS Subscriber†
  • 490 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

  • DMS Subscriber†
  • 490 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

  • 385 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



#10 jharri74†

jharri74

    Member

  • DMS Subscriber†
  • 12 posts
  • Framework Version:2
  • Country: Country Flag

Posted 06 January 2015 - 08:13 PM

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....t01/?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

 

 



#11 jharri74†

jharri74

    Member

  • DMS Subscriber†
  • 12 posts
  • Framework Version:2
  • Country: Country Flag

Posted 06 January 2015 - 08:26 PM

Sorry, I changed the permalink. here is updated link: http://www.jayharry....nt01/full-menu/

 



#12 ellenmva

ellenmva

    Advocate

  • Members

  • 385 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 09 January 2015 - 03:41 PM

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

 

Ellen



#13 jharri74†

jharri74

    Member

  • DMS Subscriber†
  • 12 posts
  • Framework Version:2
  • Country: Country Flag

Posted 09 January 2015 - 04:15 PM

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


#14 ellenmva

ellenmva

    Advocate

  • Members

  • 385 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 09 January 2015 - 05:03 PM   Best Answer

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

 



#15 jharri74†

jharri74

    Member

  • DMS Subscriber†
  • 12 posts
  • Framework Version:2
  • Country: Country Flag

Posted 09 January 2015 - 05:33 PM

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



#16 ellenmva

ellenmva

    Advocate

  • Members

  • 385 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 09 January 2015 - 06:41 PM

@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



#17 jharri74†

jharri74

    Member

  • DMS Subscriber†
  • 12 posts
  • Framework Version:2
  • Country: Country Flag

Posted 14 January 2015 - 06:18 AM

oh ok. thank you. I understand now



#18 patsc

patsc

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:2.1.4
  • Country: Country Flag

Posted 17 February 2015 - 01:08 AM

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





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