ELFQUEST
FORUM ARCHIVE     ABOUT EQ     READ ONLINE     SHOP    
ABOUT     READ     SHOP    

Profile Design Q/A

ChristinaRaibert

Inspired by RedheadEmber's request, I thought to organize a Q/A page with the answers to the most common questions that arise when you want to customize your Profile page but don't really know how :) Hopefully this can help you bring life and personality in your profiles! :)

Q - Okay, you said I can have a personalized profile - how do I change the background color?

A - Just copy and paste the following in your profile area.

bla bla bla


Here you find a list of colors names and hexadecimal numbers - you can use either number or name and it'll work the exact same way :) replace




Q - I have put up text and images in my profile page. I'd like the text to wrap around the pictures though, how can I do it?

A - You need to modify your picture tag like this;

bla bla bla


This will result in an image aligned to the left with a nice padding (blank space between the picture and the text) of 10 px - of course you can set it to whatever number looks best for your page! To align the picture at right, all you have to do is swap align="left" with align="right. Ta-da! :)




Q - I'd like to have a separate section of the profile with the content that scrolls on its own. Can I do so?

A - Sure, with divs. To get your text to scroll on its own, independently from the height of the page, you need a div with a set height - and, of course, your text must be larger than the height parameter. Let's take an example height of 640px;

bla bla bla


If you copy and paste the following as it is on your profile page, you'll see that the text does not scroll, because the text is nowhere near long enough. But try generating some random lorem ipsum paragraphs or put many images in your page, and it'll scroll alright! :D

One important point is that everything you want to scroll on its own must be enclosed between the two < div > tags. Anything written out of the end tag < /div > will not scroll.

Of course you can nest more divs within each other, for example if...




Q - I want to have a larger colored background area behind the content that scrolls, how do I do it?

A - For that you need a first, larger div that contains the div with overflow=auto within itself. These are called nested divs - a div within another div - think like a matrioska. You'll also need both divs to have padding to make sure there's some distance between the div that scrolls and the colored one.

bla bla bla


What is really important is that for how many divs you open, there's as many end tags < /div >.




Q - Can I add a border to my colored divs?

A - Certainly! There's several kinds of border styles available, and you can also vary the width of the border itself. But first, let's have a look at the basic structure.

bla bla bla


As you can see the border's attributes are size (you can put in any other value than just 1px), style (the available styles are solid, dotted, slashed, groove, ridge, double, outset and inset, I'll explain what the various differences are in a minute) and color; just as with the div itself, you can change the color value to any name or hexadecimal color of your liking. What's important is that you add absolutely NO punctuation mark between the colon and the semicolon; those are all attributes of "border" and to add any mark between them won't make it work.

Now, as for borders style! Like I said, there's many to chose from, and they all get a different visual effect. In the specific case...
- solid - this is your normal colored border.
- dotted - self-obvious
- slashed - again, self-obvious. DOES NOT WORK
- groove - this effect gets a 3D-looking border. DOES NOT WORK
- double - two thin parallel borders, instead of just one.
- ridge - this can be used in place of groove and gives a 3D ridge to your border.
- outset - this effect makes the border look like a "beveled button".
- inset - this effect makes the border look like a "pushed button".

Save for slashed and groove they all work on the current profiles setup, and you can use the one you prefer for your div borders.




Q - Why my borders don't have rounded corners?

A - To get rounded corners, you need add one more parameter to your div. It's called border-radius.



Here, too, you can vary the input value. Lower values will result in "sharp" borders whereas the higher your value is, the rounder your border will be.

One important note about div with rounded corners is that you can't write directly in them, as border-radius does not apply to text - so you'd have your words get out of the border and that doesn't look nice. You can get around the trouble by nesting a second div between the two div tags (see above). Remember - you must always consider the corners radius when setting the height of the nested div. In general it has to be smaller than the div with the rounded corners, so much so that the text does not get in the border's way at all.

In my profile, for example, I had the colored div in the background set to height=150px, border-radius=30px and a padding of 13px, while the nested div with the overflow attribute (that allows scrolling) is only 460px height and has 6px padding.




Q - Can I combine a fancy border style with the rounded corners, will they still work?

Positive! I've tried it out for you and it works like a wonder. The only two styles you can't use, neither with normal nor with round corners, are slashed and groove.




Q - How can I have colored texts on my page?

There's two ways to go about this, depending on whether you want the entire paragraph to be colored, or just some parts of it.

To color a paragraph you must once more resort to divs. For example, if you wanted an electric blue text, you'd have to write;

bla bla bla


Just as with the background-color attribute you can use color names as well as hexadecimal codes (see above). This will color all the text contained between the tags < div > and < /div >. If you want contiguous paragraph to be all of the same color, or a different color each, you must apply the same parameters for each div, eventually varying the "color" value as you see fit.

Now suppose you have your blue "bla bla bla" text, and want the middle bla to be yellow? You can do so with the < span > tag.

bla bla bla


The difference between div and span is that each time you close a div, you end a paragraph and start a new line. Span, instead, allows you to tinker with parts of an ongoing paragraph, without altering the look and feel of the paragraph itself. Better yet, you can also change the font size and appearance along with the color! Nifty huh? :) I've put up an example here where you can see both divs and spans at work - on the right bottom part of the screen.

Remember, though - you can only use colored texts in profiles pages. CSS styling won't work in the forum itself.




More to come! Have a specific question that's not answered? Ask away! :)

And if you still have a difficult time, you can PM me with the content you want on your profile (text, pictures) and describe the overall result you're aiming for, and I'll happily do the coding work and send it for you to just copy and paste within your page :)

Embala

Great idea, Christina! *clap* I must try this someday ... after Easter ^^

ChristinaRaibert

@Embala

Can't wait to see what you'll come up with! :)

(little OT: Easter... *_* *starts jumping up and down in anticipation for egg hunt* :D)

Beryl

This is great!
Thank you for the help
Can you tell us how to make the text colored?

Beryl

Removed

ChristinaRaibert

@Beryl - http://elfquest.com/forums/discussion/8140/profile-design-qa/p1#coloredtext There you go! :)

Beryl

@ChristinaRaibert Thank you :)