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

Unmaintained Enable users to specify a custom CSS file

Give your users the possibility to personalize your site with custom CSS files.

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

    Read more about this resource...
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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 likes this.
  3. bubbl3

    bubbl3 Active Member

    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 :)
     
  4. DRE

    DRE Well-Known Member

    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.
     
    0xym0r0n and bubbl3 like this.
  5. bubbl3

    bubbl3 Active Member

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

    DRE Well-Known Member

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

    DRE Well-Known Member

    Things to keep in mind from Frequently Asked Questions

     
    bubbl3 likes this.
  8. bubbl3

    bubbl3 Active Member

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

    DRE Well-Known Member

    I experienced that when I created Member's Only Avatars for my site lol.
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    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:
     
    0xym0r0n, 8thos and bubbl3 like this.
  11. DRE

    DRE Well-Known Member

  12. DRE

    DRE Well-Known Member

    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?
     
  13. DRE

    DRE Well-Known Member

  14. DRE

    DRE Well-Known Member

    Not working for me. Can you upload a sample css file or show a sample css file please?
     
  15. bubbl3

    bubbl3 Active Member

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

    DRE Well-Known Member

  17. bubbl3

    bubbl3 Active Member

    well i'll try and play with it :)
     
  18. bubbl3

    bubbl3 Active Member

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

    bubbl3 Active Member

    8thos likes this.
  20. DRE

    DRE Well-Known Member

    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.
     
    bubbl3 likes this.

Share This Page