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 November 7th 2015, 10:58 am

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 38766
Reputation : 2606
Language : English
Location : United States

http://classifiedads.forumotion.com/

Back to top Go down

In progress Re: Edit the CSS of a specific page

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

Male Posts : 13153
Reputation : 2843
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

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

Male Posts : 13153
Reputation : 2843
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Edit the CSS of a specific page

Post by Wealh on 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!
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