Log In

Free to use CSS + CSS help! (updated 4/17/19)

7 Dec 2016, 12:13 pm (Edited 17 Apr 2019, 5:01 pm)
Due to the forum wipe, some links have been rehosted on one of my own threads. If you are the author, please let me know if you have remade your post/thread so I can replace my makeshift link.

Key
  multiple layouts of same type
  needs further editing to use
  pulled from source code
ν  villager profile snippet
υ  user profile snippet

User Profiles
by jennawing  ✏
by Pachoopi
by Tuo
by Whipptail  ✚
by msjanny  ✚
by mauve  ✚
by snowflakeartist
by Akky  ❍
by Satsukii  (resize the nav bar text size so "help" is not cut off)
by James  ✚
temporarily removed by wentzler
by Reav
by AzirtheEmperorFerret
by Lu
by krizpy
by alxq  ✏
by TropicalDeer  ✚

Villager Profiles
by Wilderwuff  ✏
by jennawing  ✏
by mauve  ✚
by Pachoopi
by Whipptail  ✚
by Akky  ❍
by Satsukii
by Lunneus
by msjanny
by KilljoyLights
by Teacup
by Xynn  ✏
by Tuo
by snowflakeartist
by Lu
by TropicalDeer  ✚
by KilljoyLights  ✚
by llclover317  ✚
by alxq  ✏
by pastelgorys

Snippets
by Fuzzerfox  υ
   Custom header image
   Villager sidebar
by Tashamon
   Bobbing shield animation υ
   Dynamic comments ν υ (read this)
by vonCrota  ν υ
   Responsive CSS
by jennawing  ν υ
   Changing the outer background
by Whipptail  υ
   Villager hover effect
by noll  ν υ
   Spinning and shrinking shield on hover
   Bouncing logo on hover
   Villager icon shake on hover
by msjanny  ν υ
   Replacing the logo
   Centering the villager list
   Collapsible widgets
   Centering the villager profile
   Removing advertisements
   Changing the outer background
   Replacing footer images
   Replacing the village shield
   Putting user trophies in a scrollbox
   Putting user trophies on their own row
   Centering the user trophies
by Akky  υ
   Career shields on villager list
by Dawnrose  ν υ
   Scrolling comments
by Lion
   Villager backdrops
by Distortion 
   Villager thumbnail wobble
   Villager thumbnail rotation

Userstyles
Night mode by Jessica
Night mode by CuteHornedUnicorn
Night mode by Leaf
Condensed widgets by Akky
Giving Tree condenser by msjanny
Improved battling by msjanny
Speed eating by msjanny

Userscripts
Keep in mind FV does not allow gameplay to be automated through userscripts.
Price checker by ShaunDreclin 
  An updated version that should work on new items.
  Keep in mind sorting by equipment potency is broken on FV.
WYSIWYG BBCode editor by CuteHornedUnicorn 
  My (poor) attempt at adding tables, lists, and more.
  There are a few graphical issues with my version, and
  [th] and colspan/rowspan are broken. I do not know how to fix it,
  so please don't ask. :')
jess #7302 | she/her | links


7 Dec 2016, 12:15 pm (Edited 19 Jan 2019, 9:56 pm)
Note
Please respect the author's rules! If they'd like credit, please provide it, and if they'd like to avoid major edits, please don't make major edits!

If you are entering a profile contest with code borrowed from here, please check to see whether the author allows that. Thank you.

Furthermore, please do not use other people's CSS without their permission, and especially do not use other's CSS without permission and tell me to list it here. If I find out I have been told to list stolen code by somebody, I will refuse to list anything from said person, even things coded from scratch.
(To extend upon this, if you find something listed here without your permission, please message me! I would also recommend contacting a mod and/or the person in question.)

Here's a running list of disallowed CSS on Furvilla. Please contact me if you find anything to add (bump it, message me, post here, whatever)!

