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.

Edit the CSS of a specific page

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

In progress Edit the CSS of a specific page

Post by Wealh November 7th 2015, 10:58 am

How can I edit the CSS of a specific page?
Wealh
Wealh
Forumember

Posts : 69
Reputation : 6
Language : English

http://boredom.iftopic.com/

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by SLGray November 7th 2015, 8:52 pm

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51482
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Ange Tuteur November 7th 2015, 11:26 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Wealh November 8th 2015, 7:51 am

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?
Wealh
Wealh
Forumember

Posts : 69
Reputation : 6
Language : English

http://boredom.iftopic.com/

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Ange Tuteur November 8th 2015, 5:07 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Wealh November 9th 2015, 5:45 am

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!
Wealh
Wealh
Forumember

Posts : 69
Reputation : 6
Language : English

http://boredom.iftopic.com/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum