Rosehill's Graphics Galore - Currently closed!

This forum is for art shops

Moderator: Hall of the Arts Moderators

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby Rosehill » April 25th, 2011, 12:06:39 pm

No new finished requests this time either, but another tutorial! :smirk:


Profile Customisation Tutorial

Foreword:
There are many ways to customize the profile pages. I'll show the way I do it, but play around, find the way that suits you best. The things you can do with CSS are vast in number so pretty much only your imagination is the limit. This site is a good resource in checking what different kinds of CSS codes do. CSS3 codes also work on most browsers and it provides many cool features that are not available on earlier versions of CSS. The standard of CSS3 isn't yet complete so there might be slight variances how the syntax is made to affect different browsers, though. If you're interested in HTML, PHP, Javascript or a number of different web site techniques the site covers them as well.

In this tutorial I'll be using only CSS codes and images. I also have a really helpful plugin for my Firefox, called the FireBug. It allows me to change the CSS in a small screen under the page and then shows how the changes modify the look of the page in real time. In this way you don't have to save the code in your user control panel and refresh the profile page every time you want to check a small change. The changes made in FireBug are not permanent, the page reverts back to its normal self once you refresh the page. The changes you make in FireBug are only visible to you, so even if I'm messing with my profile on FireBug everyone else visiting my profile page would see the kind of page I've defined in my user control panel.

I will not teach you what each piece of CSS code does. You can dig around the site I linked to and start trying different things and learn that way. It's usually much more efficient than someone else telling you "do this" or "put in this kind of text". ^_^

How to get the CSS to work on your MS profile:
In order to get a CSS to show up on your profile page, go to your user control panel and choose the Profile tab. Scroll down until you find a field labelled "Custom CSS". That is where you will paste the CSS when you're done.

Image
(Link to the image)

PLEASE NOTE!
You should NOT have any html or bbcode formatting on your css. If you see text inside "<" and ">" or inside "[" and "]", take all those off. Adding html or bbcode elements to your css won't do anything except make your css-code look messy (usually they won't affect the look of the web page, though).

==================================================================================

1) Preparation:
I start by desiding a color scheme (either based on the wishes of the person who requested the CSS or if it's a freebie, from the header image to get the page style stay consistent). For the sake of this tutorial I chose my Freebie header "Fudgy Goodness" as the starting point.

2) I open up my profile page, open FireBug, go to CSS tab, choose the css with lots of numbers (it will always start with your user-id and it's always the personal css that the changes are saved to when you post something on your UCP's Custom CSS slot, the others are general and mutual).

Image
(Link to the image)

I click "Edit" and paste my ready-made CSS base structure on it, which modifies the page's layout immediately.
Image
(Link to the image)

You can find the base CSS structure I have used in the past under the spoiler. I've made comment lines to it telling which part does which. So everything you see between "/*" and "*/" does not affect the actual look of the page. If you use it without severe modification, please leave the first comment line intact. I also have a refined version of the base structure code a little further down.

Here's also an image that shows the names of the key elements of a MS profile page and how they are positioned there. (It's a HUGE one, so it's only as a link, as will all other images for the rest of this tutorial.)
Old base structure:

New base strcuture:


3) Putting the actual stuff in!
Now all I need to do is modify the base CSS I pasted on FireBug. (Of course all these changes can be made without FireBug as well! I just like to see immediately what it will look like so I know if I'll haveto change it.) I start by assigning various background colours. Even if I intend to use a picture as a background for some element I like to make the colours match the theme in case the images won't show for some reason (e.g. my workplace has blocked all photobucket images).

These are the changes I made to the background colours at this point:
-from "body" block changed "background-color: white;" to "background-color: #e2dfaf;"
-from "#wrap" block changed the background-color value from "red" to "#866c43"
-from "#page-body" block changed the background-color value from "pink" to "transparent" as I don't want to see that background at all
-from "#page-header .navbar", "#page-footer .navbar" and ".bg2, .bg1" blocks changed the background-color value from "yellow" to "#f7f4b3"
-from ".headerbar" changed the background-color value from "green" to "#c8c691".

All the new colour values were gotten from the header image.

This is what the page looks like at this point. Already much better than the base structure.

4) Next I put in the background images, now that I can rest assured that even if the images aren't showing, the colours match.

