Archived

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

  • 0

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


Question

Posted · Report post

Dear,

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

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

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 http://www.w3schools.com/css/

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 http://www.pagelines.com/docs/customization-tips

Share this post


Link to post
Share on other sites

Posted · Report post

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

Thanks James

Super

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites