Log In

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

30 Mar 2019, 10:15 am
[quote=msjanny ]

no. and my point was how 2 use the template without using coding??
30 Mar 2019, 10:16 am
[quote=Hybrid_Hybrat ]

alright
30 Mar 2019, 1:09 pm
Hybrid_Hybrat
I assume you want to make the background transparent, not the entirety of .content.*
You can use rgba or hsla colors (as opposed to hexadecimal).
RGBA: red, green, blue, alpha
HSLA: hue, saturation, luminosity, alpha

Right now, for example, you have the following:
.content {
background: #fff;
}

If you want to set it to 70% opacity, you'd change that to:
.content {
background: rgba(255, 255, 255, .7);
}


Since you mentioned some familiarity with inspect element, I'd like to mention most browsers let you convert from hex to rgb/hsl with just a click. You can drag that slider under the hue picker to change the alpha channel (opacity).
Keep in mind 8-digit hex colors are not supported by FV even though they'll work in the dev tools.

*If you really want to make the whole thing transparent, use opacity, but keep in mind nothing will probably be readable.
jess #7302 | she/her | links
30 Mar 2019, 1:17 pm
alphadragoness
Which template did you want to use? Most links contain either the code in full or a link to a pastebin where you can copy and paste it. Anything with a '✏' requires further editing; anything with '❍' requires you pull the CSS directly from the source code.

Once you have it, just paste it into the Profile CSS box here.

sincerely cannot tell if you are a troll
jess #7302 | she/her | links
30 Mar 2019, 7:05 pm
Hybrid_Hybrat
I assume you want to make the background transparent, not the entirety of .content.*
You can use rgba or hsla colors (as opposed to hexadecimal).
RGBA: red, green, blue, alpha
HSLA: hue, saturation, luminosity, alpha

Right now, for example, you have the following:
.content {
background: #fff;
}

If you want to set it to 70% opacity, you'd change that to:
.content {
background: rgba(255, 255, 255, .7);
}


Since you mentioned some familiarity with inspect element, I'd like to mention most browsers let you convert from hex to rgb/hsl with just a click. You can drag that slider under the hue picker to change the alpha channel (opacity).
Keep in mind 8-digit hex colors are not supported by FV even though they'll work in the dev tools.

*If you really want to make the whole thing transparent, use opacity, but keep in mind nothing will probably be readable.

Ahh this was so helpful~ Thank you so much :D
I have no idea what I am doing with my life.
Sdz53xH.png
30 Mar 2019, 7:46 pm
[quote=msjanny ]

the most basic?
30 Mar 2019, 8:40 pm
alphadragoness
do you mean basic by FV user mauve? Just copy and paste that into your profile CSS.
jess #7302 | she/her | links
31 Mar 2019, 11:40 am
alphadragoness
do you mean basic by FV user mauve? Just copy and paste that into your profile CSS.


with neon colors or paste the RAW version 2 the CSS?
31 Mar 2019, 12:31 pm
alphadragoness
I'm not sure what you mean by neon colors, but yes, you can just copy and paste from the raw.
jess #7302 | she/her | links
31 Mar 2019, 12:48 pm
alphadragoness
I'm not sure what you mean by neon colors, but yes, you can just copy and paste from the raw.


kk bc original coding on there is light blue, but RAW is black without glow on txt
17 Apr 2019, 5:03 pm
forgot to add my own speed eating userstyle until like two months later That's Fine
jess #7302 | she/her | links
13 Jul 2019, 12:55 pm (Edited 15 Jul 2019, 12:27 pm)
msjanny
I've been working on one of my villager's profiles and I'm having some trouble :/

http://www.furvilla.com/villager/325885

I'm trying to get the careers of the villagers on the right sidebar to be .5 opacity as well as the user profile ID? I've just been compiling knowledge from a bunch of different threads and this is the last bit I can't get to work :, )
tumblr_psjap7zEZv1rfxbzoo1_500.png
3 Aug 2019, 2:41 pm
nimblemusicbox
Hey, I'm incredibly sorry for how delayed this has been. I'm not too sure how I missed this post in my notifications, as I am subscribed, but try the following.
.right-column img {
opacity: .5;
}
jess #7302 | she/her | links
4 Aug 2019, 11:05 am
That did the trick! Thank you so much ;w;
tumblr_psjap7zEZv1rfxbzoo1_500.png
16 Aug 2019, 3:49 pm
msjanny

how easy is it to make a CSS?
5465744.png
16 Aug 2019, 4:27 pm
Thunderclaw
If you don't want to change everything and start from scratch, it only takes about 10-20 minutes to edit the templates in the first post. I recommend this approach for beginners.

Otherwise, assuming you don't know CSS, you'd need to familiarize yourself with both HTML and CSS first. The courses I linked take about 22 hours to complete.

It usually takes me 4+ hours to complete something like my user profile since I change pretty much everything.
jess #7302 | she/her | links
21 Aug 2019, 5:35 pm
anyone hv a free to use css of the bacround to aquadome
Daisy Page
21 Aug 2019, 6:47 pm (Edited 21 Aug 2019, 6:48 pm)
anmalea

#logo a {
    background-image: url(/img/events/oceandome/logo-ocean17.png);
}
.content {
width: 100%;
min-width: 990px;
padding: 253px 0 256px;
top: -253px;
bottom: -256px;
background: #d7f9ff url(/img/events/oceandome/bg-ocean18.png) top no-repeat;
margin-bottom: 0;
}
.content > .clearfix {
width: 990px;
margin: 0 auto;
padding: 20px 20px 60px;
  background: #FFF url(/static/backgrounds/bgoceandome.jpeg) top no-repeat;
}
#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;
}
jess #7302 | she/her | links
21 Aug 2019, 6:53 pm (Edited 21 Aug 2019, 6:59 pm)
how to edet ur profile to use css LOLs confushion
anmalea

#logo a {
    background-image: url(/img/events/oceandome/logo-ocean17.png);
}
.content {
width: 100%;
min-width: 990px;
padding: 253px 0 256px;
top: -253px;
bottom: -256px;
background: #d7f9ff url(/img/events/oceandome/bg-ocean18.png) top no-repeat;
margin-bottom: 0;
}
.content > .clearfix {
width: 990px;
margin: 0 auto;
padding: 20px 20px 60px;
  background: #FFF url(/static/backgrounds/bgoceandome.jpeg) top no-repeat;
}
#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;
}
thx a bunch ionce i learn how to code properly i can give ppl free css to <3
Daisy Page
21 Oct 2019, 9:11 pm
msjanny I need some help with my CSS- Ive had the same css for my villagers since I started, and now that keepsakes and other widgets have been added to the page it has made everything super wonky and I have no idea how to fix it again. I would like the "about" page to be next to the villager where it currently is, and the other stuff to be under it. Basically most everything is fine where it is except the "about" widget. Any help with this would be super appreciated!
|Achilles|Artist|NB*|
*PING ME IF I AM NOT ON MY OWN THREAD*

TumblrInstagramPicartoTwitterFuraffinityToyhou.se
BUY ME A KO-FI
21 Oct 2019, 9:14 pm
VonKarma
Find the following in your CSS: -422px
Change that to: -889px
jess #7302 | she/her | links
11 Nov 2019, 6:20 pm
removed trophy snippets; 
offering assistance with fixing profiles after newest updates.
jess #7302 | she/her | links
11 Nov 2019, 6:44 pm
Looking for something pretty simple, at least in theory, I know bugger all about CSS coding. I like the general visual style of the default site, including the automatic theme/logo changes when switching villages and during events and such. However..

Is there a snippet that does nothing but swap the entire right vertical column (User Panel, Active/More Villagers, Recent Activity, etc) with the left/content column? Pretty much the entire site uses the two column modular layout, so something that leaves everything else otherwise untouched and functioning as it does by default would be nice.
11 Nov 2019, 7:26 pm
gaiaweylyn
.content .right-column {
float: left;
}
.content .left-column {
float: right;
}
jess #7302 | she/her | links
11 Nov 2019, 7:27 pm
gaiaweylyn
.content .right-column {
float: left;
}
.content .left-column {
float: right;
}


Oh wow, as simple as that? Nice! Thanks!~