Resource icon

Enable users to specify a custom CSS file

Overview Updates (1) Reviews (2) Discussion
bubbl3

bubbl3

Active member
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...
Click to expand...

Read more about this resource...
 
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!
 
Chris Deeming said:
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!
Click to expand...
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 :)
 
8thos said:
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.
Click to expand...
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.
 
bubbl3 said:
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.
Click to expand...
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.
 
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>.
Click to expand...
 
bubbl3 said:
Yes I know, I met this problem, was using $user instead of $visitor in the PAGE_CONTAINER template and went crazy for a while :D
Click to expand...
I experienced that when I created Member's Only Avatars for my site lol.
 
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:
 
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?
 
Not working for me. Can you upload a sample css file or show a sample css file please?
 
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.
 
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>
 
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.
 
You must log in or register to reply here.
Top Bottom