Log In

CSS Snippets (& misc)

7 Dec 2016, 12:23 pm (Edited 11 Nov 2019, 6:20 pm)
Please do not post here! If you need assistance or need to contact me, post here or message me. Thank you.

Green text generally is either optional or customizable. Read the note!

edit: to clarify, you don't need to credit me for these.

edit: because of the forum wipe, I've remade some old CSS resources here as well. Anything after this post is not mine and should be attributed to the user quoted. Follow their personal terms of use!

Replacing the logo
#logo a, #logo {
     width: 253px;
     height: 140px;

#logo a {
     background: url('IMAGE_URL') no-repeat;
Note: The default logo is 253px by 140px. If your replacement logo is the same size, ignore the green, italicized text. If not, replace "253px" and "140px" with the respective dimensions of your new logo.

Centering the villager list
.villagers-list li {
    float: none;
    display: inline-block;
    width: 19.6%;
.villagers-list {
    text-align: center;
Note: You may need to adjust the width, but 19.6% should allow for the default 5 villagers per line.

Collapsible widgets
.widget {
    max-height: 35px;
    overflow: hidden;
    transition: 3s;
.widget:hover {
    max-height: 1100px; 
Note: The longer the max height, the more smaller widgets will "delay" closing after moving your mouse away and the longer your transition should be (issues with photosensitivity can arise if transitions are too short).

Centering the villager profile
.villager-data-wrapper {
    left: 0;
Note: For some god awful reason, the content of villager profiles is pushed left slightly. I'm talking about the part in grey here. I don't know why it's like that, but if it annoys you as much as it annoys me, here the code to center it again.

Removing advertisements
.adsbygoogle {
    display: none !important;
.text-center.margin-10px {
    background: none !important;
Note: .text-center.margin-10px refers to the top banner ad, and .widget + .text-center refers to the ad in the sidebar.

Changing the outer background
.content {
    width: 100%;
    min-width: 990px;
    padding: 253px 0 256px;
    top: -253px;
    bottom: -256px;
    background: url('IMAGE_URL');
    margin-bottom: 0;
.content > .clearfix {
    width: 990px;
    margin: 0 auto;
    padding: 20px 20px 60px;
    background: #fff;
#logo + :nth-child(2) {
    z-index: 5;
.search-form .input, .user-panel, .search-form + .btn {
    z-index: 1;
    position: absolute;
.content:after {
    display: none;
.content + * {
    margin-top: -509px;
div.top {
    top: -80px;
.bottom {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 60px;
Note: An alternative to other techniques.

While lengthy and possibly a little excessive, this allows you to replace the background without fixing it in place. With other methods (that usually repurpose .content:after or #logo), the background cannot scroll with the content.

Replacing footer images
.logo-small img {
.logo-small {
  width: 110px;
  height: 200px;
  overflow: hidden;
  padding-left: 110px;
  background: url(IMAGE_URL) no-repeat center;
  z-index: 0;
.pets {
  width: 269px;
  overflow: hidden;
  padding-left: 269px;
  background: url(IMAGE_URL);
.social a {
  width: 44px;
  height: 44px;
  display: inline-block;
.social img {
  display: none;
.social a:first-child {
  background: url(FACEBOOK_IMAGE);
.social a:nth-child(2) {
  background: url(TWITTER_IMAGE);
.social a:last-child {
 background: url(TUMBLR_IMAGE);
Note: The small logo is 110x63, the pets are 269x180, and the social media icons are 44x44.

Replacing the village shield
.village-shield img {
   width: 150px;
   height: 150px;
   overflow: hidden;
   padding-left: 150px;
   background: url(IMAGE_URL);
Note: larger shield may be resized or the image changed as long as text with the town name is still visible. These numbers will need to be adjusted if you want to resize things.
jess #7302 | she/her | links

7 Dec 2016, 12:25 pm (Edited 7 Dec 2016, 2:25 pm)
Here's a template for free use if you're having trouble figuring out css, as well as some helpful links to learn more about it!

I'm way better at bbc than I am at css though, so others are welcome to give tidbits here and i'm happy to answer questions about bbc (and a little of css!). The template's currently being used on my profile/villager profiles if you want to see what it looks like :D The document it's on is view only, so if you see any errors or would like to see something added, I can edit the document. Good luck coding and i hope this helps!
jess #7302 | she/her | links
7 Dec 2016, 12:26 pm (Edited 16 Feb 2017, 7:59 pm)
originally posted in wrong section oops

matching profile and villager pages!

it's my old css layout! recently coded a new one that i like better.
all i ask is please give CREDIT (link back to my account) on your profile, please do not claim as your own!

also, here's the semi-transparent background i used on some of the boxes. i think i accidentally got rid of the background image code on some of the villager boxes http://sta.sh/026ue2v4reua

examples of what it looked like on my page

- - -

OH AND i'm happy to answer any questions related to css! if you need any help, feel free to ask! :')

the light blue + hills one
people were asking

.content:after {
background: url(image link here);
position: fixed;
top: 0;
height: 100%;
z-index: -1;

there you go
hope it helps
jess #7302 | she/her | links
7 Dec 2016, 12:27 pm (Edited 7 Dec 2016, 2:28 pm)
Anyone is welcome to use this code to stylize their profiles! The only thing I ask is that if you do, please credit me on your profile. c:

Some preview screenshots: [x] ~ [x] ~ [x]

You can change the background image by replacing the image URL under .content at the beginning. Pattern Vomit has some really cool seamless patterns if you're looking for an image to use.

CSS Code

note from msjanny :
original post had some issues with formatting; I've rehosted the code onto pastebin.

Add the following if you're using it for a villager profile.
.villager-data-info p {
padding: 0px;
jess #7302 | she/her | links
7 Dec 2016, 12:29 pm (Edited 7 Dec 2016, 4:29 pm)
Xynn said:
Examples: Alison, Marlin and Denyx

Feel free to use and edit as much as you like! The "don't change!" parts only apply if you want to keep the general look of the code!
Credit isn't necessary, but it's highly appreciated!

((I honestly have no idea how to work the code myself so if you ask about a specific part of the code I'll probably not be much help ;; ))
This site is a good place to get color codes!
jess #7302 | she/her | links
7 Dec 2016, 2:23 pm (Edited 10 Aug 2017, 9:52 pm)
First Theme + Villager Profile counterpart

Second Theme + Villager Profile counterpart

Space Theme

User Top’s Theme Light and Dark Version

Last theme + Village profile counterpart - this was my last personal profile I think

Unused “Polaroid” Snippet for villagers
jess #7302 | she/her | links
7 Dec 2016, 2:24 pm (Edited 7 Dec 2016, 2:31 pm)
Akky said:
My profile and villager CSS is also free to use and play around with for anyone who is able to fetch it.

I made a step by step guide for the small career icons on my villagers list.

For anything else:
Find the code yourself! You'll need a little bit of tweaking to match your villager or the amount of text you wrote in your user or villager description. Also be aware that the code might break your profile (including obstruction of the Edit button) if you only copy it partly or play around with it or simply have stuff on your profile I haven't had the chance to include in my CSS yet, like painties or trophies. I'll assume that if you are able to find my code, that you are also able to cope with that. You've been warned. :D

Profile: Akky
Villager: Kei

Of course you are free to stalk my other villagers as well, but there are only very minor differences.


If you do something cool with my code or manage to achieve what I did in a more elegant way, let me know! Also, if you feel like it, credit me. I love credits! ❤
jess #7302 | she/her | links
7 Dec 2016, 2:26 pm (Edited 8 Dec 2016, 9:57 pm)
CSS snippets for your profile, feel free to use and tweak! Requests are welcome, i'll see what i can do!
EDIT: read comments below, apparently not everything is allowed. Use at your own risk, tweak it yourself! I'll tweak the codes myself later to fit the requirements :)

Custom header image



/* Creates a header from the h1 tag (used to say ' viewing name's profile') */
.content h1 {
font-size: 0;
top: 150px;
position: absolute;
width: 700px;
height: 169px;
background: url("700X169 SIZED IMAGE URL HERE");
/* user-data>margin-top makes space for your header */
.user-data {
margin-bottom: 30px;
margin-top: 205px;
border-top: 1px solid #d0d0d0;}

Villager sidebar


This snippet removes 'Profile description' and 'comments' text and creates a sidebar for your villagers to show off. (normally in the center of your profile, aligned next to eachother). To re-add the text just write it in the 'profile description' box again.


.left-column {
border:15px solid white;
background-color: #fff;

.villagers-list {
top: 100px;
position: absolute; !important
height: 500px;
width: 115px;
padding-top: 100px;
padding-left: 7px;

.villagers-list li {
margin-top: -20px;
width: 100px;
margin-right: 10px; !important
position: relative; !important

.content h3 {
color: #37317e;
position: absolute;
left: 25px;
top: 104px;
font-size: 0;
margin: 0 0 20px;
width: 126px;
height: 750px; /* Change the height of the sidebar background */
background: url("http://puu.sh/q7Rh0/e9c740cba7.png&quot;); /* Use this URL to make your own sidebar background, you'll probably have to tweak it to get placement right. */


.villager-name a{

max-width: 565px;


.content h2{

note from msjanny :
"use at your own risk" refers to replacing .content h1 with an image.
According to the CSS rule clarifications, this is allowed.
jess #7302 | she/her | links
7 Dec 2016, 2:29 pm (Edited 8 Dec 2016, 9:58 pm)
Add the following to your profile CSS if you'd like your village shield to bob up and down like the one on my profile c: I tried to make it have more of a bounce to it aha!

.village-shield {animation: bob 0.6s ease-out infinite;}
@keyframes bob {
0% {position: relative; top: -4px;}
30% {position: relative; top: 2px;}
100% {position: relative; top: -4px;}
jess #7302 | she/her | links
7 Dec 2016, 2:30 pm (Edited 8 Dec 2016, 9:58 pm)
I thought this would be an interesting thing to experiment with. If you don't want to full on customize your profile but still want to have some sort of effect on your page, use this code to make your villagers hover like recipes do when you go to click them on career pages.

.villagers-list li {
border: 1px solid #ebebeb;
border-radius: 6px;
margin: 8px 17px;
padding: 5px 0 0;
width: 145px;
transition: 0.3s ease;

.villagers-list li:hover {
border-color: #37317e;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

That will give you this!

It's not exactly the same as the hover on items (it's missing rgba since it doesn't work with box-shadow) but it still looks good so I thought I'd share ^^
jess #7302 | she/her | links
7 Dec 2016, 4:24 pm (Edited 8 Dec 2016, 9:59 pm)
Akky said:

See it in action on my profile: Akky

This code snippet replaces your villager's name and career in the villager list on your profile with small career icons. It will, however, not automatically parse your villager's career and magically compute the image from it. You'll have to specify which career you want to be there for every villager by hand. This means you'll have to do a lot of copy-pasting and it will not show the correct careers anymore if you re-arrange your villager list. If you're prepared for that, read on.

I made the icons a bit larger than on my profile to look good on the standard profile. If you want to use my whole villager list, feel free to copy it directly from source (if you are able to find it). You are also free to use anything else you may find on my profile, see this post for more information on that.

How to use:
This code is divided into three parts.
(1) Code that will get rid of the original text. Copy and paste it.
/* This will get rid of the text, because we want to use those fields for our shields */
.villager-name a, .villager-info {
color: rgba(0,0,0,0);
font-size: 0px

(2) Code that places the shield(s) next to one of your villagers.
You can choose to place between 0 and 2 shields. I just used it for the main career and rarely put more than one shield. But if your villager has more than 2 (main) careers, you'll have to choose.

If your villager has no career, just do nothing.
If your villager has one career, copy the code under 2a).
If your villager has two careers, copy the code under 2a) and 2b).

You should change the number at the very top to the position of your villager in the list and replace the image url where it says to do so. Other than that it's up to you whether you want to use it as is or mess around with positioning a bit more.

Repeat this step for all your villagers. Yeah, as I told you, a lot of copy-pasting.

2a) First Shield.
/* Set the number of your villager in your list here. 1 for the first, 2 for the 2nd,... */
.villagers-list li:nth-child(1) .villager-name {

/* Place the image url of your villager's career here. */
background-image: url('http://www.furvilla.com/img/careers/job-tailor.png');
background-repeat: no-repeat;
background-position: center;

/* Size of the shield. If you want to change it, change all three numbers. */
width: 40px;
height: 40px;
background-size: 40px;

/* Position of the shield */
position: relative;
top: -40px;
left: 100px;

2b) Second Shield
/* Put the same number here as above. */
.villagers-list li:nth-child(1) .villager-info {

/* Place the image url of your villager's second career here. */
background-image: url('http://www.furvilla.com/img/careers/job-crafter.png');
background-repeat: no-repeat;
background-position: center;

/* Size of the shield. If you want to change it, change all three numbers. */
width: 40px;
height: 40px;
background-size: 40px;

/* Position of the shield */
position: relative;
top: -70px;
left: 80px;

(3) Hover animation.
This is what enlarges the shield when you hover over it. Place it below all the other code.
/*-- Hover animation --*/
/* Do always place this at the very bottom. */
.villagers-list li .villager-name:hover, .villagers-list li .villager-info:hover {

/* Size of the shield when hovered. If you want to change it, change all three numbers. */

/* This brings the shield to the front */

/* Move she shield a bit so it's right above the small one */
margin-top: -20px;
margin-left: -15px

Aaaand that's it. I only was able to test on my own profile how it behaves after saving. It looked good on the standard profile of my friend in the inspector, but tell me if anything is unclear or if you run into bugs or trouble or if anything doesn't work as I've told.

Also, if you find a way to extract the redundant code in 2a and 2b that still works after saving and not just in the inspector, please let me know by all means!
jess #7302 | she/her | links
7 Dec 2016, 4:25 pm (Edited 8 Dec 2016, 10:00 pm)
thanks to msjanny for the inspiration

preview with page numbers

note that the scrollbar wont show until you have a few more comments so only use this on villager profiles with lots of comments
jess #7302 | she/her | links
7 Dec 2016, 4:27 pm (Edited 8 Dec 2016, 10:01 pm)
Sorry about the bad title, 50 character limit hurts.

So the past few days I've been seeing lots of post about Furvilla needing a darker theme to change to, with all of the bright colors hurting people's eyes, so I made a quick and dirty version in Stylish.
You can download it here.
You will need Stylish to use this theme, it is completely free and safe to download.
I'd appreciate any feedback, especially about areas that are still bright white that I could fix, and areas that need colors tweaked.

If you would like to disable this style on user profiles and villagers pages to see custom CSS, follow the instructions below!
Jessica said:

If you go to your styles and click 'edit' for this style, the very first line will be
@-moz-document domain('furvilla.com') {

All you need to do is replace that with
@-moz-document regexp('http://www\\.furvilla\\.com/(?!(villager|profile)).*') {
and it will disable the style on villager and user profiles

To do:
Forum background; darken and alternate colors
Protection quotient

7/31 Ver. 1.2 Added ability to disable style on villager pages and profiles, to see user's custom CSS.
7/28 Ver 1.2 Removal of white background on weapons and potions on Warrior page
Post count color update
Removal of default white background image on villager profiles
7/20 Ver. 1.1 Visibility changes, removed grey background box, tweaks to colors
7/19 Ver. 1 Initial Testing, waiting on feedback
jess #7302 | she/her | links
7 Dec 2016, 5:20 pm (Edited 8 Dec 2016, 10:02 pm)
Akky said:

Using this code in Stylish, you can make the villager icons in your side pane a little smaller, making the whole thing more compressed and less scrolling intense.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("furvilla.com") {

.right-column :nth-child(3) .text-center,
.right-column :nth-child(2) .widget-content .text-center :nth-child(n),
.right-column :nth-child(3) .widget-content .text-center :nth-child(n) {
height: 75px;
margin-top: 3px;
jess #7302 | she/her | links
5 Feb 2017, 2:12 pm (Edited 6 Feb 2017, 9:19 pm)

note from msjanny :
With permission, I've gone through and fixed some of the profile's broken backgrounds and adjusted for changes that FurVilla has introduced to profiles since the creation of these.

jess #7302 | she/her | links
16 Feb 2017, 8:09 pm (Edited 28 Mar 2017, 11:30 pm)

note from msjanny :
With permission, I've gone through and fixed some of the rule-breaking elements.
jess #7302 | she/her | links
16 Feb 2017, 8:11 pm
jess #7302 | she/her | links
16 Feb 2017, 8:12 pm
jess #7302 | she/her | links
28 Mar 2017, 10:52 pm (Edited 10 Aug 2017, 12:43 pm)
jess #7302 | she/her | links