Remove this ad

avatar

RawSheed

Registered Member

Posts: 14,773

Lead

Jun 17 06 9:56 PM

Tags : :

Mods, Admins, sticky if you want/need to! Let's keep questions and discussion in this thread too, either that or you can copy all this to FL Balla's original FAQ thread, it doesn't really matter.

Not to be confused CSS stands for CASCADING STYLE SHEETS, which basically alter the way a web page is layed out visually. Instead of typing font color=red over and over again, you can just set up a CSS and that will affect the whole page. It's all a part of HTML. I'm sure there's other HTML experts there so they can add their knowledge too.

Ok, it's all simple. Just follow the screenshots and type in the neccessary codes you see.

1. First thing what I did was that I copied the "Basic Skin" to MY PROFILE SKINS since this is probably going to give you the most flexiblity when designing your profile.


2. Then click on "My profile skins" and click on the edit button.


3. Okay, let's put up a banner. This is the picture of me (sharkboy) and Mickey on my profile. You should make a banner in photoshop or find whatever image you please.

a) Add the "align=center" to make your image centered.

b) When you're first dealing with the Basic Skin, you'll see the H1 tag and MY PROFILE in between the tags. H1 simnply is a header tag, which is basically large font. You can choose to leave that there and simply type whatever you want it to say, or, you can delete the H1 tags and put a picture up instead. Use the HTML img code <img src="addressofyourpicturehere.jpg" border="1"> The border part simply just adds a pixelated black border if you want it to look clean. If you don't want a border, just change the value to 0.

c) the line break tag is the same thing as when you press enter on a Word document, just space. it's <br><br>

d) I haven't messed with the footer yet but do whatever you please; same principles should apply down here.


4. Here's where you change the font color. Pretty self explanatory I hope. notice the FFFFFF code, that's the color white. Just search HTML color code chart.


5. Here's where you can change the colors of the links. Again, pretty self explantory. Notice the "text-decoration: none" tag, that will remove the underline in your links. The "font-weight: bold" tag will change my link from normal letters to BOLD letters when the m ouse is hovered over the link, because it's under the hover link. Read the little descriptions people, those HELP A LOT.


6. Okay, here's the 'bread and butter' of the thread. If you guys just want to change the background COLORS, just change the colors with the color code chart. If you want images, just use the codes that are seen with whatever image you please. I chose images that looked nice when REPEATED cause the CSS will repeat your images. Kind of like tiles. If you DON'T want repeated images, just search on google CSS background properties and you'll get tons of stuff. For example: "{ background-repeat: no-repeat; background-image: url(yourimage.jpg) }", which won't make your image like a tile. There's tons of different options you can mess with.

Look further down the skin and you'll find the options for tables. Same principles apply, feel free to do whatever you want. Get creative! I actually got the transparency properties from MySpace's editor, here's the link: mySpace editor


Alright, I hope that helps, basically if you can do that you guys have the ability build your own web pages. Also, feel free to add any advice, questions, discussions, comments, and/or concerns in this thread.
SAN DIEGO STAY CLASSY
Team San Diego #55
ADD ME ON YUKU!

Remove this ad
Remove this ad
avatar

VanillaGorillaDX

Registered Member

Posts: 3,697

#2 [url]

Jun 17 06 10:20 PM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

Nice, good job! :D

Some stuff I'd like to add (also using Basic Skin):

Customizing Tables


RED BOX:
This is for a general table:
-To change background color, replace #ACE6E6 with a color HEX code (google "HEX codes" or "color codes" or use Photoshop).
-To use a background image instead of a color, replace:

   background: #ACE6E6;

WITH
   background-image: url('YOURIMAGEURLHERE');

-To customize the border, change "1px" to "2px", "3px", or however thick you want the border to be. You can change "black" to "white" or a HEX code.(Remember to put a "#" in front) You can change "solid" to "dotted", "dashed", etc.

YELLOW BOX:
This is for the headings of general tables. Follow the same instructions above to change color or use a background image.

FOR SEMI-TRANSPARENT TABLES, add this:

   filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;-khtml-opacity:0.75;


You can mess with the numbers to customize the transparency. It should look like this:


You might bend til you break, cause its all you can take
On your knees, you look up, decide youve had enough
Then you [ stand ]
~ me & my gang ~

#4 [url]

Jun 17 06 10:44 PM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

Now I see what my problem is.

I'm not willing to spend more than 2 minutes at a time on that blasted profile. lol

<>< ><> <>< ><> <>< Sell me KID LEBRON III's or WISE LEBRON III's (11-12.5) ><> <>< ><> <>< ><>
This game is in the refrigerator! The door is closed, the lights are out, the eggs are cooling, the butter's gettin hard, and the Jellooo's jigglin! (Chick Hearn page from nba.com) I grew up going mainly to ANGELS and LAKERS games, but I will ALWAYS cheer for my wife's home team (UK WILDCATS) and ALL the rest of MY home teams (SPARKS, XTREME, CLIPPERS, PADRES, DUCKS, TROJANS, CHARGERS, AVENGERS, DODGERS, BRUINS, L.A. KINGS, GALAXY).

avatar

xHav0c81x

Registered Member

Posts: 981

#10 [url]

Jun 17 06 11:23 PM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

I'm still so lost with this, I can't seem to figure anything out

THAT'S US THAT KUFI SMACKIN BYRD GANG

Ya'll Still Can't TOUCH Me (No Team Late Night)

Remove this ad
avatar

DS 530s Finest

Registered Member

Posts: 5,932

#11 [url]

Jun 17 06 11:26 PM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

^ I can't even get to sign up... How do I do that?

TEAM NIPPLES
MEMBER #1: El Capitan de Nips
Check out my Most Valuable Nipples!

avatar

jblackcat13

Registered Member

Posts: 12,824

#12 [url]

Jun 17 06 11:49 PM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

DS 530 go to your control center and there should be ad for yuku there

I Can Take Phrase Thats Rarely Heard Flip It Now Its A Daily Word-RAKIM
Yuku Me jblackcat13.u.yuku.com/

TEAM BEN GORDON
7
MEMBER 2

avatar

BabyJordan0312

Registered Member

Posts: 1,225

#18 [url]

Jun 18 06 3:30 AM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

It carried over my post count (not that it matters)

But it is now stuck on the same # as the day I joined.

All the posts I havve done since the "Join Yuku Date" have not been added to my post total.

Anyone know about this or how it may be rectified?

Thanks in advance

Faith ! ~ Believe In Your Dreams

Baby J

avatar

whywesteppin

Registered Member

Posts: 16,976

#20 [url]

Jun 18 06 4:14 AM

Re: *OFFICIAL YUKU DESIGN TUTORIAL+FAQ* CSS 101

Quote:
All the posts I havve done since the "Join Yuku Date" have not been added to my post total.

i have the same problem... try opening with internet explorer and logging in and see if it updates.

visit my yuku
they tryin to catch me riding dirtylicious
I am the Kobe Stopper

Remove this ad

Quick Reply

bbcode help