W.D.H.::Links::Tips::Step by step:: | Page 1 | CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints) | Guild Forums

Sezebel

Offline

Posted: Mon Apr 03, 2006 4:06 pm

W.D.H. = Web Desginer help.

Sezebel needs help on creating her first profile ever. I've been through some threads here and noticed they weren't too helpful for my situation. Let me explain it actually:

(1)I want to create a profile where my comments are the right side of my profile - Like so. A patch(quilt) section in my profile as well, underneath my 'details' box - like so v2.

(2) Then I want to produce my own header - like so V3. Unfortunately I do not know the demensions of the orginal Gaia Header.
While I am also looking for help on these subjects as well:

- Background.
*When I put in the background code I still get the white square where my avatar is. How do I fix that?
- Font.
*I want my own font: Verenda.
- Background squares for my list of friends. Like so V4.
- How to change my 'details' , 'wishlist' , 'about' etc.
*For my 'username' , 'details' , [quilt] , 'Wishlist' I want them to be together -like so V5.

exclaim The examples I've used are from my friends or from people I've talked to about this already.

arrow I also used the tutorial for CSS here. I didn't find it too helpful.

I also need to find a CSS program. If anyone can refer me to one it would be great. Or can I use notepad?

Any help working on my profile with me would be much appreciated until I can get a handle on it by my own. I'll tip someone if they are willing to help me out with the layout and coding. *bribes* ninja

Posted: Fri Apr 07, 2006 9:00 am

01a.
For the look of the comments, you'll want to read this thread. That will help you with the comment boxes and the corners of the boxes. For the inside information, you'll need to edit these pieces:

p (The date/time line is one paragraph (p) and the name line is another paragraph; what you do to just p will be done to both those lines unless you specifically edit the same properties of the date/line paragraph (listed next). Then it will only apply to the name line.)

p.date (specific line with comment's date/time)

ul.admin li (the "delete comment" image)

Any changes you want specifically made to the comment text is done to .message.

01b.
This sticky will help you make a custom section for your quilt piece. You'll want to read through the whole thing. There's a lot of useful information in it.

Now, for moving both of those sections, you have two options: relative positioning and absolute positioning. To understand the difference, think of it like this: Your profile is a table and each of the sections is a picture frame laying on that table with the content being a picture inside the frame. When you use relative positioning, your frame is staying put while the picture moves around. Using absolute positioning means you're taking the frame and moving both it and the picture, while all the other pictures are moved up to take its place.

Which one you use is up to guessing and experience. I'd recommend using absolute positioning for both, but you'll want to just test it out and see which works best.

#[section] {position: absolute; top: 0px; left: 0px; }
#[section] {position: relative; top: 0px; left: 0px; }

02.
Gaian Header: 760px wide by 150px high
The width is pretty much fixed, but you can change the height to whatever you want:
#extendedProfileBody #header h1 {height: __px; }

The Rest.
#profile {background-color: transparent; }

.section {font-family: verdana; font-size: __px; }
You'll have to specify the font for each of the comments, too, but you can do that with the codes above.

#friends #friendGroup img {background: url(IMAGE URL) #______; }
The friends avatars are 96px by 96px.

For changing "details", "whishlist", "about", etc. do you mean changing the text or changing the sections?

#main #sidebar {background: url(IMAGE URL) #______; } will get your profile/details/quilt/wishlist sections to look like one.

There are two tutorials that I've found that look pretty comprehensive. You might give them a look through and see if they can be of help:
Kira Catgirl
Lord Oni-mushu

I can also point you to some other websites around the web that might help as well, if you're interested.

I haven't personally used them since I already knew CSS, but a lot of people seem to find them useful. Looking around the PD (where those are located) might be a good idea, too. I've seen several other tutorial threads.

As for CSS programs, notepad will work fine. That's what I use.

Ava R.
Crew

3,500 Points

50
100
200

Offline

Rising King of Shojo

Offline

Posted: Mon May 08, 2006 6:14 pm

I believe it is .message .date.

Here is what I use to add Posted on before my dates:

Quote:

.message .date:before {content: "Posted on ";}

Edit:: the .date is the paragraph tag.

Alternately, you can use.

Quote:

.message p a:before, .message p a:after {content: '"';color:inherit }
.date:before {content:"what you want before the date"}
.date:after {content:"what you want after the date"}

Adds quotation marks to your Commentors.

And:

Quote:

.message p a[href$="user_ID_number"]:after {content: 'Title after the Commentors name"';color:inherit;}

Adds a specific title to a commentor of that specific user ID.

Welcome to Gaia! ::

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Quick Reply

More Information