|
|
|
|
|
|
|
|
|
 Posted: Thu Nov 10, 2005 2:28 am
I can't find anywhere that the admins have announced it officially... but the new Extended Profiles now allow you to customise your profile page with CSS! 4laugh This is the first one I've seen, and it's a pretty good example of what kind of thing can be acheived.
To customise your page, click Edit Profile > Edit Profile Settings (beta) > Theme, and enter your CSS into the space provided.
I love playing with CSS, so this is really exciting! I hope they end up doing something similar with the journals. I haven't decided how I want mine to look yet, but it'll be something fun to okay with once my exams are over *geek*
Show your completed profile page here if you do one! Uni work has prevented me from being active in this guild for a while, but now that's nearly over I'll try put up a basic CSS guide specific to the Profile pages for those who haven't had much experience with it. Post any issues you might have here and I'll help out if I can; I think there's quite a few other experienced guild members around who would be able to give some help too wink
I love the admins crying heart Some Useful LinksGaia Specific
Lord-of-the-flies' Tutorial
Kahime's Tutorial
Tektek.org Themese Database
Useful Tools
Web Developer Extension (Firefox only) - adds a toolbar to your browser with quick links to page source code, debugging features and most useful for these profiles the 'Edit CSS' function which opens in a window on the left of your browser, and allows you to edit CSS and see it applied directly to the page as you change it. Make sure you choose 'Inline Styles' to make sure you're editing the right styles.
ColorZilla (Firefox only) - installs a little eye dropper in your browser, which is useful for finding the hex, RGB and CMYK values of colours in anything that is displayed in the browser.
Noteworthy Profiles
Lull - pretty colours, consistent theme, clean and professional.
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Thu Nov 10, 2005 2:37 am
And now that I think of it... I wonder if there'll be a market for 'Profile Stylers' or something now?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Thu Nov 10, 2005 3:25 am
Ooh ooh another thing (sorry, I get excited about these things...) - from discussion I've seen, this is really encouraging people to go out and learn CSS, which is fantastic. The down side of that is that people with terrible judgement can now make their profile pages as horrible and unusable as they like xp
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Thu Nov 10, 2005 6:13 am
Oh neato!!! That's exciting!! I like that example; very neat and clean. Sonic is fun. Hehe.
I will have to play with this too when I get some time. biggrin
Thanks Chisa!! I don't think I would have noticed that for awhile... not too observant sometimes. wink
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Nov 11, 2005 4:30 pm
Err...is there any place we can learn about css?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Nov 11, 2005 6:19 pm
If you want to just start out with the CSS specific to the Gaia profiles, there's some tutorials/references users have made here and here.
If you want to start from a premade profile and work from there (or just use a premade profile...) there's the TekTek Themes Database.
I don't have any tutorials on CSS handy, but I'll look up a few later 3nodding
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Nov 11, 2005 7:52 pm
Added some useful links to the front page, I'll look up some proper CSS tutorials later...
Ooh, and my profile is pretty much finished now, if anyone wants to give their opinion whee
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Nov 11, 2005 10:45 pm
Chisa Added some useful links to the front page, I'll look up some proper CSS tutorials later... Ooh, and my profile is pretty much finished now, if anyone wants to give their opinion whee O.O Like, wow, thats awesome! Could you show us the source code and explain it step by step how you did it?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Nov 11, 2005 11:23 pm
Sure ^_^ I have an exam to study for at the moment, but I'll take a break and try explaining it in a bit.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sat Nov 12, 2005 1:23 am
Okay I was asked by a few people to explain my code, so hopefully people will find this useful ^_^ Feel free to use any code from my profile theme, but please do not use any of the images.
A few definitions first...
Basics
CSS 'rules' can be applied to different HTML tags to change the way they appear. Besides the basic HTML tags, you can also specify an id (using 'id=...') for specific sections, and a class (using 'class=...') for different sections that share some things about the way they're displayed. Any tag can have an id, a class or both, so if you look in the HTML code for the Profile page, you might see something like this:
That means that that section of code has an id of 'about' and is part of the 'section' class.
We can't edit the HTML for the profile pages, but its still good to know so the CSS makes sense 3nodding
Now, to specify styles for a tag in CSS, you'd write:
(TAGNAME) {
(styles here)
}
If its an id you'd add a hash to the front: #(TAGNAME) {
(styles here)
}
And if its a class you'd add a dot to the front:.(TAGNAME) {
(styles here)
}
Each style rule should go on a new line, and must end with a semi-colon.
So, onto the real code.
Content
The 'content' section is everything under the navigation down to before the footer; its the main content of the page.
#content {
background: #96BFAE url(http://tinyurl.com/8ysy3) bottom left no-repeat;
}
This changes the background of the whole Content section. The first value changes the background colour, the second puts an image onto the background, 'bottom left' says where on the page the image should go, and 'no-repeat' stops it from tiling.
#content a {
color: #592F0F;
text-decoration: none;
}
#content a:hover {
color: #2B7669;
text-decoration: underline;
}
This part changes all links ( tags) within the Content section. The first part sets the text colour and turns off the default underlines. The second part changes what colour the text displays as when the mouse is hovering over it, and turns on an underline.
Section (general)
'Section' is a class used for all the main sections in the profile; this means that the About, Comments, etc boxes will be affected by this bit of code.
.section {
border: 0px 1px 1px 1px;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
}
.section h2 {
font-size:0px;
height: 83px;
}
The first part affects sections in general. Looking at it bit by bit:
border: 0px 1px 1px 1px;
... sets the border widths for all sections. The first value is for the top border, second is for the left, third is right, fourth is bottom. You can set different widths this way; I've just set the top one to 0 so it doesn't appear at all, with 1px borders on all other sides.
font-size: 11px;
... changes the font size for all text within a section.
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
These bits I just added in so all my things line up properly... 'margin' is the space outside of an object, and 'padding' is the lining inside an object. I've set the top padding to 0 so my headings sit at the top of each section.
.section h2 {
font-size:0px;
height: 83px;
}
The tag is around all the headings of the sections. I've made my own headings and don't want these in there, so I've set the font-size to 0. I have put background on them though, so I've set the height to the height of my background images so they don't get cut off.
Profile
Okay, onto the specific sections. If you want the borders, backgrounds, headings etc. to appear the same in each section you can just specify everything in the general section part, but I have different headings for each of mine so I do them all separately.
#profile {
background: #D6E8E2 url(http://i4.photobucket.com/albums/y101/chisathechi/profile/chisa_bg.jpg) top left no-repeat;
border-color: #b4a393;
}
#profile h2 {
background: url(http://tinyurl.com/949pq) top left no-repeat;
}
This is the basic parts for my Profile section (the part with your own avatar and items). In the first part I've put on a background colour and image like before, and chosen a background colour.
The second part changes how the tag is displayed, which is at the top of the section. I'm using an image I created as a heading, so I've specified it as the background. Image headings for the left hand column sections need to be less than 230px wide.
#profile .caption {
display: none;
}
Still in the Profile section... this pertains to anything with a class 'caption' withing the 'profile' section, which is the speech bubble with my quote. I don't want it to appear at all, so I've set it to display: none. You can do this with any section you don't want to appear on the screen.
#profile ul {
background-color: #E7F3EF;
padding: 2px;
border: 3px double #96BFAF;
}
This part pertains to any unordered-list tags (ul) in the profile section, which in this case is the items I'm currently wearing, displayed under my avatar. Just changed the background and padding, and added a border. 'double' makes it a double border; 'single' would make it a single solid border, and 'dotted' would make a dotten border.
Details
#details{
border-color: #b4a393;
color: #2B7669;
background: #EFF6F4 url(http://tinyurl.com/86bjt) bottom left no-repeat;
}
#details h2 {
background: url(http://tinyurl.com/8d4d3) top left no-repeat;
}
Pretty much the same as for Profile, but also changed the colour of the text using:
color: #2B7669;
Wishlist
#wishlist{
border-color: #b4a393;
background: #EFF6F4 url(http://tinyurl.com/86bjt) bottom left no-repeat;
}
#wishlist h2 {
background: url(http://tinyurl.com/86xah) top left no-repeat;
}
Same as for Profile, different header image.
About
#about {
background-color: #EFF6F4;
border-color: #b4a393;
background: #EFF6F4 url(http://i4.photobucket.com/albums/y101/chisathechi/profile/about_bg.jpg) top right no-repeat;
}
#about h2 {
background: url(http://tinyurl.com/e2wst) top left no-repeat;
}
Same as Details, different header image.
Friends
#friends {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#friends h2 {
background: url(http://tinyurl.com/89gw8) top left no-repeat;
}
Same as the other sections, different header image.
#friends #friendGroup li {
border-right: 1px dotted #b4a393;
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/friends_bg.jpg') bottom center no-repeat;
}
Changes how the avatars in the Friends section appear. I've put a dotted border on the right of each one which acts as a divider, and put a graphic behind each avatar.
Journal
#journal {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#journal h2 {
background: url(http://tinyurl.com/c8qut) top left no-repeat;
}
Same as for the other sections
#journal h3 {
display: none;
}
This is for the name of your journal. I don't want mine to appear, so I 'disappeared' it with display: none;
#journal p {
margin-top: 10px;
text-align:center;
}[/code:1]
This is for the description of your journal. I found it too close to my journal image, so I moved it down a little by making margin-top larger, and made the text center aligned.
[code:1]#journal ul {
padding-top: 15px;
margin-left: 25px;
}
The list of your most recent journal articles. Just added some space around it with padding and margins.
#journal li {
padding-bottom: 5px;
list-style-type: circle;
}
Each item in the list of your most recent journal entries. The padding-bottom spaces them out a bit more, and the list-style-type puts the little circle in front of each one. Instead of circle you could make it square, disc, or none, which is the current default.
Comments
#comments {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#comments h2 {
background: url(http://tinyurl.com/dfutz) top left no-repeat;
}
Same as the others again.
#comments dl dt.avatar img {
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/av_bg.jpg') left no-repeat;
padding-left: 3px;
margin-bottom: 2px;
}
#comments dl dt.avatar2 img
{
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/av_bg2.jpg') bottom right no-repeat;
_margin-right: 20px;
margin-bottom: 2px;
}
This is for the avatars of people who make comments on your page. The first bit is for avatars on the left, the second for avatars on the right. I've put an image behind them, and used margins and padding to position them where I want them to be.
This:_margin-right: 20px; ... is an IE hack, meaning its a style only read by Internet Explorer. It's useful because different browsers display CSS differently. In IE my right avatars where shifted too far to the right, so I added a margin to shift them back. If you want something to only work in IE, just put an underscore at the front of it.
Signature#signature {
background-color: #EFF6F4;
border-color: #b4a393;
}
#signature h2 {
background: url(http://tinyurl.com/c55jx) top left no-repeat;
}
Same again.
Captions (aka speech bubbles)
The 'caption' class is used for all speech bubbles in the page, such as the ones in the Comments section. You need to specify styles for the left and right hand captions separately.
.caption {
border: 1px solid #b4a393;
}
.caption2 {
border: 1px solid #96BFAF
}
I didn't like the chunky grey border, so this changes it to a 1px border. I've used different colours for the left and right captions.
.caption:before {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_tl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_tr.gif) top right no-repeat;
}
.caption2:before {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_tl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_tr.gif) top right no-repeat;
} This changes the top of the caption. If you want rounded borders, make the images and put the top left one in the first url, an top right in the second. If you're happy with the hard corners, just leave the url blank ( url() ), to get rid of the default Gaia corners.
.caption:after {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_br.gif) bottom right no-repeat;
}
.caption2:after {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_bl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_br.gif) bottom right no-repeat;
}
Same thing, but for the bottom corners. Left first, then right.
.caption .message {
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bubbles.gif) top left no-repeat;
font-size: 11px;
}
.caption2 .message {
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bubbles2.gif) top right no-repeat;
font-size: 11px;
} This is the little pointer bit on the speech bubble. Just change the url to your own image.
The Full Code
So here's my finished product! If you're using this to work on, please take out the links to my images when you put it up so it doesn't take up my bandwidth ~_~ Thankyou!/* custom layout made by Chisa. Feel free to take any code, just don't take my images ^_^ */
/* CONTENT -------- */
/* styles for the content dive (around all the other sections) */
#content a {
color: #592F0F;
font-size: 11px;
text-decoration: none;
}
#content a:hover {
color: #2B7669;
text-decoration: underline;
}
#content {
background: #96BFAE url(http://tinyurl.com/8ysy3) bottom left no-repeat;
color: #2B7669;
}
/* SECTION ------ */
/* styles across all sections */
.section {
border: 0px 1px 1px 1px;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
}
.section h2 {
font-size:0px;
height: 83px;
text-indent: -3000px;
}
/* PROFILE --------- */
/* styles for the Profile section */
#profile {
background: #D6E8E2 url(http://i4.photobucket.com/albums/y101/chisathechi/profile/chisa_bg.jpg) top left no-repeat;
border-color: #b4a393;
}
#profile h2 {
background: url(http://tinyurl.com/949pq) top left no-repeat;
}
/* don't display speech bubble */
#profile .caption {
display: none;
}
/* current items list */
#profile ul {
background-color: #E7F3EF;
padding: 2px;
border: 3px double #96BFAF;
}
/* DETAILS --------- */
/* styles for the Details section */
#details{
border-color: #b4a393;
color: #2B7669;
background: #EFF6F4 url(http://tinyurl.com/86bjt) bottom left no-repeat;
}
#details h2 {
background: url(http://tinyurl.com/8d4d3) top left no-repeat;
}
/* WISHLIST --------- */
/* styles for the Wishlist section */
#wishlist{
border-color: #b4a393;
background: #EFF6F4 url(http://tinyurl.com/86bjt) bottom left no-repeat;
}
#wishlist h2 {
background: url(http://tinyurl.com/86xah) top left no-repeat;
}
/* ABOUT ------------ */
/* styles for the About section */
#about {
background-color: #EFF6F4;
border-color: #b4a393;
background: #EFF6F4 url(http://i4.photobucket.com/albums/y101/chisathechi/profile/about_bg.jpg) top right no-repeat;
}
#about h2 {
background: url(http://tinyurl.com/e2wst) top left no-repeat;
}
/* FRIENDS ---------- */
/* styles for the Friends section */
#friends {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#friends h2 {
background: url(http://tinyurl.com/89gw8) top left no-repeat;
}
/* avatars */
#friends #friendGroup li {
border-right: 1px dotted #b4a393;
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/friends_bg.jpg') bottom center no-repeat;
}
/* JOURNAL ---------- */
/* styles for the Journal section */
#journal {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#journal h2 {
background: url(http://tinyurl.com/c8qut) top left no-repeat;
}
#journal h3 {
display: none;
}
#journal p {
margin-top: 10px;
text-align:center;
}
#journal ul {
padding-top: 15px;
margin-left: 25px;
}
#journal li {
padding-bottom: 5px;
list-style-type: circle;
}
/* COMMENTS ---------- */
/* styles for the Comments section */
#comments {
background-color: #EFF6F4;
border-color: #b4a393;
font-size: 11px;
}
#comments h2 {
background: url(http://tinyurl.com/dfutz) top left no-repeat;
}
/* avatars */
#comments dl dt.avatar img {
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/av_bg.jpg') left no-repeat;
padding-left: 3px;
margin-bottom: 2px;
}
#comments dl dt.avatar2 img
{
background: url('http://i4.photobucket.com/albums/y101/chisathechi/profile/av_bg2.jpg') bottom right no-repeat;
_margin-right: 20px;
margin-bottom: 2px;
}
/* SIGNATURE ---------- */
/* styles for the Signature section */
#signature {
background-color: #EFF6F4;
border-color: #b4a393;
}
#signature h2 {
background: url(http://tinyurl.com/c55jx) top left no-repeat;
}
/* CAPTIONS ---------- */
/* styles for all speech bubbles (in Comments section) */
.caption {
font-size: 11px;
border: 1px solid #b4a393;
}
.caption2 {
border: 1px solid #96BFAF
}
.caption:before {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_tl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_tr.gif) top right no-repeat;
}
.caption:after {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_br.gif) bottom right no-repeat;
}
.caption2:before {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_tl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_tr.gif) top right no-repeat;
}
.caption2:after {
content: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_bl.gif)
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption2_br.gif) bottom right no-repeat;
}
.caption .message {
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bubbles.gif) top left no-repeat;
font-size: 11px;
}
.caption2 .message {
background: url(http://i4.photobucket.com/albums/y101/chisathechi/profile/caption_bubbles2.gif) top right no-repeat;
font-size: 11px;
}
Things not in my Theme
There are some things I haven't changed (yet), but can still be done.
top header
navigation
footer
body background
Thats it! Have fun, and don't forget to experiment!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sat Nov 12, 2005 1:43 am
Thanks, bunches! I'll get to work on making the stuff for my err...stuff, in photoshop! xd Though I don't quite know what expei is... neutral
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sat Nov 12, 2005 1:55 am
Koiyuki Thanks, bunches! I'll get to work on making the stuff for my err...stuff, in photoshop! xd Though I don't quite know what expei is... neutral I meant 'experiment', but if I edit the code it would stuff up all the [ code ] tags, and I can't bothered fixing them.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sat Nov 12, 2005 7:57 pm
There's been one main thing I've been wondering. How possible would it be to use [removed] for random themes?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sun Nov 13, 2005 4:53 am
M i c h There's been one main thing I've been wondering. How possible would it be to use [removed] for random themes? Err...you say themes? As in THE ENTIRE THEME!? eek eek eek Err...that would tkae a lot of coding, I'm sure...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Sun Nov 13, 2005 5:52 am
M i c h There's been one main thing I've been wondering. How possible would it be to use [removed] for random themes? I've been wondering that too, but haven't tried it out yet. I guess its not really necessary unless they restrict how many characters you can put in your theme. I heard someone saying it was 750 characters, but I'm pretty sure I have a lot more than that. @Koi: It would be exactly the same as the custom themes you put in the themes box, but in a separate file uploaded to your own server, and linked in there 3nodding Doesn't take any more coding than what you need currently, other than the line to export it.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Reply