These are the changes I made to the "background-image" property of different blocks:
-from "body" block changed "background-image: none !important" to "background-image: url(http://i793.photobucket.com/albums/yy21 ... ts/bg3.png) !important;" (the !important" in the end means that the property defined here will override the default. Some properties are not defined in the default css so they don't need to be overwritten, but some do.)
-to "#wrap" block added the following: "background-image: url(http://i793.photobucket.com/albums/yy21 ... /bg3w2.png);"
-from ".headerbar" block changed the value "none" to "url(http://i793.photobucket.com/albums/yy21 ... eader3.png)"

Here's how it looks after these changes.

5) Now I want to tweak the backgrounds a little bit so I'm going to change the shape and border of the dark brown area (#wrap), modify the border of the headerbar (.headerbar), make the light yellowish content panels a bit transparent (.bg2, .bg1, #page-header .navbar, #page-footer .navbar) and make the spoiler buttons (input.button2) and spoiler boxes (.spoiler) match the theme.

These are changes I made:
a) to "#wrap" block I added these 5 lines:
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: 4px double #362816;
padding: 0px;
The first three make the corners rounded. There are three lines because different browsers need different prefixes with this one. The fourth line makes borders around the area. Because the second word in the code is "double", it makes two solid lines. The last line makes the area a bit more compact and draws it closer to the other panels.

b) in ".headerbar", "#page-header .navbar" and "#page-footer.navbar" block I made these changes:
-added the line "background: rgba(247,244,179,0.7) !important;" to all, to make the panels a bit transparent
-changed ".headerbar"'s "border: 1px solid black;" to "border: 3px double #362816;" and added "border: 3px double #362816;" to the two other blocks.
-added the line "border-top: none;" to the "#page-header .navbar" block to get rid of the border between the navbar and the header bar
-added the line "margin-left: -10px;" to the ".headerbar" block, as giving the panels a border threw the other panels underneath the avatar panel.

c) in block "a.button2:hover, input.button2:hover" changed the line "color: blue !important" to: "color: #362816 !important;". This modifies the spoiler button's hover over colour

d) in block "input.button2" changed the line "border-color: black !important" to "border-color: #362816 !important;" and the line "background-color: brown;" to "background-color: #866c43;". These modify the overall look of the spoiler button.

e) in block ".spoiler .inner" I changed the line "border: 1px solid black !important;" to "border: 1px solid rgba(54,40,22,0.8) !important;" and added the line "background-color: #f7f4b3;". These affect how the opened spoiler is shown.

The look at this point.

6) Now I want to make the headings a bit different as well as change the colour of the links:

a) changed the line "color: red !important;" to "color: #362816 !important;" in blocks "a:link, a:active" and "a:visited"
b) changed the line "color: black !important;" to "color: #7f6034 !important;" in block "a:hover".
c) In "h3" block if changed the line "color: black;" to "color: #362816;" and the line "border-bottom-color: black;" to "border-bottom-color: #362816;" and added the line "text-align: center;"
d) in "h2" block I removed the line "margin-left: 20px;" and added the line "color: rgba(247,244,179,0.7);"
e) I also added:
label
{
color: #362816;
}
to the end of the CSS to make the "Jump to" text more visible.

And that's it! :omg:

Here's the finished layout (the image is fuzzy since photobucket likes to resize the images to their liking... -_-)

And here's the finished CSS with comments: Feel free to take the base CSS or this or any of the freebie CSSs I've posted and play around. ^_^
Official MS Twitter | Official MS Facebook page

Meet Mr. Rufous Scrimgeour -->
User avatar
Rosehill
CreaturesTrade
Coder
Member of The Herbalist's Guild
Posts: 7290
Joined: July 24th, 2009, 4:03:51 am
Location: Northern Europe
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby horsemad21 » April 25th, 2011, 12:09:44 pm

Rosehill, I'd just like to say thank you so much for putting a signature and css tutorial up for people to use. It's appreciated so much :haha:

Image
Image



I love you David Bowie Sensei Sama San KUUUNN! :D


Image
User avatar
horsemad21
CreaturesTrade
MagiStream Donor
Member of The Dark Brotherhood
Posts: 1207
Joined: October 25th, 2009, 7:38:18 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby Chuckeh » April 25th, 2011, 12:10:22 pm

Omg So many of these. I need to know how to make these XD
Presenting.....
The Four Leaves Family

ImageImage

