Log In

[F2U] Matching Minimalist CSS

26 Apr 2017, 7:45 pm (Edited 6 Sep 2018, 4:27 pm)
I AM NOT SUBSCRIBED!

Codes:
user profile | preview
villager profile | preview


**user profile undergoing some major changes

----

rules:
- do NOT remove my credit from the footer. you can recolor it however.
+ addendum: there are some users who are using an older version of my code where the credit wasnt coded in. notify me instead of handling it yourself.
- do NOT use any part of my code for a css contest entry.
- splicing/editing the css for personal use is a-okay.
- do NOT sell/redistribute my code. notify me if you see someone selling/redistributing my code.
- do NOT claim my code for your own, even if you "personalized" it. youre still using my base code, therefore its not entirely your own.
+ addendum: you can credit yourself for the edits you do, if you do edits beyond changing the default values, but only for the edits and not the base code!

specs:
- minimalist, default furvilla layout
- copy and paste with minimal edits for css beginners
- customization friendly for more experienced css coders
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads


26 Apr 2017, 7:46 pm
LOOK AT THIS GOOD CODE!!!
i saw a dog so perfect i gave it my entire wallet?
please ping me when replying!
vista by genie
7nFDRhO.gif
26 Apr 2017, 7:50 pm
EEEY THAT'S PERTY.
489824x.gif
26 Apr 2017, 8:29 pm (Edited 26 Apr 2017, 8:31 pm)
alxq

i love your CSS! do you also have the CSS code for the villager pages as well?

» Hexict | Hex | Hexi «
» Asexual / Panromantic «
» INTP «

26 Apr 2017, 8:37 pm
Hexict theyre still being cleaned up actually. theyll look like the ones on adel and june's profiles if youre wondering what it would look like

theres still a bit of stray coding which is why its not up yet D:
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads
26 Apr 2017, 8:57 pm
alxq

okay, thanks ^u^

» Hexict | Hex | Hexi «
» Asexual / Panromantic «
» INTP «

26 Apr 2017, 10:21 pm
That's gorgeous! I'm using it, if you don't mind~
26 Apr 2017, 10:29 pm
It's so gorgeous! :'D
30 Apr 2017, 3:31 am
This looks nice. Definitely gonna look at customizing it tomorrow.
d7gjIJT.png
Please ping me, I'm forgetful
4 May 2017, 3:24 pm
In what part of the code do you add background pictures?
I couldnt figure it out ><
Also THANK YOU FOR LETTING US USE THIS CODE
No seriously, everytime I try to look up CSS profile code it keeps taking me to some financial aid search results and I'm like, no, thats not what I wanted at all :/
So thank you!!!
Ping me for my attention please!
Furaffinity|Tumblr
>>>>Furvilla Stall<<<<


4 May 2017, 3:27 pm
ShortyLynnChaos it should be under WEBPAGE BACKGROUND, where it says background: url
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads
4 May 2017, 3:49 pm
And I just post the url then?
Ping me for my attention please!
Furaffinity|Tumblr
>>>>Furvilla Stall<<<<


4 May 2017, 8:26 pm
!!! Thanks for such a user-friendly customizable css~ Currently using it :3
tumblr_ojjmvoHi0x1r9ulu7o1_250.gif
4 May 2017, 8:38 pm
Whoops, I've sucked at replying to this aha. It looks so good ;w; I'm really glad you finally got it to the point you wanted to share it <3 Ping me when the villager page is done too, please? ;w; I gotta... have matching profiles kfdad
x4fHU1u.gif

Characters for Sale/Trade

njXgqRG.gif
5 May 2017, 9:13 pm
Thank you for sharing this code!
I finally decided to prettify my profile and I'm using it. <3
5 May 2017, 9:56 pm
-cackles maniacally at my new eyeball stabbing profile- yea that'll do until I'm on my desktop. Editting code on a tablet is not so great.

I love this css though. It's so lovely and easy to edit and just wonderful. I'd love to be pinged for the pet profile too! Thank you very much fit this wonderful css!
QwQeZLQ.png
6 May 2017, 2:14 pm (Edited 6 May 2017, 2:15 pm)
alxq

