Home
by Wealh Sat 7 Nov - 10:58How can I edit the CSS of a specific page?
3 posters
Edit the CSS of a specific page
Wealh- Forumember
- Posts : 69
Reputation : 6
Language : English
SLGray- Administrator
Posts : 51554
Reputation : 3523
Language : English
Location : United States
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.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania
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 :
Then you can use CSS to specifically modify the user profile elements :
The class is added to the
tag so you can select any element inside it with the specific class.
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
|
Wealh- Forumember
- Posts : 69
Reputation : 6
Language : English
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 thetag so you can select any element inside it with the specific class.
- Code:
<body>
What if I want to edit this page: http://boredom.iftopic.com/f2-websites ?
How can I edit something on the topic pages only?
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania
If it's for all forum pages you can do this :
If it's for that page only, you can do this instead :
- 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';
}
});
Wealh- Forumember
- Posts : 69
Reputation : 6
Language : English
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 :
The number "2" is the forum ID.
- Code:
$(function() {
if (/\/f2(?:-|p\d+-)websites/.test(window.location.href)) {
document.body.className += ' forum-page-websites';
}
});
Awesome, thanks!