Free to use CSS + CSS help! (updated 11/11/19)
Hybrid_Hybrat
I assume you want to make the background transparent, not the entirety of
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:
If you want to set it to 70% opacity, you'd change that to:
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.
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;
}
background: #fff;
}
If you want to set it to 70% opacity, you'd change that to:
.content {
background: rgba(255, 255, 255, .7);
}
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
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
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
msjanny said:
Hybrid_Hybrat
I assume you want to make the background transparent, not the entirety of
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:
If you want to set it to 70% opacity, you'd change that to:
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.
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;
}
background: #fff;
}
If you want to set it to 70% opacity, you'd change that to:
.content {
background: rgba(255, 255, 255, .7);
}
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.
jess #7302 | she/her | links
alphadragoness
I'm not sure what you mean by neon colors, but yes, you can just copy and paste from the raw.
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
msjanny said:
alphadragoness
I'm not sure what you mean by neon colors, but yes, you can just copy and paste from the raw.
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
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 :, )
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 :, )
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.
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;
}
opacity: .5;
}
jess #7302 | she/her | links
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.
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, 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;
}
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
thx a bunch ionce i learn how to code properly i can give ppl free css to <3
msjanny said:
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;
}
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;
}
Daisy Page
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*
►Tumblr ◊Instagram ◊ Picarto ◊ Twitter ◊ Furaffinity◊ Toyhou.se ◄
♥BUY ME A KO-FI♥
*PING ME IF I AM NOT ON MY OWN THREAD*
►Tumblr ◊Instagram ◊ Picarto ◊ Twitter ◊ Furaffinity◊ Toyhou.se ◄
♥BUY ME A KO-FI♥
jess #7302 | she/her | links
removed trophy snippets;
offering assistance with fixing profiles after newest updates.
offering assistance with fixing profiles after newest updates.
jess #7302 | she/her | links
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.
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.
jess #7302 | she/her | links
