Jump to content


This topic is now archived and is closed to further replies.


Adding code through the "Styling Classes" field

Recommended Posts


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.mosaicearth.com/discussions/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.



Share this post

Link to post
Share on other sites
James B

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.

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

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?

Share this post

Link to post
Share on other sites

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:




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

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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. 

Share this post

Link to post
Share on other sites

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:




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

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • bross51
      By bross51
      I was able to hide the metabar on the single post pages thanks to the included shortcodes however there are no shortcodes to hide the metabar on the remaining pages.  How can this be done?
      Thanks for the help.
    • seanocaside21
      By seanocaside21+
      Hi Guys,
      I am using category page to display all posts from a single category. However each post has a child category that separates each post into individual categories, in this case by county.
      Basically i am wondering is it possible to hide the parent category from the meta bar and just show the child?
    • sethoof
      By sethoof
      I am trying to post research paper abstracts for a client and have created a custom post type for doing so using Custom Post Type UI plugin. But I do not know how to customize the pagelines metabar in these posts to remove the date and comment link.  Ideally, I would replace these with some of the custom metadata (paper-author, paper-topic), but if that is not easy to do with custom css, I can just remove the metabar all together and put the info into the post content.
      This is the code I want to change as identified by firebug.
      <div class="metabar">
      Posted <time class="date time published updated sc" datetime="2014-04-18T07:30:14+00:00">April 18, 2014</time> · <span class="post-comments sc"> <a href="http://cidrzfoundation.flywheelsites.com/paper/zambian-womens-attitudes-toward-mass-nevirapine-therapy-to-prevent-perinatal-transmission-of-hiv/#comments">Add Comment</a> </span> </div>   Thanks in advance for any help!
    • rijans
      By rijans
      Why author link in metabar points to home site link? It should point to mysite.com/author/alex   ... right? but it is pointing to home page mysite.com . How do I solve this problem?
    • tiltcreative
      By tiltcreative
      Hi, I have figured out how to hide the full metabar, and the author and categories using css, but I would like to keep the date. But now I have some other bits of text in there that I don't want, which means I probably have to edit a php file in a child theme instead, to get rid of the rest of it.  (it now says "By On 
      November 20, 2013 · · In [EDIT]")
      How would I go about doing this? I just want the post title with the date underneath. I don't know which file to edit.
      thanks for your help!