Jump to content


Photo
- - - - -

Referencing Content Box classes in Custom CSS

contentbox class

Best Answer James B , 03 July 2013 - 08:31 PM

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;

}

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 danmanders

danmanders

    Member

  • Members

  • 23 posts
  • LocationPhiladelphia
  • Country: Country Flag

Posted 03 July 2013 - 11:38 AM

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

Please Login or Register to see this Hidden Content

 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!



#2 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 03 July 2013 - 05:46 PM

Hello danmanders 

 

what is the code you have tried? 



#3 danmanders

danmanders

    Member

  • Members

  • 23 posts
  • LocationPhiladelphia
  • Country: Country Flag

Posted 03 July 2013 - 07:13 PM

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!



#4 danmanders

danmanders

    Member

  • Members

  • 23 posts
  • LocationPhiladelphia
  • Country: Country Flag

Posted 03 July 2013 - 07:18 PM

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.



#5 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 July 2013 - 08:31 PM   Best Answer

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;

}



#6 danmanders

danmanders

    Member

  • Members

  • 23 posts
  • LocationPhiladelphia
  • Country: Country Flag

Posted 03 July 2013 - 08:49 PM

Thanks James, that was exactly what I needed!

 

Any tips on singling out cloned sections?



#7 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 July 2013 - 09:29 PM

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

 

Like -

 

.section-contentbox.clone_2{ }


  • danmanders likes this

#8 danmanders

danmanders

    Member

  • Members

  • 23 posts
  • LocationPhiladelphia
  • Country: Country Flag

Posted 03 July 2013 - 09:41 PM

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!



#9 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 July 2013 - 10:32 PM

Excellent, glad it helped :-)

 

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







Also tagged with one or more of these keywords: contentbox, class