the Rift


Code Profile Skinning

Neo the Blood Mage Posts: 2
Master of the Universe
Gelding :: Pegasus :: 167 cm :: 24
Neo
#1
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; }

Volterra the Indomitable Posts: 785
Dragon's Throat Sultan atk: 8.5 | def: 11.5 | dam: 8.5
Stallion :: Equine :: 17'2hh :: 3 HP: 80 | Buff: SENSE
Vérzés :: Common Red Dragon :: Frost Breath & Toxic Breath & Vadir :: Royal Gold Dragon :: Fire Breath & Shock Breath Snow
#2
YOU ARE THE BEST

SERIOUSLY THE BEST <3333

[ you can't stray from what you are, you're the closest thing to hell i've seen so far  ]
[ use of force/magic on him is permitted aside from death/maiming ]



Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#3
angels, they fell first, but I'm still here

Tiamat the Ocean's Light Posts: 360
Aurora Basin Lady atk: 8 | def: 10 | dam: 3
Mare :: Unicorn :: 15.2 :: 6 years HP: 60 | Buff: NOVICE
Nimue :: Common Orca Leviathan :: Boil Reli
#4
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?
please tag Tia in all replies!
magic & force are permitted.
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#5
@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 -
angels, they fell first, but I'm still here

Whit Posts: 2
OOC Account
Filly :: Other :: 5'7" :: 28
Whit
#6
WELL I KNOW WHAT I'M DOING THIS WEEKEND LOL

ty Neo :D

Rexanna Posts: 499
World's Edge Mare atk: 4.5 | def: 8.0 | dam: 5.5
Mare :: Unicorn :: 15hh :: 7 years HP: 61.5 | Buff: NOVICE
Marembo :: Marbled Polecat :: None Skylark
#7
NEO YOU ARE AMAZING <3333
[Image: lovelyskylark.gif?8]
Permission given for moderate power play.
Feel free to use magic/force on Rexanna, without killing her.
Please tag in every post!

ChaoticMelodies Posts: 0
OOC Account
Mare :: Other :: 16.2 hh :: 23 years
ChaoticMelodies
#8
BLESS YOU, NEO. <333

Kiki Posts: 0
OOC Account
Mare :: Other :: 5.3 :: a lady never tells
Kiki
#9
THIS IS WORTHY OF ANOTHER SHOUT OUT.
thankyousomuch. <333

-- Orlando Strong --
Ascended Helovian

Mauja the Frozen Light Posts: 1,392
Outcast atk: 6.5 | def: 10.5 | dam: 7.5
Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
#10
Updated to include the theme changes. :) Some day I'll update the image to include the new stuff. Done.
angels, they fell first, but I'm still here

Toulouse Posts: 146
Aurora Basin Impersonator atk: 8.0 | def: 11.0 | dam: 4.0
Gelding :: Equine :: 17hh :: Six HP: 74 | Buff: ENDURE
Boomslang :: Green Ratsnake :: Paralyze Neverrmind
#11
omg thanky thank u thank u thank u
I AM THE KEY TO THE LOCK IN YOUR HOUSE—
DO NOT CRY OUT OR HIT THE ALARM
YOU KNOW WE'RE FRIEND TIL WE DIE—

EITHER WAY YOU TURN, I'LL BE THERE
OPEN UP YOUR SKULL, I'LL BE THERE
CLIMBING UP THE WALLS

SO LOCK THE KIDS UP SAFE TONIGHT
CLOSE THE EYES IN THE CUPBOARD

Emily Posts: 0
OOC Account
Mare :: Other :: 5'6" :: 25
Emily
#12
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...


Forum Jump:


RPGfix Equi-venture