HELOVIA || The Way to the Sun
[Code] Profile Skinning - Printable Version

+- HELOVIA || The Way to the Sun (http://helovia.com)
+-- Forum: Out of Character (http://helovia.com/forumdisplay.php?fid=1)
+--- Forum: Player Resources (http://helovia.com/forumdisplay.php?fid=99)
+---- Forum: Growth Center (http://helovia.com/forumdisplay.php?fid=82)
+---- Thread: [Code] Profile Skinning (/showthread.php?tid=22858)

Profile Skinning - Neo - 02-10-2016

So, here we are at last - the code for re-skinning your profile!

Don't...
* remove the home-link or plot text on the banner
* change the layout's style - we get to fiddle with colors and font types, but please leave the layout as Tamme designed it elsewise!
* change the positioning of the content overly much; nudging it slightly left or right is fine but it still has to feel like it's mostly in the middle

What controls what?




Poke me if I've forgotten/mislabeled something. I'm tired and it was a while since I actually had to care what led where. xD

As you notice, some things share style without being super obvious about it - like trow1padded. It is both the "Character Update" section as well as listing the results on your threadlog and asset pages.

This is the code I use, so it'll come with Mauja's pretty face and purple colors. It also clumps some styles together (because it means less code for me and I wanted them to look the same anyway!) - if you do not agree with this bunching-together, it is easy to remove. Take for example:
.tcat, .tcatauthor, .statstable { background-color: #343447; color: #5a586e; border-color: #5a586e; }

If I want .statstable to have a different color scheme, I just remove it, and voila, I get this:
.tcat, .tcatauthor { background-color: #343447; color: #5a586e; border-color: #5a586e; }
.statstable { my: new css here; }

In the same vein, it's easy to add something to another group if you want them to look the same, just reverse the above process :)

Oh, and right. a:anything are links! so a:link and a:visited would be the color you see when you're not hovering/clicking them. It's pretty standard to have the same color both for unvisited and visited links. a:hover is when you hover over the link (:hover anything is when you hover over it!) and a:active is the actual moment you click it. a:hover and a:active are usually given the same color.

Any questions? Post them here and I'll do my best to answer! Or if somebody beats me to it they can do their best to answer, too. ;)

May 2016 Edits
  • #footer is now obsolete, replaced with #footwrap
  • menu header icons are called .headerbutton
  • search option has been removed

.plotheader and .logotitle: color added
#panel .upper: removed the #search stuff afterward
.sidebarstyle a:link etc....: changed the #footer stuff to the #footwrap instead
.sidebar-collapser, .sidelinksmenu etc...: added in the different link/sidebar collapser colors.
.trow1forum etc...: added .buttoninfo_content to the same styling (border around the info the buttons bring up)
.go-top etc..: added the .headerbuttons to the same styling
#footwrap: added this.

May 2016 specific edits:
Code:
.plotheader { left: 22%; top: 68%; color: #bab9c5; }

.logotitle a:link, .logotitle a:visited { color: #bab9c5; }
.logotitle a:active, .logotitle a:hover { color: #837f9b; }

#panel .upper { background-color: #f3ebe1; border-color: #837f9b; }

.sidebarstyle a:link, .sidebarstyle a:visited,
.trow1 a:link, .trow1 a:visited,
.trow2 a:link, .trow2 a:visited,
.trow1padded a:link, .trow1padded a:visited,
#footwrap a:link, #footwrap a:visited { color: #c6c1ce; }
.sidebarstyle a:hover, .sidebarstyle a:active,
.trow1 a:hover, .trow1 a:active,
.trow2 a:hover, .trow2 a:active,
.trow1padded a:hover, .trow1padded a:active,
#footwrap a:hover, #footwrap a:active { color: #343447; }

.sidebar-collapser, .sidelinksmenu a:link, .sidelinksmenu a:visited { background-color: #f3ebe1; border-color: #d6ccbf; color: #272735; transition: 1s; }
.sidebarbarhah { background-color: #272735; transition: 1s; }
.sidelinksmenu a:active, .sidelinksmenu a:hover { color: #5a586e; transition: 1s; }
.sidebar-collapser:hover .sidebarbarhah { background-color: #5a586e; transition: 1s; }

.trow1forum, .sidelinks, .buttoninfo_content { background-color: #272735; }

.go-top, a.go-top, .headerbutton { background-color: #343447; border-color: #5a586e; color: #837f9b; transition: 1s; }
.go-top:hover, a.go-top:hover, .headerbutton:hover { background-color: #5a586e; border-color: #c6c1ce; color: #c6c1ce; transition: 1s; }
#footwrap { background-color: #272735; }

Here's the full code! It goes in the "Custom CSS" field in Edit Profile! Remember to put it in a style tag :)
Code:
body { background: url('http://julle.cc/images/Helovia/Mauja/mau_prof_bg.jpg'); background-position: bottom center; background-attachment: fixed; background-size: 100% auto; }

#logobanner { background-image: url('http://julle.cc/images/Helovia/Mauja/mau_prof_banner.jpg'); }
.logotitle { top: 50%; left: 17%; }
.plotheader { left: 22%; top: 68%; color: #bab9c5; }

.logotitle a:link, .logotitle a:visited { color: #bab9c5; }
.logotitle a:active, .logotitle a:hover { color: #837f9b; }
.ascendedtext { color: #837f9b; }

#panel .upper { background-color: #f3ebe1; border-color: #837f9b; }
#header ul.menu { background-color: #a9a8b3; color: #343447; border-color: #343447; }
#header ul.menu a:link, #header ul.menu a:visited { color: #343447; }
#container { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); }

.navigation { background-color: #272735; border-color: #5a586e; color: #58586f; }
.navigation a:link, .navigation a:visited { color: #58586f; text-shadow: 0px 0px 3px #0a0b1a; }
.navigation a:active, .navigation a:hover { color: #837f9b; }
.navigation .active { color: #837f9b; background: none; }
.thead { background-color: #837f9b; border-color: #bab9c5; color: #272735; }

.tcat, .tcatauthor, .statstable { background-color: #343447; color: #5a586e; border-color: #5a586e; }
.profileheader2 { color: #837f9b; }
.trow1padded { background-color: #272735; }
.header { background-color: #343447; color: #5a586e; border-color: #272735; }

.innercontent { background-color: #5a586e; color: #b0abb9; }
table { color: #b0abb9; }
.innercontent a:link, .innercontent a:visited { text-shadow: 0px 0px 3px #272735; color: #c6c1ce; }
.innercontent a:hover, .innercontent a:active { color: #f3ebe1; }

.sidebarstyle, .trow1, .trow2 { background-color: #5a586e; color: #272735; }
.sidebarstyle a:link, .sidebarstyle a:visited,
.trow1 a:link, .trow1 a:visited,
.trow2 a:link, .trow2 a:visited,
.trow1padded a:link, .trow1padded a:visited,
#footwrap a:link, #footwrap a:visited { color: #c6c1ce; }
.sidebarstyle a:hover, .sidebarstyle a:active,
.trow1 a:hover, .trow1 a:active,
.trow2 a:hover, .trow2 a:active,
.trow1padded a:hover, .trow1padded a:active,
#footwrap a:hover, #footwrap a:active { color: #343447; }
.trow1forum, .sidelinks, .buttoninfo_content { background-color: #272735; }
.sidebar-collapser, .sidelinksmenu a:link, .sidelinksmenu a:visited { background-color: #f3ebe1; border-color: #d6ccbf; color: #272735; transition: 1s; }
.sidebarbarhah { background-color: #272735; transition: 1s; }
.sidelinksmenu a:active, .sidelinksmenu a:hover { color: #5a586e; transition: 1s; }
.sidebar-collapser:hover .sidebarbarhah { background-color: #5a586e; transition: 1s; }

.proftabs-menu li.current, .proftab, .proftab-content { background-color: #272735; border-color: #5a586e; border-bottom: 0px; }
.proftabs-menu li.current a:link, .proftabs-menu li.current a:visited { color: #5a586e; }
.proftabs-menu li { background-color: #343447; border-color: #5a586e; }
.proftabs-menu li a:link, .proftabs-menu li a:visited { color: #837f9b; }

.go-top, a.go-top, .headerbutton { background-color: #343447; border-color: #5a586e; color: #837f9b; transition: 1s; }
.go-top:hover, a.go-top:hover, .headerbutton:hover { background-color: #5a586e; border-color: #c6c1ce; color: #c6c1ce; transition: 1s; }
#footwrap { background-color: #272735; }


RE: Profile Skinning - Volterra - 02-10-2016

YOU ARE THE BEST

SERIOUSLY THE BEST <3333

RE: Profile Skinning - Mauja - 02-10-2016



RE: Profile Skinning - Tiamat - 02-10-2016

AH YAY THANK YOU THANK YOU!<333

I do have a question; does the image for the banner have to be as wide as the one you have for Mauja's profile? Or will it work with one that's smaller?

RE: Profile Skinning - Mauja - 02-11-2016

@Reli The banner automatically re-sizes to fit the screen width (it is set to 100% width), so I suggest using one that is at least 2000px+ wide to ensure it doesn't get stretched/pixely on big monitors. For reference, my monitors are both 1920px wide...

OR you just re-write it to center it and not stretch with the monitor size - shrug -

RE: Profile Skinning - Whit - 02-11-2016

WELL I KNOW WHAT I'M DOING THIS WEEKEND LOL

ty Neo :D

RE: Profile Skinning - Rexanna - 02-11-2016

NEO YOU ARE AMAZING <3333

RE: Profile Skinning - ChaoticMelodies - 02-11-2016

BLESS YOU, NEO. <333

RE: Profile Skinning - Kiki - 02-21-2016

THIS IS WORTHY OF ANOTHER SHOUT OUT.
thankyousomuch. <333

RE: Profile Skinning - Mauja - 05-26-2016

Updated to include the theme changes. :) Some day I'll update the image to include the new stuff. Done.

RE: Profile Skinning - Toulouse - 08-19-2016

omg thanky thank u thank u thank u

RE: Profile Skinning - Emily - 08-19-2016

Andddd I still dont get it... so f anyone wants to be AMAZING and log in to Brendan and Sansa and do this for them... That would be great...