Jump to content


Photo
- - - - -
Resolved

Need to individualize margins for separate accordions.

accordion accordionmargins

  • Please log in to reply
4 replies to this topic

#1 marlenecassidy

marlenecassidy

    Member

  • Members

  • 16 posts
  • Framework Version:PageLines Framework - Professional Edition
  • Country: Country Flag

Posted 21 September 2012 - 05:40 PM

Hello!

I need to individualize margins for separate accordions on different pages.

Does anybody know how to do this?

To see what I mean:

1. Go to this page:

Please Login or Register to see this Hidden Content

See how the "read more" is aligned with the main text?

I was given the custom code to achieve this:

.accordion-heading {background: #ffffff;}
.accordion-group {border:none;}
.accordion-group {background: #ffffff;}
.accordion-heading a:hover {background: #ffffff;}
.accordion-heading {margin-left: 645px;}
.accordion {margin-top: -51px;}

This works very well.

I was given this code to use on the html part of the page:

[pl_accordion name="accordion"] [pl_accordioncontent name="accordion" number="1" heading="read more" open="no"]

[/pl_accordioncontent]

Here is the problem:

1. I set up 2 more accordions on 2 other pages

1.

Please Login or Register to see this Hidden Content



I used the same code to set it up on the page which works:


pl_accordion name="accordion2"] [pl_accordioncontent name="accordion2" number="1" heading="read more" open="no"]

[/pl_accordioncontent]

The problem is that I can't set up/control the margins:


.accordion2-heading {margin-left: 600px;}
.accordion2 {margin-top: -51px;}

The margins don't move anywhere no matter what number I put in ___px.

2.

Please Login or Register to see this Hidden Content



Same thing as above.


I used the same code to set it up on the page which works:

pl_accordion name="accordion3"] [pl_accordioncontent name="accordion3" number="1" heading="read more" open="no"]

[/pl_accordioncontent]

The problem is that I can't set up/control the margins:

.accordion3-heading {margin-left: 300px;}
.accordion3 {margin-top: -51px;}

Can anybody tell me what I am doing wrong?

Here is how the entire custom code looks like:



.accordion-heading {background: #ffffff;}

.accordion-group {border:none;}

.accordion-group {background: #ffffff;}

.accordion-heading a:hover {background: #ffffff;}

.accordion-heading {margin-left: 645px;}

.accordion {margin-top: -51px;}


.accordion2-heading {margin-left: 600px;}

.accordion2 {margin-top: -51px;}


.accordion3-heading {margin-left: 300px;}

.accordion3 {margin-top: -51px;}



Thank you all for your help!
Marlene

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15051 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 September 2012 - 08:45 AM

Hi,

First things first, in future when posting code, can you use the code BBcode please. Its the icon with < >, this will allow the reading of code to be much easier.

You will need to use the page ID to individual style your accordion boxes. I have added the code below for all three pages, so you can use this right away and also as a future reference.

Please Login or Register to see this Hidden Content


I have added padding instead of margin, but you can use either if you like.

If you also wish to know how I find the page ID, all you need to do is load up FireBug or Google Chromes web dev tool and inspect your page html, at the top you should see body which has a number of classes assigned to it, one of these is page-id-XX (replace XX with your pages id value. I have added a screenshot to assist you.

Please Login or Register to see this Hidden Content


  • marlenecassidy likes this

#3 marlenecassidy

marlenecassidy

    Member

  • Members

  • 16 posts
  • Framework Version:PageLines Framework - Professional Edition
  • Country: Country Flag

Posted 28 September 2012 - 12:03 AM

Hi Danny,

Sorry for the late reply but I was out of town. First of, thank you so much for your reply!!!
It worked.
What is bbcode?
All the best and have a pint.
Marlene

#4 Rob

Rob

    One Smart Egg

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

Posted 28 September 2012 - 02:24 AM

bbCode is 'bulletin-board code' allowing you to paste things like CSS and shortcodes, html, etc into these posts just as Danny did, separated with a highlighted background. It keeps the code from mixing with the text so we can distinguish one from the other.

As he said, just click the icon above when editing, showing two green arrows, one left and the other right. You can highlight the code and click that or click it first and paste your copied code in between the code] and [/code you will see.

#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15051 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 September 2012 - 07:30 AM

The topic was marked as resolved.





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