Jump to content


Photo
- - - - -

Adding code through the "Styling Classes" field

metabar styling classes css modifications

Best Answer Danny , 09 February 2014 - 01:23 PM

I provided a link in my previous and also explained how to use the Styling classes field.

 

All you need to do is add some custom CSS like you have with :

 

.ibox1 {color:#66BCD9;}

 

Then add that custom CSS class name to the styling classes field for example:

 

ibox1

 

That will give the section the class of ibox1 and styling it with the custom CSS associated to that class.

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 massmosaic

massmosaic

    Advanced Member

  • Members

  • 65 posts
  • Country: Country Flag

Posted 10 January 2014 - 04:05 AM

Hi Pagelines staff,

 

I believe I'm misunderstanding or misusing the "styling classes" field on the front-end editor... 

 

I'm looking to remove the author username and "add comments" from my forum pages. Here's the url: http://rad.mosaicear...ions/community/

 

I've found the correct class via firebug, and tried the following code on the custom frontend code editor, which works:

.post-meta .metabar {display: none;}

 

However this removes this metabar across all pages of the site. I would like to keep it in the posts of the site, and only want to remove on the forum pages....

 

So I went to the "Section Options: Type" and "Section Options: Local" areas of this page and added this code into the styling classes box... but nothing is removed.

 

Is this the correct use of the "styling classes" field??  If not, what is this area used for?? Also, I assume that "section options: type" will apply changes to that custom post type (bbpress pages) but am not sure.  I checked the Pagelines documentation and don't see any information on the Styling Classes field.  Any advise or references here is much appreciated.

 

Thank you.

 

 

Attached Files



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2014 - 08:16 AM

Hi there,

 

The styling classes field is used to assign your own class to a section. For example if you are using boxes multiple times on the page, and you just want to affect one set of boxes you can put 'mybox1' in the styling class field for that box set. Then any css you use in the css/less editor you'd use that class .mybox1 to just affect that box set.

 

.mybox1 {background: #000000;}

 

That would make that box set black, and not affect any of the other box sets.

 

To hide the meta bar on forum pages only, you'd use the code you have found already, but prefix it with the class for the forum pages. Look in firebug at one of the forum pages, at the top of the html you'll see various classes for the page, one will relate to the forum.

 

.forum or .single-forum

 

Apply that class ahead of your code to just affect the forum pages.

 

.forum .post-meta .metabar {display: none;}

 

Hope that helps, have a good weekend.



#3 MWalsh

MWalsh

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 08 February 2014 - 11:01 PM

I tried doing this and it worked for something but others it did not. 

 

Example: I did it for ibox 

 

Put ibox1 in style classes then I put .locationbox {color:#66BCD9;} in custom and it worked fine.

 

Then I .locationbox-text h4 {display:none;} in the custom and nothing happened?

 

Why does it not work unless the ibox is universal?



#4 Danny

Danny

    Is Awesome!

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

Posted 09 February 2014 - 11:39 AM

Not sure how you managed to get ibox1 in the styling classes field and then add .locationbox {color:#66BCD9;}  to your custom tab, that shouldn't work, as the ibox1 class name doesn't have any association to .locationbox {color:#66BCD9;}.

 

Basically, what you do is, add some custom CSS for example:

 

.my-blue-bg { background-color: #428BCA; color white; }

 

Then you go to a section and add the class name of the CSS you just added to the Styling Classes field for example:

 

my-blue-bg

 

You do not add the period (.) at the beginning, just the name and click save. You can find more information here - http://docs.pageline...on-area-styling



#5 MWalsh

MWalsh

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 09 February 2014 - 01:14 PM

Oops I totally typed that wrong I did not add .locationbox {color:#66BCD9;}. I added .ibox1 {color:#66BCD9;}. That was a typo on this end not in my coding I had two different boxes but neither have worked. I ended buying page less and it did the trick for now. would love to figure out this class thing but right now I am just using page less and moving on from it. 



#6 Danny

Danny

    Is Awesome!

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

Posted 09 February 2014 - 01:23 PM   Best Answer

I provided a link in my previous and also explained how to use the Styling classes field.

 

All you need to do is add some custom CSS like you have with :

 

.ibox1 {color:#66BCD9;}

 

Then add that custom CSS class name to the styling classes field for example:

 

ibox1

 

That will give the section the class of ibox1 and styling it with the custom CSS associated to that class.







Also tagged with one or more of these keywords: metabar, styling classes, css modifications