Jump to content
danmanders

Referencing Content Box classes in Custom CSS

Recommended Posts

danmanders    0
danmanders

Hi, I've been unable to correctly reference the classes I've assigned to Content Boxes in the Custom CSS section. I learned how to adjust the individual things I want to modify (padding, margin, alignment, etc.), but all of my edits thus far have been applied site-wide to various sections or headers. Specifically, I'm trying to give the Content Box at the end of this page a negative top margin, to move it closer to the Accordion above it. The class I assigned to that Content Box is "faq". Could you please tell me exactly how to reference it? I know that I can find this information with Firebug, but I've spent the last couple of hours attempting to do so unsuccessfully.

 

You guys market Pagelines as needing no coding knowledge whatsoever to use, which is far from the truth in anything but the simplest cases, but I'm happy to learn as I go. That said, it would be nice if you could just tell me exactly what I need to type in to reference this specific Content Box. Doing so would save me hours of frustration now, and would also give me the knowledge I need to reference other sections that I've assigned classes to. Thanks for all of your help!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello danmanders 

 

what is the code you have tried? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
danmanders    0
danmanders

Hi Martin. I've tried the following, as well as each of the same with ".contentbox" replaced by ".section-contentbox":

 

.contentbox .content-margin .faq {

margin-top: -40px;

}

 

.contentbox .faq .content-margin {

margin-top: -40px;

}

 

.faq .contentbox .content-margin {

margin-top: -40px;

}

 

"faq" is the class I assigned to the Content Box. I didn't use ".content-pad" or ".hentry-pad" because it's my understanding that you can't use negative values for padding. I don't see anything else in Firebug that looks relevant, and I'm stuck. I'm having the same exact problem with specifically targeting a cloned section for a rule, rather than having it apply to all of the sections of that type. I know I can use ".alpha", ".beta", etc. to apply a rule only to certain page templates and that is useful, but it doesn't help when I've got two sections of the same type on the same page. It was suggested in the thread I started yesterday that I use a Content Box to create buttons rather than a cloned Callout section that I needed to hide the text from, and this was successful although the reason I purchased Pagelines was to not need to learn how to write the HTML from scratch for everything. If you could please help me out with these two problems, it would solve over 90% of the issues I'm having. Thanks!

Share this post


Link to post
Share on other sites
danmanders    0
danmanders

Also, I've already read the recommended Pagelines docs on Custom CSS, as well as the w3schools page about id and class selectors, but neither gave me any insight as to how to go about this.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, if .faq is the only instance of that particular contentbox on the site then you can just use the .faq class, you won't need to to add the contentbox class prior.

 

.faq  {

margin-top: -40px;

}

 

If you find that doesn't work you can try using important! to force it

 

.faq  {

margin-top: -40px !important;

}

 

If that still doesn't take you can try using the Page-id to apply the margin to the contentbox on that page only. 

 

.page-id-112 #contentbox {

margin-top: -40px;

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
danmanders    0
danmanders

Thanks James, that was exactly what I needed!

 

Any tips on singling out cloned sections?

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, glad that worked, to single out clones you can use the contentbox class followed by the clone class.

 

Like -

 

.section-contentbox.clone_2{ }

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
danmanders    0
danmanders

Perfect, thank you so much! Now that I understand how the Pagelines-specific part works, I'll have no problem finding the rest of the language I need on w3schools. You guys might consider documenting stuff like this in some sort of quick start guide for people new to CSS. Since you market the platform as something you don't need to know code to use, I'm sure people like me who come into it knowing absolutely nothing would find it very helpful. Thanks again!

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, glad it helped :-)

 

I'll pass your comments on to the core team to review. Thanks


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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

    • chamois_blanc
      By chamois_blanc+
      It would be nice if all the PL5 shortcodes had a css class option to be able to add classes to the element generated by the shortcode. I'm aware it's usually possible to hack a class in by doing something like size="1x <my_class>". But a clean solution would be nice.
    • 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/
       
       
    • TedWada
      By TedWada
      I use DMS 2.1.7 and am having a serious problem.
       
      When I edit a content in the item (ex. iBox), it affects to same item in other template page. For example, if I change a content in the iBox in the template A, the change affects to the iBox in the template B. This occurs not only iBox but iCallout, as well.
       
      Why this happens and how I avoid? Because of this, I cannot create a page.
       
      Thanks,
       
      Ted
    • ebadia
      By ebadia
      Hi to all, I just joined a company and I am the responsible for their websites. we have few and all made with Platform Pro.
      Few days ago, we got an error. We did not change anything so I guess some version issue could be in place...
      In our website we have word press 3.9 and the hosting site uses php 5.5.
      I have been trying and when I change the php to 5.3 in the hosting site the error disappears but with 5.4 and 5.5 we get the error.
       
      Does anyone know why this could be happening?
      We have deactivated the errors so the page seems to be fine but I would like to know if some incompatibility is in place with platform pro and latest php versions.
       
      Error examples:
      Warning: Creating default object from empty value in /home3/clinica/public_html/zivingsabadell.com/wp-content/themes/platformpro/core/library/class.layout.php on line 321
       
      Warning: Creating default object from empty value in /home3/clinica/public_html/zivingsabadell.com/wp-content/themes/platformpro/core/library/class.layout.php on line 321
       
      Warning: Creating default object from empty value in /home3/clinica/public_html/zivingsabadell.com/wp-content/themes/platformpro/core/library/class.options.metapanel.php on line 54
       
      Warning: Creating default object from empty value in /home3/clinica/public_html/zivingsabadell.com/wp-content/themes/platformpro/core/library/class.options.metapanel.php on line 54
       
       
      Thanks!!!
    • rijans
      By rijans
      To change the color of NavBar, I created a custom class GlobalNavigationBarBGColor in styling classes section. and then added the following code in CSS
       
      .GlobalNavigationBarBGColor { background-color: #FF6600; color: #FFF; }   But the color is in a frame! Not in the whole background >> http://postimg.org/image/nbmeicx3f/   Is there anything I missed? Site: techgainer.com (the condition is live right now)
×