The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Edit the CSS of a specific page

View previous topic View next topic Go down

In progress Edit the CSS of a specific page

Post by Wealh on Sat 7 Nov 2015 - 10:58

How can I edit the CSS of a specific page?
avatar
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 on Sat 7 Nov 2015 - 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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 37985
Reputation : 2561
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Ange Tuteur on Sat 7 Nov 2015 - 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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13065
Reputation : 2737
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Wealh on Sun 8 Nov 2015 - 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?
avatar
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 on Sun 8 Nov 2015 - 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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13065
Reputation : 2737
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Wealh on Mon 9 Nov 2015 - 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!
avatar
Wealh
Forumember

Posts : 69
Reputation : 6
Language : English

http://boredom.iftopic.com/

Back to top Go down

View previous topic View next topic Back to top


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