Hi friend! Can I get a ping for when your villager profile is finished?
I'd love to use it for Zephyrus' profile <3
Enoch| 24 |
10 May 2017, 5:12 pm (Edited 10 May 2017, 5:12 pm)
alxq
This code is amazing. O @ (omg sorry for the ping!)
But sadly, I have 0.01% knowledge of CSS.... I managed to put a background in it I put together. But... How do I know where to change stuff? TuT For some reason my villagers down roll down, it only shows one row and I really wanna make my trophy part a bit bigger. :'o I also seem to have lots of dead space beneath my gallery.

tumblr_p53ie1EC5A1vlw6imo5_r1_400.png
Female/24/Netherlands/Fv +7H/Metalhead/Nordic freak
Ping me please~
10 May 2017, 5:14 pm
wow, gorgeous!!!
tumblr_inline_oaw6tmaqQF1r39keg_500.gif
teya | actual unicorn | any
tumblrdeviantARTtoyhou.se
10 May 2017, 5:38 pm
The first time I tested this out I was like, "meh" but I just did it again and!!! holy crap!!! I really love this CSS you did a fantastic job!! i really love it thank u for giving my page the nice new look it needed,, I especially love the large background as opposed to the small one I used to have!
✰Roy/Parker✰20✰he/they
@ 40847 for ping
⇩⇩⇩ click Darker for my YCH commission thread! ⇩⇩⇩

17275267_TJn9uOUQeNjebHV.png
socials
11 May 2017, 3:59 am (Edited 11 May 2017, 3:59 am)
Khisyra lmao took awhile but:

changing stuff: you can change anything about the code is what i mean about "free to edit." its best to see what each thing does, helps with learning yourself! and also testing out which works best for you personally. the code was made to be flexible while having a central outline to work with.

villagers: there should be a part of the code that says "villagers"
what you can do is (im assuming you took off the hover for this part) is simply take off max-height: 190px; from .content .villagers-list {
that should revert back the villager's list to its full length

trophy: ah, i manually made the trophies smaller but take off the entire code under .trophies .row img { and that should let the trophy images go back to normal

dead space: thats actually the space for the user comments, but since you disabled it, it only shows up as dead space. to take it off, delete the entire code under /* USER COMMENTS */ and /* USER COMMENTS BODY */

some general things:
looks like theres some weird code thats making the headers on the widgets (the ones that say "notifications" and "user panel" and the like) sort of sit on the top of the border so if youre affected by this, take off:
padding: 10px 0 5px; from .widget-header h3
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads
11 May 2017, 5:25 am
alxq
Don't get me wrong, I really wanna try learn CSS. I just don't know where to start. ^^"

Alright I will try it!
About the villagers, I didn't take out anything from the code itself, I see other people having the same? I do really want it to roll down for the villagers like it should tho. :D

tumblr_p53ie1EC5A1vlw6imo5_r1_400.png
Female/24/Netherlands/Fv +7H/Metalhead/Nordic freak
Ping me please~
11 May 2017, 5:38 am (Edited 11 May 2017, 5:38 am)
Khisyra huh, thats a little weird! im using the same code and it works for me.
is max-height in there? i checked your css and somehow its not showing up in the body css
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads
11 May 2017, 5:55 am (Edited 11 May 2017, 5:56 am)
(I hope this is the right part)

/* VILLAGERS */
.content .villagers-list {
padding: 20px;
border-radius: 20px;
max-height: 190px;
transition: 3s;
overflow: hidden;
}
.villagers-list:hover {
// adjust this accordingly
// more villagers, bigger pixel height
max-height: 1300px;
}

I got this.

tumblr_p53ie1EC5A1vlw6imo5_r1_400.png
Female/24/Netherlands/Fv +7H/Metalhead/Nordic freak
Ping me please~
11 May 2017, 6:01 am
Khisyra that is very weird, it should work.
try taking out the comments (ones that have the // up front) and if that doesnt work, try to add
transition: 3s;
overflow: hidden;
under .villagers-list:hover

if it still persists, ill try to look into it more?
vista by atilla
heart & icon by peridxt
.
ibr36yM.gif
cSCXH8Q.gif
#9085 + they / she
active threads