• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Enable users to specify a custom CSS file

bubbl3

Active member
#1
bubbl3 submitted a new resource:

Enable users to specify a custom CSS file (version 1.0) - Give your users the possibility to personalize your site with custom CSS files.

On my site several advanced users found the need to customize the look and feel using personal CSS settings trough browser addons.

The idea came to mind to enable them to use custom CSS files without the need of browser addons, it seems it was easier then what I imagined.

What I did was:
  • Create a custom user field that show under Preferences and expects the value to be an URL (I called it Custom CSS with ID user_css).
  • In the PAGE_CONTAINER template immediately...
Read more about this resource...
 

Chris D

XenForo developer
Staff member
#2
This is great. Good work.

We kind of do something similar over at http://www.valvetime.net to allow users to specify Fixed or Fluid width while browsing, but that loads a CSS file that we specify.

This is very flexible for the end user - well done!
 

bubbl3

Active member
#3
This is great. Good work.

We kind of do something similar over at http://www.valvetime.net to allow users to specify Fixed or Fluid width while browsing, but that loads a CSS file that we specify.

This is very flexible for the end user - well done!
Thanks! I'm actually going to run a CSS competition on my site and probably will expand this with a drop down menu in user preferences with the winner styles :)
 

DRE

Well-known member
#4

bubbl3

Active member
#5
This would be great if the member's custom CSS can be shown to the public on their profile page.

We'd pretty much have the equivalent of customizable profile pages like on vB4, Twitter, Tumblr and Myspace.
Shouldn't be too hard, since we have the CSS url in a variable, not sure it can be done without an addon, I'll give it a go when I have a couple of free hours.
 

DRE

Well-known member
#6
Shouldn't be too hard, since we have the CSS url in a variable, not sure it can be done without an addon, I'll give it a go when I have a couple of free hours.
Sounds really awesome man. Too bad most average members won't know wtf CSS is. lmaooooo so I would probably have to create some pre-set css file links for them to use with a sample so they can choose from a list.
 

DRE

Well-known member
#7
Things to keep in mind from Frequently Asked Questions

Brogan said:
Depending on the template being worked with, you may need to use $user instead of $visitor; $visitor is always the record for the current logged in user, $user is the record being processed (e.g. message author, member list, list of online users, etc.).

When working with the PAGE_CONTAINER template, you can pass variables from the view templates (category_view, forum_view, thread_view, etc.) using xen:container. The same applies to any templates which are included in the PAGE_CONTAINER template; the header or ad_header templates for example.
To use the $forum.node_id variable for example, you would add this to the PAGE_CONTAINER template: <xen:container var="$forumId">{$forum.node_id}</xen:container>.
Similarly for the $threadId variable, you would add this: <xen:container var="$threadId">{$thread.thread_id}</xen:container>.
 

Chris D

XenForo developer
Staff member
#10
It's one of those mistakes you only make once.

Just as I was about to release my "Display Age in User Profile" add-on I realised that the age was coming from $visitor instead of $user.

I thought "dafuq, everyone is 26 years old on my test board?" then it dawned on me :unsure:
 

DRE

Well-known member
#12
Okay I'm having a brain fart but how do you upload a custom css file? Like what's a free service that will let you do that?
 

bubbl3

Active member
#15
Lots of users are using it on my site as of now, also i can't really give you a css, it's for my theme and it heavily customized. anyway they are using dropbox to host the css files. Some people is very creative and even changing the logo and such.
 

bubbl3

Active member
#18
Found a fast way to do it 8thos.

At the top of the member_view template add this line:
Code:
<xen:if is="{$user.customFields.user_css}"><style>@import url('{$user.customFields.user_css}')</style></xen:if>
This will call the CSS (if defined) of the user which profile you are visiting.

Calling a CSS in the HTML body is not W3C standard, but works with all modern browsers, also this will overwrite any eventual CSS property the VISITOR user has.

If you want to restrict profile page personalization to certain groups, use something like this:
Code:
<xen:if is="{$user.customFields.user_css}"><xen:if is="{xen:helper ismemberof, $user, 3, 4, 5, 20, 78}"><style>@import url('{$user.customFields.user_css}')</style></xen:if></xen:if>
 

DRE

Well-known member
#20
THANKS. I've been going nuts trying to figure out how to create predefined backgrounds using this code and a userfield drop down box in preferences but it isn't working.

Code:
<xen:if is="{$user.customFields.profilebg} == 'yes'"><style><xen:require css="profilebg.css" /></style></xen:if>
^^^That works, but trying to change a css template by using a {$user.customFields.profilecss} kind of custom user field isn't working.