Jump to content
marlenecassidy

Need to individualize margins for separate accordions.

Recommended Posts

marlenecassidy    0
marlenecassidy

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marlenecassidy    0
marlenecassidy

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The topic was marked as resolved.


Please search our forums, before posting!

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


  • Similar Content

    • balfred1345
      By balfred1345
      Hi, 
      I'm using El Sue's Accordion plugin  V1.7.4 in DMS2 using WP 4.4.1.
      I've created a set "Jobs2", and selected three accordions for the set. Here's a screen shot: http://screencast.com/t/MXYR9p1QoEAo
      The "accordion set to show" selection box no longer works, and all accordions I've made are showing instead of the set "Jobs2"  You can see this here: http://whub34.webhostinghub.com/~videoh6/cidev2.com/jobs-at-piepho/
      I've deactivated all plugins to see if there was a conflict, and there does not seem to be one, as the accordion selector problem persists even with plugins off. 
      Can you please tell me how to fix this so the "accordion set to show" selector works again?
      Thanks,
      Bruce
    • lmillslagle
      By lmillslagle
      Hi, I'm using the accordion shortcode on this page: http://actonline.org/releases/
       
      And it works well for the first ten items and item 20, but it won't open 11-19.
       
      I checked the shortcodes and the non-working ones match the working ones (aside from the number and heading). I tried deactivating all plugins and still no dice. Any idea what the issue is?
       
      Thanks!
    • webmktco
      By webmktco+
      I'm hoping I can get some help w/ an accordion.
       
      Go to http://the-handyman-company.myddsweb.com/our-services/handyman-services/and you'll see some spacing issues:
       

       
      Here's the code (i've tried using the pl_raw tags):
      <div class="accordion" id="accordion"> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse1" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Handyman Jobs">Handyman Jobs</a> </div> <div class="accordion-body collapse in" id="collapse1"> <div class="accordion-inner"> <p>Whatever needs to be repaired or installed, an experienced handyman is only a phone call away. Bring us in for any odd jobs you have waiting on your to-do list.</p> <a class="btn btn-default btn-large" title="Handyman Jobs" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/handyman-jobs/">More about Handyman Jobs <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse2" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Drywall">Drywall</a> </div> <div class="accordion-body collapse" id="collapse2"> <div class="accordion-inner"> <p>Call our team to repair any damages to your drywall and give your home a fresh and professional look. We are unmatched experts in drywall installation and repair.</p> <p class="center"><a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/tampa/tampa-drywall-contractors/" title="Tampa Drywall Contractors">Tampa</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/clearwater/drywall-contractors/">Clearwater</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/orlando/drywall-contractors/">Orlando</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/sarasota/drywall-contractors/">Sarasota</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/ft-myers/drywall-contractors/">Ft. Myers</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/melbourne/drywall-contractors/">Melbourne</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/jacksonville/drywall-contractors/">Jacksonville</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse3" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Carpentry">Carpentry</a> </div> <div class="accordion-body collapse" id="collapse3"> <div class="accordion-inner"> <p>When done correctly, carpentry should be able to endure through many years. Our professional work will not disappoint you. Call us for all of your building needs.</p> <p class="center"><a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/tampa/carpenter" title="Tampa Carpenter">Tampa</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/clearwater/carpenter" title="Clearwater Carpenter">Clearwater</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/orlando/carpenter" title="Orlando Carpenter">Orlando</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/sarasota/carpenter" title="Sarasota Carpenter">Sarasota</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/ft-myers/carpenter" title="Ft. Myers Carpenter">Ft. Myers</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/melbourne/carpenter" title="Melbourne Carpenter">Melbourne</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/jacksonville/carpenter" title="Jacksonville Carpenter">Jacksonville</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse4" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Soffit / Fascia">Soffit / Fascia</a> </div> <div class="accordion-body collapse" id="collapse4"> <div class="accordion-inner"> <p>Structural problems can make your home vulnerable to leaky roofs and unwelcome critters.  For quality you can trust, bring in our expert team to repair and maintain your soffits and fascia.</p> <a class="btn btn-default btn-large" title="Soffit / Fascia" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/soffit-fascia-and-decks/">More about Soffit / Fascia <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div>  <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse5" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Doors &amp; Windows">Doors &amp; Windows</a> </div> <div class="accordion-body collapse" id="collapse5"> <div class="accordion-inner"> <p>Contact us when you need someone to reseal old doors and windows or install new ones. You can cut down on your power bill, bring extra sunlight into a dark room, or just give your home a new look.</p> <a class="btn btn-default btn-large" title="Doors &amp; Windows" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/doors-and-windows/">More about Doors &amp; Windows <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div>   <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse6" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Tile Floors">Tile Floors</a> </div> <div class="accordion-body collapse" id="collapse6"> <div class="accordion-inner"> <p>For a durable and sophisticated look, consider ceramic tiles. Our professional installation will give you a floor that lasts for years to come.</p> <a class="btn btn-default btn-large" title="Tile Floors" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/tile-repair/">More about Tile Floors <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse7" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Painting">Painting</a> </div> <div class="accordion-body collapse" id="collapse7"> <div class="accordion-inner"> <p>Even an older home can be livened up with well-maintained walls and a new coat of paint.</p> <a class="btn btn-default btn-large" title="Painting" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/painting-and-drywall/">More about Painting <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse8" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Fencing">Fencing</a> </div> <div class="accordion-body collapse" id="collapse8"> <div class="accordion-inner"> <p>Whether you want a privacy fence in your backyard, front yard fencing that improves your curb appeal, or just a simple structure that keeps in pets or children, you can trust the quality you receive when we do your fencing.</p> <a class="btn btn-default btn-large" title="Fencing" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/carpentry-and-fencing/">More about Fencing <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse9" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Shelving, Lighting &amp; Fans">Shelving, Lighting &amp; Fans</a> </div> <div class="accordion-body collapse" id="collapse9"> <div class="accordion-inner"> <p>Your bedroom, family room, or home office has a lot of potential, and we can turn your vision into a reality. Contact us about installing ceiling fans, shelves, or assembling new furniture and equipment.</p> <a class="btn btn-default btn-large" title="Shelving, Lighting &amp; Fans" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/lighting-and-fans/">More about Shelving, Lighting &amp; Fans <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> </div>
    • jharri74
      By jharri74+
      Hello, is there a way to add a class to an accordion heading? I've read posts that say a unique class is added to each accordion heading of an accordion but I don't see that when i inspect the element in chrome or in firebug. I'm trying to duplicate this (see attached) where each section (eg: main courses) shows the list items and prices of each item within. Here's my current page:
      http://www.jayharry.com/localtemplates/Restaraunt01/full-menu/
       
       
    • h0bd0b1in
      By h0bd0b1in
      I'm fairly new to the whole web design and CSS thing. I dabbled in HTML back in the day (HTML 3 I think) but I'm looking to get back in to it in earnest. I've managed so far to style my site to a certain extent but I've hit a little bit of a snag.
       
      I have accordions embedded within an iTab on one of my pages and, while I've managed to successfully alter the background colours of the toggles and content panes, I'm struggling to alter the colour of the text within the accordion toggles. At the moment, they are using the default base colour for my site, which is what I want links to use in every other regard, but in this instance that colour clashes with the toggles background colour.
       
      I attempted to inject the colour attribute using CSS by referencing the .accordion-toggle class but without success. How would I go about changing this colour?
×