Customized Profiles FAQ

Site Admin
admin

Apr 6, 2019, 22:48 pm

How to use Customized Profiles
The most basic usage of custom profiles is to use the + icon (green circle in the upper right of your own profile) to create a custom content div. This custom content div will allow you to use 3 icons (edit CSS, edit text, and remove) to customize your profile. Edit CSS will allow you to put in plain text CSS that will apply to your entire profile page, Edit text will allow you to submit text and BBCode content such as img or b tags, and the Remove button will remove all custom content and CSS from your profile and restore it to default. If you are unfamiliar with writing raw BBCode content, I suggest creating your content in a forum post using the WYSIWIG and smilie editors and then copy pasting that text (including the bracket tags) into your profile content block.

Please note that we have character limits on the text and CSS content that is submitted to keep our servers running smoothly, but those limits are set fairly high so you should be able to include a large amount of content before reaching those upper caps.

Basic CSS Usage

CSS is a markup language used to style things on the inter-webs to make them look pretty. In this section, I'll cover basic concepts of how to use CSS, but this is by no means a comprehensive guide to all the powerful and cool things CSS can do.

CSS is broken in 3 main parts, a target (what you are trying to style), a function (what you want that style to do) and a value (what you want that style to specifically be). For example, in the following example, the #div-1 is the target, the function is background, and the value is green which will turn the target div into a green background color.

Code: Select all

#div-1{ background: green; } #wrap{ width: 100%; } .page-body{ color: white; }
The formatting of that is important, as CSS will not work without those colons, semi-colons, and curly brackets (in those spots respective to each of the 3 pieces).

Targeting can be broken into 3 main categories, by ID (# in front of the id value), by class (. in front of the class value), and tag. An example of an id target might be #modal, an example of a class target might be .user-profile-about, and an example of a tag target might be p .

Functions can be used for all kinds of things, some good ones to start with would be background (background color), color (text color), border (border styles), font-size (text size), border-radius and padding or margin. Each function expects a different kind of a value, but they can easily be googled for more information.

Values are typically self-explanatory simple text like blue or yellow, but can get more complex with hex color codes or things like 5px dotted red (a 5 pixel border line that is dashed and colored red). When you find which function you want to use, try googling allowed values for that function as each one has a specific set of expected values.

Restricted CSS Tags/Functions

In this wondrous age of technology, a dark world of mean spirited people does exist. Because of this, Lasria cannot allow *all* CSS functions on the customizable profiles of it's users. The restricted functions are typically blacklisted because they can be used to hack, abuse, or otherwise compromise the security of the site or it's users, not because we want to dampen the fun. At the risk of getting too technical, the restricted terms are as follows (this list is not comprehensive, we have a separate list of blacklisted backend terms that will also not submit and return an error if attempted).
  • expression
  • keyframes
  • </
  • behavior
  • moz-binding
  • o-link
  • content (I would allow pseudo elements if it was safe...but its not)
  • script
  • @import
  • <?
  • url
  • [href=]
Additionally, certain elements of the site cannot be targeted as they will impact other user's visiting your profile to a degree that is considered dangerous. Specifically, attempting to hide or subvert our navigation menu bar is considered too detrimental to the overall experience of users on the site for us to allow it. However, you are still able to style the overall structure of your profile for a majority of elements on that page.

If you are receiving errors for blacklisted profile content and think that you are not intentionally submitting malicious content, feel free to reach out on this thread to obtain more information/details.
Ten percent of nothin' is... let me do the math here... nothin' into nothin'... carry the nothin'...
Site Admin
admin

Apr 6, 2019, 23:57 pm

For some example CSS, I have included the current styling for my profile below. This swaps everything from white theme to black, and also takes out some of the edges on the forum and stretches the overall width to full. It also creates a polkadot textured bg with radial gradients. This is of course just sample code and we strongly encourage you to go try your own styling code out (maybe try a sunset style radient gradient?), but if you're wondering about what can (and cannot) be done with profile stylings, this is just one example of allowed CSS.

Code: Select all

html{background:#000;background-image:radial-gradient(white 5%, transparent 0),radial-gradient(white 3%, transparent 0);background-size: 40px 40px;background-position: 0 0, 20px 15px;}body{background:#000;background-image:radial-gradient(white 5%, transparent 0),radial-gradient(white 3%, transparent 0);background-size: 40px 40px;background-position: 0 0, 20px 15px;}#div-1{background:#333;color:#fff;box-shadow:none;}#div-1 .divdisplay{font-size:1.5em; line-height: 1.5em;}.user-profile-about{display:none;}.user-profile-leftside svg{color:white;}.user-profile-leftside{background:none;color:#fff;}#wrap{width:100%;border: none;margin-top:0;}#page-body{background:none;}.profile-info .inner{background:#000;background-image:radial-gradient(white 5%, transparent 0),radial-gradient(white 3%, transparent 0);background-size: 40px 40px;background-position: 0 0, 20px 15px;}.comment-text-box{background:#000;color:#fff;}.user-profile-friends{background:#333;color:#fff;}.user-profile-friends a{color:#fff;}.white-bg{background:#333; color:#fff;}textarea{background:#333;color:#fff}#page-footer{background:none;}#page-footer a{color:#fff}.user-profile-stats dl.details dd{background:#333;}.lightbg-bg{background:#333;}.lightbg-bg:hover{background:#222;}.global_avatar{display:none;}.account-links{display: none;}
Ten percent of nothin' is... let me do the math here... nothin' into nothin'... carry the nothin'...
kodragoshi

Apr 14, 2019, 16:08 pm

1. Neat!
2. But no keyframes :lmao:
3. I suggest making a whitelist of editable classes and property ranges vs a blacklist. for example, this is bad:

Code: Select all

body {opacity: 0;}