Don't wait! Get your Farir baby now!
Click here to request a baby!
User avatar
Chuckeh
CreaturesTrade
Member of Society of the Trident
Posts: 19761
Joined: November 14th, 2010, 5:26:46 pm
Location: In mah bed c:
Gender: Female

Re: Rosehill's Graphics Galore - 5 requests up!

Postby Kestrad » April 25th, 2011, 12:28:23 pm

Rosehill wrote:
Kestrad wrote::O So pretty!

Rosehill, I've been using the Obsidian Dawn brushes for a long time, but I've never found some of the lovely swirls, leaves, and such that you use (and yes, I do have both the swirls and the foliage swirls brush pack on my computer XD ) Do you vector them yourself?

I have a couple self-made swirl brush packs, but most leaf brushes that I use are from Lileya. She has many really nice ones. ^_^


Wow, those are some really pretty brushes! Thank you so much for the link! :t-glomp:

Kestrad has been eaten by life. She'll probably pop back in occasionally.

ImageImageImageImageImageImageImageImageImage

Keep story | Portal Guild | Graphics Shop
Please do not click my hatchlings. Thank you.
Avatar by Kingsfisher, sig art by herinbon
User avatar
Kestrad
CreaturesTrade
MagiStream Donor
 
Posts: 11480
Joined: October 26th, 2010, 12:57:20 am
Location: Befriending peacock phoenixes
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby Zeilera » April 25th, 2011, 1:55:48 pm

Thank you so much for the CSS tutorial, Rosehill! :t-hugs: It was very helpful :)


ImageImageImageImage

LTB QB Calidis Dragons | Twitter account
.:: Giveaway ::.

"It doesn't matter what you say.
What really matters is the way you say it."
- E.H.

User avatar
Zeilera
CreaturesTrade
MagiStream Donor
Member of Society of the Trident
Posts: 3900
Joined: October 1st, 2009, 8:04:00 am
Location: Finland
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby Chuckeh » April 25th, 2011, 1:58:14 pm

Rosehill I really appreciate the help!
Presenting.....
The Four Leaves Family

ImageImage

Don't wait! Get your Farir baby now!
Click here to request a baby!
User avatar
Chuckeh
CreaturesTrade
Member of Society of the Trident
Posts: 19761
Joined: November 14th, 2010, 5:26:46 pm
Location: In mah bed c:
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby Noodles » April 25th, 2011, 5:52:01 pm

What can I say? <3 They've all said it already.
Image
Last edited by Noodles on May 31st, 2011, 6:34:34 pm, edited 1 time in total.

Image
Image
Thank you...
PaleoMageEzibuttrandomnameHiddenMystic
Tanya9771beckyh2112P3PPYc0rnRilian
KetrillascreamyourselftinnidawgKyrare
GwinniFinlandiaBreAngelWolfwing
...for making Christmas a dream come true!

Image
User avatar
Noodles
CreaturesTrade
Member of The Herbalist's Guild
Posts: 5055
Joined: July 14th, 2010, 11:56:24 am
Location: Your Bed
Gender: Male

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby SeaCrest » April 25th, 2011, 6:38:31 pm

maginoodlesyum wrote:What can I say? <3 They've all said it already.


This.
Image
User avatar
SeaCrest
CreaturesTrade
 
Posts: 8606
Joined: June 12th, 2009, 9:34:16 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby seraphin » April 26th, 2011, 12:17:29 pm

Haha~
Sudden boom in numbers of siggies thanks to your tutorial. XD
~ July 25th creatures & Donis wanted ~

Trading for bred Hybrids, Shops, Events, Quests with creatures from here too
PM your offers.

Collection purpose.
User avatar
seraphin
CreaturesTrade
 
Posts: 1828
Joined: March 10th, 2011, 9:07:58 am
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Postby mzenun » April 26th, 2011, 3:26:22 pm

I can't make them cuz I'm terrible that stuff. T_T But I instantly fell in love with SeaCrest's kitty! :t-swoon:

Image
Amazing Art by Hanako!

Image
Thanks SO much, Merkwerkee, for the tienko gift! :t-swoon:

School is before Magistream:(

Image
User avatar
mzenun
CreaturesTrade
 
Posts: 2370
Joined: February 21st, 2011, 6:10:33 pm
Gender: Female

PreviousNext

Return to Seller's Gallery

Who is online

Users browsing this forum: No registered users and 2 guests