PROFILE CSS

copy paste below the divider line

- - -

/*your entire profile is within the .content identifier*/
.content {
background-image:u rl(your image here); /*or if you want a solid colour change 'background-image' to 'background-color'*/
background-repeat: ; /*('repeat' for tiled backgrounds, remove this entire line for no repeat)*/
background-attachment:fixed; /*if you have a tiled background feel free to remove. the background does not scroll if this declaration is here, so if your background is not big enough in height for your page, it won't scroll along with the content to avoid showing that ugly white space it leaves*/
color:#yourhexcodehere; /*changes colour of text of your entire profile*/
}

/*this below customizes the bolded text. remove if you don't want to customize this lol*/
.content strong {
color:#hexcode; 
font-weight:normal; /*i didn't like how bolded text looked so i made it... unbolded, but in a different colour to differentiate*/
}

/*the header bar section*/
header .user-panel {
background: #hexcode!important; /*entire background colour. replace with image for image bg*/
border-bottom: 2px dashed #hexcode; /*border beneath header bar*/
color:#hexcode!important; /*this only changes colour of the date text*/
}



/*sidebar*/

/*customizes sidebar headers*/
.widget-header {
border-bottom: 2px dashed #hexcode; /*the dashed underline beneath the header text. feel free to make it solid/thinner/thicker/etc*/
}

/*this here customizes the text of the sidebar headers*/
.widget-header h3 {
background-color:transparent; /*this gets rid of the blue gradient background the sidebar headers usually have. feel free to change to an image or a colour or whatever*/
20px; /*changes text size, feel free to edit*/
color:#hexcode;
'Raleway', sans-serif; /*changes font, feel free to edit*/
font-weight:normal; /*i unbolded it but change to 'bold' if you prefer it bolded*/
}

/*these two adds a hover effect to the sidebar to bring to full opacity. remove if you don't like it*/
.widget {
opacity: .5;
}

.widget:hover {
opacity: 1;
}



/*links*/

/*customizes all links*/
.content a {
color:#hexcode;
font-weight:normal; /*change if you want it bolded*/
}

/*customizes link when mouse hovers over it*/
.content a:hover {
color:#hexcode!important;
text-decoration:none; /*this gets rid of the underline that appears whenever you hover over a link*/
}

/*customizes the links on the right side of header bar*/
header a {
color:#hexcode!important;
font-weight:normal!important; /*change if you want it bolded*/
}

header a:hover {
color:#hexcode!important;
text-decoration:none;
}

/*the stall, add friend, etc links. literally only changed positioning, but you can also change colour and hover effect if you want*/
.user-links {
10px!important;
}



/*comments*/

/*text section of a comment*/
.user-comments .user-comment {
border: 1px dashed #hexcode; /*self explanatory. border of a comment*/
background:#hexcode!important; /*background colour of comment*/
11px; /*i changed a lot of very minor placement/positioning stuff because i'm very picky... if you like the overall layout try not to change these. originally profile comments were very close together, this adds space in between*/
}

/*the footer of a comment, the part with date stamp and username*/
.user-comments .user-comment .footer {
border-top: 1px dashed #hexcode!important; /*this changes the line that separates text and footer*/
opacity:0.5; /*this is optional, just my preference. changes the opacity of the footer*/
}

/*the space surrounding the avatar image, really doesn't need to be changed if you like my original layout*/
.user-comments .user-avatar-wrapper {
20px;
}

/*the avatar image itself*/
.user-comments .user-avatar-wrapper img {
border-radius:60px; /*this makes the avatar a circle. experiment with changing border-radius for all four sides for different shapes*/
}



/*more text customization stuff*/

/*mainly the text that states user id and username. that section of text*/
.content p {
color:#hexcode;
}

/*part that says viewing profile. if you like how mine looks don't change anything other than colour. if not, remove/change whatever necessary*/
.content h1 {
color: #hexcode;
text-align:center;
background:u rl(http://pre00.deviantart.net/d002/th/pre/f/2016/197/3/8/comments_by_jennawing-daa6s9a.png); /*adds a transparent background*/
padding:10px;
18px;
letter-spacing:3px;
text-transform:uppercase; /*makes everything uppercase*/
}

/*the words 'villagers' and 'comments'*/
.content h2 {
color:#hexcode;
text-align:center;
}

/*part that says profile description*/
.content h3 {
color:#hexcode;
}

/*the part that says 'hi, username'. literally only changes 'hi'. told you i'm picky*/
.user-info h4 {
color:#hexcode!important;
10px; /*adds space above hi and the profile image*/
}

/*word 'trophies'*/
.col-xs-5 h4 {
color:#404040;
}

/*your profile text. the profile description part*/
.user-data .user-desc {
text-align:center;
border-top:1px dashed #hexcode; /*line separating the stuff on top*/
border-bottom:1px dashed #hexcode; /*line separating text and villager section*/
padding:20px;
background:u rl(http://pre00.deviantart.net/d002/th/pre/f/2016/197/3/8/comments_by_jennawing-daa6s9a.png); /*the transparent bg*/
}



/*positioning stuff. unimportant, don't change if you like the layout*/

.widget-content img {
border-radius:60px;
}

.user-data .village-shield {
60px;
}

.col-xs-7 {
-12px;
}

.col-xs-5 {
-23px!important;
}

.col-xs-9 {
120px!important;
float:right;
-150px!important;
width:70%;
}



/*misc stuff*/

/*villagers section*/
.villagers-list {
40px;
border-bottom: 1px dashed #hexcode; /*line separating villagers and comments*/
padding-top:10px;
}

/*comments/villagers number. idk don't touch anything other than border if you like the way it is*/
.counter {
border:1px dashed #hexcode!important;
padding: 0 7px 3px!important;
border-radius:50%!important;
top:-0.40em!important;
3px;
opacity:.5;
}

/*comment box*/
.textarea {
border:1px dashed #hexcode!important;
background:u rl(http://pre00.deviantart.net/d002/th/pre/f/2016/197/3/8/comments_by_jennawing-daa6s9a.png); /*transparent bg*/
}

/*post button*/
.medium {
background:u rl(your image here)!important; /*either have image or a solid colour, your choice*/
border:1px dashed #hexcode!important;
}

VILLAGER CSS

basically the same as profile aside from a few extra stuff. copy paste your profile css and add this stuff for villager page css.

- - -

/*uhh pretty sure this is the villager career box*/
.villager-data-info-box:nth-child(2n+2) {
background:#fff!important;
border:1px dashed #c9c7c7;
opacity:0.5;
}

/*the paintie box and the villager info box*/
.villager-data-info-box {
border:1px dashed #hexcode;
background:#hexcode;
opacity:0.5;
}

/*the dividers in villager info box*/
.villager-data-info-box hr {
border-top:1px dashed #hexcode;
}

/*the about section*/
.villager-data-info-wide {
padding:40px;
text-align:center;
50px!important;
border-left:none;
border-right:none;
border-top:none;
border-bottom:1px dashed #hexcode;
}

/*removes the default background thing behind the villager. y'know, the hill one*/
.villager-data-wrapper {
background:transparent; 
}