Rosehill's Graphics Galore - Currently closed!

This forum is for art shops

Moderator: Hall of the Arts Moderators

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

Postby Noodles » April 24th, 2011, 4:25:01 pm

Happy Easter Rosehill!

Thanks for the critique. I will remember that in my future stuff.

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: 5058
Joined: July 14th, 2010, 11:56:24 am
Location: Your Bed
Gender: Male

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

Postby AutumnSolace » April 24th, 2011, 7:39:02 pm

Oh my gosh, they're all so pretty :t-swoon:
I love mine, thank you so much! <3 <3
Edit: Happy Easter, by the way ^_^
Last edited by AutumnSolace on April 24th, 2011, 8:21:44 pm, edited 1 time in total.
to be updated
User avatar
AutumnSolace
CreaturesTrade
MagiStream Donor
Member of Society of the Trident
Posts: 4770
Joined: July 30th, 2009, 7:10:13 am
Location: Oklahoma :U
Gender: Kraken

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

Postby Mnunez2000 » April 24th, 2011, 7:54:27 pm

Happy Easter Rosehill! :D
Please help grow all creatures!
ImageImageImage

Image
User avatar
Mnunez2000
CreaturesTrade
 
Posts: 239
Joined: February 24th, 2011, 6:08:29 pm

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

Postby mzenun » April 24th, 2011, 7:55:22 pm

Oh my gosh!!! I wish I could take one of those signature sets... :smirk:

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

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

Postby Noodles » April 24th, 2011, 8:00:20 pm

mzenun wrote:Oh my gosh!!! I wish I could take one of those signature sets... :smirk:

Hey, there's a bunch of fan-made ones in her fan-guild that you can use.
32-guilds-quarter/106045-rosehill-wannabes-show-off-your-signature-sets.html XD

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: 5058
Joined: July 14th, 2010, 11:56:24 am
Location: Your Bed
Gender: Male

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

Postby mzenun » April 24th, 2011, 8:01:28 pm

Yay! :hooray: *runs to guild pushing and shoving nearby innocents*

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

Re: Rosehill's Graphics Galore - sig set tutorial up!

Postby Zackeline » April 24th, 2011, 11:06:49 pm



They're so beautiful! <3 Thank you so much Rosehill! :t-glomp:

Image
ImageImageImageImage
Will only pops in and out randomly...
Click plox?
ImageImageImageImageImageImageImageImageImage
User avatar
Zackeline
CreaturesTrade
 
Posts: 2772
Joined: July 11th, 2010, 12:25:02 am
Location: Relaxing under the cherry blossom trees with my fellow Guardians
Gender: Female

Re: Rosehill's Graphics Galore - sig set tutorial up!

Postby LunatheDragoness » April 25th, 2011, 1:55:31 am

Zackeline wrote:


They're so beautiful! <3 Thank you so much Rosehill! :t-glomp:

thank you so much!!!!! <3
12/25 Gifts
ImageImageImageImageImageImage

WoW GuildMy WishlistTwitter••
User avatar
LunatheDragoness
CreaturesTrade
MagiStream Donor
Member of Society of the Trident
Posts: 6994
Joined: May 12th, 2010, 11:01:09 pm
Location: Halloween Town making Christmas for Jack
Gender: Female

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: 7177
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: 1213
Joined: October 25th, 2009, 7:38:18 pm
Gender: Female

PreviousNext

Return to Seller's Gallery

Who is online

Users browsing this forum: No registered users and 4 guests