Jump to content

- - - - -

How To Create Custom Code For Each Page, Content By Firebug

Cutom code;Firebug CSS; Specific area;

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 texasx



  • Members
  • 26 posts

Posted 14 November 2012 - 09:53 PM

I've just read the "Css for content - on per page basis" and would like to have more detailed info about how to create a custom code for a certain widget, box, side column or a text area on a single page. I'm familiar with Firebug and are able to find the CSS code for the specific area to customize. I've also understood I need to specify the page (which I find in Source).

On my home page I have two side columns. I would like to customize the padding in a textwidget in the right one. Both side columns are nammed: <div class="scolumn-pad">

1. How do I find the right identity for this one and how much from the <div class string> should i copy and paste into the custom code? Any rule?
2. When using the inspection tool I can see that there are several places / areas where I can chose to put the extra padding. For example also in: <div class="widget-pad">. Any guidelines what's most preferred?

Another example:
3. For the box in the top of content I would like to customize the padding to alighn with the rest.
The CSS code i would like to ad: element.style { padding-left: 10px; width: 906px; }

I understand that I need to ad code about which "element.style" I would like to customize.
Here is the div info: <div class="grid-element pp1 img_grid pplast" style="padding-left: 10px; width: 906px;">
Is there any rules or guide lines for this type of exersize?

Kind regards / texasx

#2 James B†

James B


  • DMS Subscriber†
  • 5126 posts

Posted 15 November 2012 - 12:01 AM

Hi there, in order to use page specific css simple add .page-id-x in front of the css you want it to apply to. Replace x with the id number of the page.

1) If you use the css inspector tool in firebug and click on the class name in the html, the css selector will appear in the right hand menu. So for <div class="scolumn-pad"> you'll get a selector of .scolumn-pad

2) There are no preferences you can adjust each div/layer as you wish. It depends what you're trying to achieve on the section you're working on. We'd usually aim for the main class or id area first. Eg .mcolumn-pad {padding-top:20px;}

3)If you click on the html line you've pasted above you'll see the css selector appear in the right hand column. It will be something to the effect of .pp1

The best rules and guidelines we can advise for learning css is to visit

Please Login or Register to see this Hidden Content

If you haven't seen this already check out the video here on pagelines and firebug, its based on an older theme, but the process of finding the correct selectors is the same

Please Login or Register to see this Hidden Content

#3 texasx



  • Members
  • 26 posts

Posted 15 November 2012 - 07:51 AM

This helped and with a little trial and error I feel I will get on top of it.
Thanks James

#4 Danny


    Is Awesome!

  • Moderators
  • 19793 posts

Posted 15 November 2012 - 08:35 AM

The topic was marked as resolved.