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?

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.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
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 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
Forumaster

Male Posts : 13028
Reputation : 2704
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 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
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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 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
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