• 0
Sign in to follow this  
Followers 0

Accordion transparent background


Question

Posted · Report post

Hey,

 

How do I do a accordion with a transparent background? 

 

FOr example, using this code (from http://demo.pagelines.me/tools/):

 

 

  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="http://placekitten.com/285/125" 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>

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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:

.accordion-group {
  background: rgba(255, 255, 255, 0.2);
  border: none;}

.accordion-heading {background: rgba(255, 255, 255, 0.3);
  border: none;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing that grahamd79! :)

Share this post


Link to post
Share on other sites

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
Sign in to follow this  
Followers 0