Jump to content


Photo
- - - - -

Accordion transparent background

transparent accordion

Best Answer Rob , 06 June 2013 - 02:45 PM

Wrap the entire accordion code into a div with a unique class as below:

  1. <div class="myownaccordion">
  2. [pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
  3. Content 1
  4. [/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Title 2"]
  5. <img class="pl-imageframe" src="http://placekitten.com/285/125" alt="" />
  6. [/pl_accordioncontent]
  7. [/pl_accordion]
  8. </div>

Then, apply your CSS to the unique class:

.myownaccordion {

background-color: transparent;

}

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 pato

pato

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 06 June 2013 - 01:20 PM

Hey,

 

How do I do a accordion with a transparent background? 

 

FOr example, using this code (from 

Please Login or Register to see this Hidden Content

):

 

 

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

    Please Login or Register to see this Hidden Content

    "
    alt="" />
  5. [/pl_accordioncontent]
  6.  
  7. [/pl_accordion]

 

The following didn't work with the div is put on either side. Nor does bg-color:

<div style="background: rgba(255, 255, 255, 0.0);"></div>



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 06 June 2013 - 01:49 PM

The correct way to do this is to add CSS styling to the element. 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the Accordion sections to find the correct code.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content



#3 pato

pato

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 06 June 2013 - 02:24 PM

Oh  thanks for that. :) HUGELY APPRECIATED! That is an amazing tool (in Chrome).

 

However, I can't get it to select the element I want to work with. 

 

How do I implement the code on the page or through pagelines > site options > custom CSS?

 

 

element.style {
  1. background-colorrgba(255, 255, 255, 0.0);
}


#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 June 2013 - 02:45 PM   Best Answer

Wrap the entire accordion code into a div with a unique class as below:

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

    Please Login or Register to see this Hidden Content

    "
    alt="" />
  6. [/pl_accordioncontent]
  7. [/pl_accordion]
  8. </div>

Then, apply your CSS to the unique class:

.myownaccordion {

background-color: transparent;

}



#5 grahamd79

grahamd79

    Advanced Member

  • Members

  • 54 posts
  • Country: Country Flag

Posted 18 October 2013 - 09:06 PM

Had to dig into the CSS to get a transparent accordion working on DMS.

 

Two classes to style were:

 

.accordion-group 

.accordion-heading

 

If you use a rgba background you can get nice effects if you have a background beneath it like:

Please Login or Register to see this Hidden Content



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 October 2013 - 03:34 AM

Thanks for sharing that @

Please Login or Register to see this Hidden Content

! :)







Also tagged with one or more of these keywords: transparent, accordion