More about userstyles
Broadly speaking, It's an extension that allows you to add your own touch to a website (often to make it more accessible) using custom CSS. Other people cannot see changes you make, only you.

You'll need an extension to install them. I do not recommend Stylish.
If you want it on an Android mobile device, Firefox allows mobile add-ons. 
I do not know of any iOS compatible browsers that allow add-ons, but if you know any, I'm all ears!
(Firefox | Chrome | Opera | Safari)

More about userscripts
Similar to userstyles, but much more powerful, as they are mostly written in Javascript (a programming language). Keep in mind Furvilla rules do not allow any userscripts that automate gameplay.

You'll need an extension to use these. Most people use Tampermonkey (Chrome) or Greasemonkey (Firefox). Please be careful installing userscripts from unknown sources.
(find which extension is right for you)

Tips
If your villager CSS has gone awry, you can still edit it from here or at http://www.furvilla.com/villager/edit/VILLAGER_ID.

Try to keep the modals safe. Those are the panels that pop up when you try to transfer something to a person from their profile or when you click report. Usually, all you need to do is add .content in front of the selector. (generally, this is only an issue with .btn, a, .textarea, and .pagination)

[code] tags will hide line breaks! Avoid using them to share large blocks of CSS.
Original formatting can still be accessed by quoting the post, however!
jess #7302 | she/her | links
7 Dec 2016, 4:19 pm (Edited 8 Dec 2016, 10:29 pm)
I'm also subscribed to this thread and available to answer any CSS and BBC questions!
jess #7302 | she/her | links
10 Dec 2016, 1:06 am
msjanny

Please tell wentzler that they can not hide their side bars.

I was using their CSS on my profile and two different mods sent me messages today telling me that it was "inappropriate" and to change it.
Enoch| 24 |
10 Dec 2016, 1:08 am
Thanks for this compilation!
Ether | He/him/his | Ping me

