Resolved Need to individualize margins for separate accordions.

[marlenecassidy 0]

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: www.arttrustmasters.com/art-history-timeline/ 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.www.arttrustmasters.com/featured-article/

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. www.arttrustmasters.com/latest-news/

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

[Danny+ 1,327]

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.

// Art History Timeline

.page-id-570 .accordion-inner { padding: 30px 60px; }


// Feature Article Page

.page-id-787 .accordion-inner { padding: 30px 60px; }


// Latest News

.page-id-660 .accordion-inner { padding: 30px 60px; }[/code]


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.


http://screencast.com/t/HOsjhjnUIYX

[marlenecassidy 0]

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

[Rob 547]

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.

[Danny+ 1,327]

The topic was marked as resolved.