Welcome Guest Login or Signup LANGUAGE:
CHAT
IM LIST
BOOKMARK
HOME GALLERY PRAYERS MEMBERS NEWS BLOGS FORUM POLLS GROUPS VIDEOS MUSIC CLASSIFIEDS EVENTS SIGNUP GIFTS
BLOGS   WRITE NEW BLOG   EDIT BLOGS  
 
RSS
Layout Code Tutorial
Posted On 04/25/2008 20:22:24 by Sonshineinflorida

Last April I posted this tutorial on the that Mysterious generator found on your Edit Profile page called Design My Profile.  Those of you who know something about writing CSS code will appreciate that I have labored over --(LOL /NOT)--figuring out JC Faith's codes.  I have quoted the info (a series) and stickied for those of you who fancy your artistic side and want to design your own fantastic pages! 


 Sonshineinflorida wrote:
  Profile Layout Breakdowns - Background image-color

These are the buttons and the code html for the background image and the background color.


 

 

 The following html text on the source page is basically the same as the above, but the url is not uploaded.  It is copied and pasted from my host site Photobucket. 


Sonshineinflorida wrote:
Profile Layout Breakdowns -- Link,hover&body text

This is the link text and the link hover text plus the 'body' text  on your page.

 

This button is for the body text...your signature and the info next to your avatar.

     

 

 

These edit buttons are for any links on your page that when hovered over will change color and when clicked on will take you to another page.

This is the html text on the source page representing the above buttons. A and A:hover are the common class names for link on the internent.

This is a link to a site that was added to my daughter's page....it looks the same as the delete, and view more pictures text colors.


Sonshineinflorida wrote:
Profile Layout Breakdowns -- My Details 

This is the Detail box and the highlighted blog title on your page.

 

The following screen shot of html text is from the source page for the above buttons.

When you select your colors for your details text(the titles) and your highlighted blog title w/hover color, you will use the My Details edit buttons in the above screen shot.  .border13 represents the My Details buttons on the source page  -- .border 13 background is the stip of color behind the title text of my details, and the color is the my details text.  .border13 a and a:hover is the highlighted title in your blog area.

 

This is the default my details and blog title.

 


 Sonshineinflorida wrote:
Profile Layout breakdowns -- Site Menu

This is the site menu buttons info for designing your page.

The following screen shot of html text is from the source page for the above buttons.

When you select your colors for your site menu buttons these are the edit buttons you use.  Site menu linkbuttons on the source page are .menu and .menu2. -- Menu is the face color and .menu2 is the color the button changes to when you hover your pointer over it.  Like the comment box there is no border button for the site menu.  If you would like a border around your site menu buttons, in the CSS box add this text:  for each .menu1{ border:1px solid black (or #000000) and .menu2{ border:1px solid #000000 (or black) and always add a closing tag }

This is a screen shot of what the default site menu buttons look like.


Sonshineinflorida wrote:
Profile Layout breakdowns -- Comment tables 

[quote="Sonshineinflorida"]

This is the info on designing your comment tables, borders, headers and text.

 

The following screen shot text is from the source page for the above buttons.

When you select your colors for your tables these are the edit buttons you use.  Comment header, and C H text is .comment-head on the source page.  The comment tables' background, borders and color of text are represented by .comment and .comment-text.  There is no comment-border button...I don't know why, but if you would like to color your border or make it transparent -- just add  .comment { border:  to your CSS box and it should work for you (even if you just use the edit buttons) .

This is what the default page looks like with background and header.

 


Sonshineinflorida wrote:
Profile Layout breakdowns--Tables,borders,Headers

The following is info on your tables or 'about me' 'hobbies' 'music', etc...sections.  It includes the background, borders, text, header background and header text.

The following screen shot text is from the source page for the above link buttons.

When you select your colors for your tables these are the edit buttons you use.  Main Menu Headers, and MMH text is .mainmenu5 on the source page.  The tables' background, borders and two colors of text are represented by .border2.  The main text is .border2 { color , and the second part of your details text(your info) is represented by .color{ .

 

This is what the default tables and headers look like.


Sonshineinflorida wrote:

Profile Layout breakdowns--Profile Menu

[quote="Sonshineinflorida"]

 This is a tutorial on designing your profiles for yall who want to know.  If you study this you will be on your way, and may be adding some layouts to the forum yourselves!

This is the part of your layout code that represents your  Profile Menu/UserName and borders

(My Current UserName, border, and Profile Menu buttons)
 

The following is the text is from the source page (message me if you want more info on that) for the above buttons.

When you select your colors for your username and user border, you are choosing the colors for your Name, the border under your name and the borders around your profile buttons....represented on your source page as .item3.   Item3 border is around the name and item3 color is the Name itself.

Items 1 and 2 are the Profile buttons.  1 is the button face and 2 is the color that your button changes to when you hover your cursor over it. 

This is what the default Username, Profile Menu buttons, and borders look like.

If you have any questions...please msg me! :) Marcia



Bookmark:



HOT TAGS [-]


*** JCFaith ***