WordPress.org

Forums

[resolved] change css for a specific page (6 posts)

  1. ripan
    Member
    Posted 11 months ago #

    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.

  2. RossMitchell
    Member
    Posted 11 months ago #

    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

  3. ripan
    Member
    Posted 11 months ago #

    accually I want to implement it on a wordpress theme.

  4. alchymyth
    Forum Moderator
    Posted 11 months ago #

    '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.

  5. ripan
    Member
    Posted 11 months ago #

    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 ?

  6. RossMitchell
    Member
    Posted 11 months ago #

    @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; }

Reply

You must log in to post.

About this Topic

Tags