FANDOM


Wiki-wordmark The following content has been marked as outdated. Please keep in mind that the information may not be accurate, or consider updating it.

CSS (Cascading Style Sheet) is a coding language used to add color and creativity to a user page or a villager page. This can be edited from the "Edit Profile" and "Edit Villager" pages in its own input box.

CSS Rules

For a more complete set of rules for what can and cannot be done with CSS, refer to the stickied CSS Rules Clarification post.

Don't tamper with the site's navigation or game components.

Do not use the CSS functions to: change the game information shown on your profile or villager's profile, overlay a fake image over your villager as if a Paintie were accepted with that image, hide or obscure game info or text or otherwise make the page unduly difficult to navigate. The latter includes but is not limited to, upside down text, quickly spinning or bouncing images, backgrounds that are too similar to the text colour, and animated or high-contrast backgrounds.

CSS Guide

All lines of code that can be inputted follow the same basic outline.

class {property:value; }

for example, a:link {color:red; } would change all links on the userpage to be red. Multiple properties can be changed with a single tag, as long as it falls under the same class and is separated by a semicolon. for example, a:link {color:red; font-size:10px; } would result in all links being red and 10 pixels in size.

Classes

General User Page Villager Page
.content .right-column

.widget

.widget-header

.widget-header h3

.widget-content

a:link

a:hover

a:visited

.pull-right

.btn

.counter

.fa

.fa-envelope-square

.fa-user-plus

.fa-shopping-cart

.fa-paw

.fa-reply-all

.fa-quote-left

.fa-user-times

.fa-times-circle

p:first child

.content p

.text-center

.villager-avatar

.user-info

.user-info h4

.user-info p

.content .left-column

.margin-10px (area above content)

.content h1

.user-data

.user-data .village-shield

.col-xs-9

.col-xs-7

.user-links

.col-xs-5

h4, .h4

.user-data .user-desc

.content h3

.content h2

.villagers-list

.villagers-list li

.villager-avatar

.villager-name

.textarea

.user-comments

.user-comments .user-avatar-wrapper

.user-comments .user-comment

.user-comments .user-comment .footer

.user-comments .user-comment .footer a

.content .left-column

.margin-10px (area above content)

.breadcrumbs

.breadcrumbs li

.content h1

.villager-data-wrapper (Where the hills bg is)

.villager-data

.villager-data-avatar

.villager-data-minipet

.label

.label-success

.villager-data-info

.villager-data-info-box:nth-child(2n+2)

.villager-data-desc

.content h3

.content h2

.textarea

.btn.medium

small, .small

.user-comments

.user-comments .user-avatar-wrapper

.villager-avatar

.user-comments .user-comment

.user-comments .user-comment .footer

.user-comments .user-comment .footer a

.label-primary

.label-warning

.label-success

Properties and their Values

Main Secondary (optional) Values
background: -color: -image: -position: -repeat:- hex#; RGB; url(image url); none; float; fixed;
text: -align: -shadow: -decoration: center; left; right; justify; none; horizontal_shadow_position vertical_shadow_position color; underline; overline; line-through;
color: ((for text color)) hex#; RGB;
font: -family: -size: -style: -weight: -decoration: px; normal; italic; oblique; bold; bolder; lighter; 100-900;
border/outline: -style: -width: -color: -top: -right: -bottom: -left: -radius: solid; dotted; dashed; double; groove; ridge; inset; outset; none; px; %;
margin: -top: -right: -left: -bottom: px; %;
padding: -top: -right: -left: -bottom: px; %;
height/width: max- min- px; %;
z-index: ((property layering, Set to 0 first!)) numerical value;
opacity: ((translucency)) 0-1; %;
overflow: ((only if using min/max-height or width)) visible; hidden; scroll; auto;
box-shadow: ((shadow or glow for an area)) none; horizontal_shadow_position vertical_shadow_position blur spread color;
line-height: ((how tall a line is)) px; %;
letter-spacing: ((space between letters)) px;

Notes

  • Currently we are unable to create new divs. This means it is impossible to add music, drop shadows, and anything else that would require a new element to be added to the code.
  • Currently img filters do not work.
  • Currently gradients do not work.
  • You have to use the right class to make your changes show up.

Resources

Find a color hex code - http://randomcolorcode.com

View options for CSS fonts - http://www.cssfontstack.com/

Upload images for use as backgrounds - http://imgur.com

Test your code and learn more about CSS and other languages - http://www.w3schools.com

Commissions

This page is a guide on how to use CSS to style your profile. However, if you are unable to figure it out or you would like someone else to do it for you, you can always commission a coder. To get a profile styled for you, you can find one on our wiki's Forum or on the official Furvilla forums. Please be as detailed as possible when describing what you are looking for, be patient with your coder, and be fair when discussing pricing.