3MzVVlz.jpg
10 Dec 2016, 2:30 am
Enoch hello! i also got notified about it today, i really had no idea beforehand but for now ive taken to code down and i plan on updating it :( sorry for the issue
hi im coral
tumblr
10 Dec 2016, 10:06 am (Edited 10 Dec 2016, 10:08 am)
Enoch wentzler
Wait, but that design didn't hide them? If you hovered over the little circles on the side, they opened to full size?

the right column widgets can be hidden as long as its obvious where they are located and reveal in full on hover 

edit: they seem to have changed the rule clarifications in the knowledge base w/o changing the ones in coding discussion -
was it just deemed not obvious enough?
jess #7302 | she/her | links
10 Dec 2016, 10:38 am
msjanny yeah the mod said that they saw the circles were there, theyre just not obvious enough... its a simple fix at least lmao
hi im coral
tumblr
10 Dec 2016, 10:43 am
wentzler  
Just let me know when you've got it up and running again!
jess #7302 | she/her | links
10 Dec 2016, 1:42 pm (Edited 10 Dec 2016, 1:43 pm)
Maybe this question has a really simple answer but how do I change my user icon from my villager to something different? I scrolled through the CSS of the page trying to find where it was so I knew what to change in the little Edit Profile CSS box but I didn't have any luck... ;w; Hopefully it is actually in the CSS and not somewhere obvious that I don't know about >->


EDIT: Wow never mind I totally just found it, I feel really dumb now x-x
17 Dec 2016, 12:21 pm
Added a new one by Reav !
jess #7302 | she/her | links
19 Dec 2016, 12:35 pm
msjanny
How do I add a background to my profile page? That's all I need help on, everything else I got taken care of.

It's a repeated image like so:
tumblr_mb9dkhH1My1qid2nw.png
tumblr_ohq2fjlX5d1v14vrao1_500.png
Sparkz/Beta Tester/♎/Pkmn Addict/❤'s Marine Bio/chaotic good
19 Dec 2016, 3:18 pm
Madsparkz
The outside or inside?
First block is for the inside, second block is for the outside.
If the tiling is being a butt, try adding background-repeat: repeat;, but it shouldn't be necessary if you use the stuff below as is.

.content {
background: url('http://68.media.tumblr.com/tumblr_mb9dkhH1My1qid2nw.png');
}
.content:after {
background: url('http://68.media.tumblr.com/tumblr_mb9dkhH1My1qid2nw.png');
position: fixed;
top: 0;
z-index: -1;
width:100%;
height:100%;
}
jess #7302 | she/her | links
19 Dec 2016, 3:39 pm
Is there a way to add a semi-transparent box around text so it's more visible against the background? I've looked around but so far I haven't found much help.
http://www.furvilla.com/stall/68183 I sell medicines in my stall. Message me for a Dragonsmaw medicine request! All medicines are now mastered.

free_bouncy_sylveon_icon_by_kattling-d6t By Kattling on deviantart.
19 Dec 2016, 3:42 pm
synthionic
Like my own profile?
rgba(red, green, blue, alpha) allows you to add background colors with opacity.

There's a color picker for that here
jess #7302 | she/her | links
19 Dec 2016, 5:46 pm
Thank you!
tumblr_ohq2fjlX5d1v14vrao1_500.png
Sparkz/Beta Tester/♎/Pkmn Addict/❤'s Marine Bio/chaotic good
19 Dec 2016, 9:11 pm
How can I change the color for the nav header? I took a long break from editing any of my CSS that I can't really remember what each part does and the template I'm using doesn't really edit that part of the profile (at all actually). I want it to match the color of my sidebar/userpanel/etc
Limbo, a polymorphous little shadow.
She/Her, They/Them

Ping me if you reply to me / Beta Tester
19 Dec 2016, 9:23 pm
helpfulDeathgod
#logo + :nth-child(2) for the navy blue part and .userpanel.clearfix for the cyan part. The clearfix is necessary if you don't want to use !important.
jess #7302 | she/her | links
19 Dec 2016, 10:59 pm
Thank you!
Limbo, a polymorphous little shadow.
She/Her, They/Them

Ping me if you reply to me / Beta Tester
20 Dec 2016, 11:19 am
I'm nowhere near a coder, even HTML stumps me, so I'm probably missing something obvious. xD

I'm using Whipptail 's free CSS linked in the OP and I'm wondering;
1 - Where do I find the parts to change the font colour and link colour in the recent activity widget?
2 - Is there a way to make the items in the gallery widget not have individual background .... things? Boxes? The big white block behind each image and the text saying what it is.

wolf-animated-gif-29.gif
20 Dec 2016, 1:18 pm
UKthewhitewolf
  1. Note: you can combine selectors.
    /*thread color*/
    .forum-posts a {
    color: _____;
    }
    /*text color*/
    .widget .forum-posts p {
    color: _____;
    }
    /*link color*/
    .widget .forum-posts p a {
    color: _____;
    }
  2. I took the liberty of trying to get the gallery match the other content boxes since that section was added after this premade was created. If you don't want that, just copy and past only the bolded areas.
    .gallery {
    margin: 0 0 20px;
    background-color: #607285;
    border-style: double;
    border-width: 4px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-color: #1882cd;
    box-shadow: 4px 4px 0 0 rgba(0,0,0,0.5);
    }
    .panel {
    background: none;

    border: 0;
    box-shadow: none;
    margin: 0;
    }
jess #7302 | she/her | links
20 Dec 2016, 1:40 pm
You my friend, are fantastic! Thank you! <3

wolf-animated-gif-29.gif
8 Jan 2017, 5:21 pm
theres a lot about changing the outer background but what about the inner bg :'3
20190815_025145.png
8 Jan 2017, 5:45 pm
RadioactiveAcid
.content {
background: ______;
}
jess #7302 | she/her | links
8 Jan 2017, 5:53 pm
NICE
20190815_025145.png