WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] change css for a specific page

[Resolved] change css for a specific page

  • ripan
    Member

    @ripan

    I have a wordpress page. there have showing counter increment by decimal type. as like-
    1. Website Tutorials
    1.1 HTML
    1.2 CSS
    1.3 PHP
    2. Programing Tutorials
    2.1 C programing.
    2.2 Python programing.

    But I need as like below only for 1 specific page-
    1. Website Tutorials
    A. HTML
    B. CSS
    C. PHP
    2. Programing Tutorials
    A. C programing.
    B. Python programing.
    Now what can i do for these.

Viewing 5 replies - 1 through 5 (of 5 total)
  • RossMitchell
    Participant

    @rossmitchell

    It would help us help you if you included a link to your website.

    Speaking in generalities, suggest that you readup on the css info on ordered-lists, you will have to nest your lists:
    http://www.w3schools.com/css/css_list.asp

    Examples: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

    ripan
    Member

    @ripan

    accually I want to implement it on a wordpress theme.

    Michael
    Forum Moderator

    @alchymyth

    ‘for a specific page’ – if your theme uses body_class(), then each page should have ist unique CSS class which you can use in your formatting.

    you seem to be using nested ordered list html tags;
    for general formatting of html lists, see http://www.w3schools.com/css/css_list.asp

    example:

    ol { list-style-type: decimal; }
    ol ol { list-style-type: upper-alpha; }

    depending on your theme, you might need to use more specific CSS selectors.

    ripan
    Member

    @ripan

    This is on my theme style.css :
    .entry ol li { list-style-type: decimal }
    .entry ol li ol li { list-style-type: decimal }
    /** Make ordered lists increment correctly (1., 1.1, 1.1.1, etc).
    * Source: http://www.student.oulu.fi/~laurirai/muuta/koulujutut/kalifornia.html
    */
    .entry ol { counter-reset: chapter; list-style-type: none; }
    .entry ol li, .entry ol li ol li { list-style: none }
    .entry ol li:before { content: counters(chapter,”.”) “. “; counter-increment: chapter; display: marker; }

    How I use a seperate css for a specific page where I wants to use it ?

    RossMitchell
    Participant

    @rossmitchell

    @ripan: several of your examples are missing the ; character.

    How I use a seperate css for a specific page where I wants to use it ?

    Using a browser inspector like firebug, I look at the page I want to customise, in the “body” tag is a class which is specific to just this page, say it is “page-37”, then I could customise the css and target just this page with:

    .page-37 .entry ol li ol li { list-style-type: upper-alpha; }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] change css for a specific page’ is closed to new replies.