Edit the CSS of a specific page Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Edit the CSS of a specific page

    Wealh
    Wealh
    Wealh
    Forumember


    Posts : 69
    Reputation : 6
    Language : English
    • Post n°1

    In progress Edit the CSS of a specific page

    Post by Wealh Sat 7 Nov - 10:58

    How can I edit the CSS of a specific page?
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51499
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°2

    In progress Re: Edit the CSS of a specific page

    Post by SLGray Sat 7 Nov - 20:52

    By getting the CSS selectors for that page.  The only thing is some selectors on one page could be the same selectors on other pages.  I would say the best way to modify a certain page is by modifying the templates for that page.



    Edit the CSS of a specific page Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°3

    In progress Re: Edit the CSS of a specific page

    Post by Ange Tuteur Sat 7 Nov - 23:26

    Using the templates would be an ideal way, since it would require little JavaScript. However, if that's not possible, you can use JavaScript to add a class to the body for a specific page.

    For example :

    Add this script in all the pages :
    Code:
    $(function() {
      if (/\/u\d+/.test(window.location.href)) {
        document.body.className += ' user-profile';
      }
    });

    Then you can use CSS to specifically modify the user profile elements :
    Code:
    .user-profile {
      background:#900;
    }

    The class is added to the
    Code:
    <body>
    tag so you can select any element inside it with the specific class.
    • Back to top
    Wealh
    Wealh
    Wealh
    Forumember


    Posts : 69
    Reputation : 6
    Language : English
    • Post n°4

    In progress Re: Edit the CSS of a specific page

    Post by Wealh Sun 8 Nov - 7:51

    Ange Tuteur wrote:Using the templates would be an ideal way, since it would require little JavaScript. However, if that's not possible, you can use JavaScript to add a class to the body for a specific page.

    For example :

    Add this script in all the pages :
    Code:
    $(function() {
      if (/\/u\d+/.test(window.location.href)) {
        document.body.className += ' user-profile';
      }
    });

    Then you can use CSS to specifically modify the user profile elements :
    Code:
    .user-profile {
      background:#900;
    }

    The class is added to the
    Code:
    <body>
    tag so you can select any element inside it with the specific class.

    What if I want to edit this page: http://boredom.iftopic.com/f2-websites ?

    How can I edit something on the topic pages only?
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°5

    In progress Re: Edit the CSS of a specific page

    Post by Ange Tuteur Sun 8 Nov - 17:07

    If it's for all forum pages you can do this :
    Code:
    $(function() {
      if (/\/f\d+/.test(window.location.href)) {
        document.body.className += ' forum-page';
      }
    });

    If it's for that page only, you can do this instead :
    Code:
    $(function() {
      if (/\/f2(?:-|p\d+-)websites/.test(window.location.href)) {
        document.body.className += ' forum-page-websites';
      }
    });
    The number "2" is the forum ID.
    • Back to top
    Wealh
    Wealh
    Wealh
    Forumember


    Posts : 69
    Reputation : 6
    Language : English
    • Post n°6

    In progress Re: Edit the CSS of a specific page

    Post by Wealh Mon 9 Nov - 5:45

    Ange Tuteur wrote:If it's for all forum pages you can do this :
    Code:
    $(function() {
      if (/\/f\d+/.test(window.location.href)) {
        document.body.className += ' forum-page';
      }
    });

    If it's for that page only, you can do this instead :
    Code:
    $(function() {
      if (/\/f2(?:-|p\d+-)websites/.test(window.location.href)) {
        document.body.className += ' forum-page-websites';
      }
    });
    The number "2" is the forum ID.

    Awesome, thanks!
    • Back to top