Customising your public forums profile page design is divided in two totally independent and optional processes:

1. Customising the page layout with CSS
2. Customising your content with vB Code

 

1. Customising the page layout with CSS

The idea is to allow you a flexible way of customising the page looks by using your preferred font sizes and effects, colors, borders and backgrounds.

 

• Designing your CSS tags - Some basic notes
  
  
  • Beginners: Some css design tutorials and sources are listed here.
  • You'll find a copy-paste textarea with all tags included at this page at Your Copy-Modify-Paste CSS tags code.
  • All Images are placed as background images in the styles, meaning they will not force the content tables to stretch. If an used image is larger than the area it is supposed to cover any overflow stays hidden.
  • Tip: When you adjust a specific area it is easier to grab the changes if you test with a color strongly contrasting to colors you are finally using.
  • Note: Term 'screen wide' (whole screen area) is different to 'page wide' (892 pixels wide centered main layout area).

 

• CSS style tags you can modify
  
  
  • .body
    • This affects the whole screen wide background, margins and other basic settings.
    • If you want to use a background image for the whole page you should add after background-color: #FFFFFF background-image:url(http://www.soundchilds.net/global_files/SC-Basic-Logo.png); background-position: left top; background-repeat: no-repeat; background-attachment: fixed;
    • Above positioning example places one none-repeating image at top left corner of the screen on a white background. The image also stays fixed when a person viewing the page scrolls the screen.
    
    
  • a:link, a:visited, a:active and a:hover
    • This tag defines any basic links appearance if they are not specially defined in a style (example: .smallfont a:link)
    • Note: No dots before the starting a letters.
    
    
  • .page_header, .page and .page_footer
    • These tags are related to each other as they construct a page wide background. You can adjust the page area background by full 892 pixel width
      .page_header
      
    • TIP: If you use a partly transparent logo with .Your_Custom_Profile_Logo -style , you can effectively customise your page appearance by using an underlying graphic with this style.
      
      .page
      
      
      .page_footer
      
      
      
  • .breadcrumb_maintable
    • This tag allows you to style the navigation bar area border and background
      
    • A backround image should ideally be about 45 pixels high and maximum 892 pixels wide (the height may change if you change the font sizes in any of the style tags starting .breadcrumb)
    
    
  • .breadcrumb_smallfont (and a:link, a:visited ...)
    • This tag allows you to style the breadcrumb text and links
      
    
    
  • .breadcrumb_text_header
    • This tag allows you to style the actual breadcrumb header text
      
    
    
  • .tborder
    • This tag allows you to style the border of most content tables
      
    
    
  • .tcat
    • This tag allows you to style the content table headers and background
    • A backround image should ideally be about 30 pixels high and maximum 612 pixels wide (the height may change if you change the font sizes in any of the style tags starting .breadcrumb)
      
    
    
  • .alt1 (and .alt1:link, .alt1:visited ...)
    • This tag defines the basic style of most content cells. alt1 styled areas also have their own link appearance tags
      
    
    
  • .alt2 (and .alt2:link, .alt2:visited ...)
    • alt2 is a replacement style for repeatnig content cells. alt2 styled areas also have their own link appearance tags
      
    
    
  • .vbmenu_control (and .vbmenu_control:link, .vbmenu_control:visited ...)
    • This tag defines the style for controls bars background, text and links.
      

  
  

  • .smallfont (and .smallfont:link, .smallfont:visited ...)
    • This tag defines the style of the smaller fonts where used. smallfont styled texts also have their own link appearance tags
      
    
    

• .Your_Custom_Profile_Logo
  • This tag defines the style settings for your logo replacing the large SoundChilds basic logo at the top of the page. Note:
    • The logo should not be larger than 750 pixels wide and 97 pixels high
    • TIP: If you use a partly transparent logo here, you can effectively customise your page appearance with another graphic by attaching it at the underlying layer by using the .page_header -style.
  • A sample image:
    
  
  
• .Navcell
  • This tag defines the style of left side navigation bar cell background.
    
    
    
• .Navlink (and .Navlink:link ...)
  • This tag defines the style of links placed inside left side navigation bar cells.
    







• Your Copy-Modify-Paste CSS tags code
  • Follow this procedure to adjust your page looks
    • Copy all of below code (paint over the text with your mouse) and use copy command of your browser (Edit > Copy)
      /* Copy and paste everything from here down */ body { background-color: #FFFFFF; /* background-image:url(http://www.soundchilds.net/global_files/SC-Basic-Logo.png); */ /* background-position: left top; */ /* background-repeat: no-repeat; */ /* background-attachment: fixed; */ margin: 0px 0px 0px 0px; padding: 0px; } a:link { color: #0000A3; text-decoration: underline; } a:visited { color: #0000A3; text-decoration: underline; } a:active { color: #0000A3; text-decoration: blink underline; } a:hover { color: #3671A0; text-decoration: none; } .page_header { background-color: transparent; margin: 0px 0px 0px 0px; } .page { background-color: transparent; margin: 0px 0px 0px 0px; } .page_footer { background-color: transparent; margin: 0px 0px 0px 0px; } .breadcrumb_maintable { background-color: #F0F0F0; color: #000000; font: 11px tahoma, verdana, geneva, lucida, arial, helvetica, sans-serif; border: 1px solid #000000; background-image:url(http://www.soundchilds.net/global_assets/globalgraphics/navbar_bg_graph.gif); background-position:top right; background-repeat:no-repeat; } .breadcrumb_text_header { color: #000000; font: tahoma, verdana, geneva, lucida, arial, helvetica, sans-serif; font-size:14px; vertical-align:middle; } .tborder { background-color: #F0F0F0; color: #000000; border: 1px solid #000000; } .tcat { background: #7D7D7D url(http://www.soundchilds.net/loud_lounge/images/gradients/gradient_tcat.gif) repeat-x top left; color: #FFFFFF; font: bold 10pt verdana, geneva, lucida, arial, helvetica, sans-serif; } .tcat a:link { color: #ffffff; text-decoration: underline; } .tcat a:visited { color: #ffffff; text-decoration: underline; } .tcat a:active { color: #FFFFFF; text-decoration: blink underline; } .tcat a:hover { color: #FFFFFF; text-decoration: none; } .alt1 { background-color: #F0F0F0; color: #000000; } .alt1 a:link { color: #0000A3; text-decoration: underline; } .alt1 a:visited { color: #0000A3; text-decoration: underline; } .alt1 a:active { color: #0000A3; text-decoration: blink underline; } .alt1 a:hover { color: #3671A0; text-decoration: none; } .alt2 { background-color: #CCCCCC; color: #000000; } .alt2 a:link { color: #0000A3; text-decoration: underline; } .alt2 a:visited { color: #0000A3; text-decoration: underline; } .alt2 a:active { color: #0000A3; text-decoration: blink underline; } .alt2 a:hover { color: #3671A0; text-decoration: none; } .vbmenu_control { background-color: #000000; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, arial, helvetica, sans-serif; padding: 3px 6px 3px 6px; white-space: nowrap; } .vbmenu_control a:link { color: #FFFFFF; text-decoration: underline; } .vbmenu_control a:visited { color: #FFFFFF; text-decoration: underline; } .vbmenu_control a:active { color: #FFFFFF; text-decoration: blink underline; } .vbmenu_control a:hover { color: #CCCCCC; text-decoration: none; } .smallfont { font: 11px verdana, geneva, lucida, arial, helvetica, sans-serif; } .smallfont a:link { color: #0000A3; text-decoration: underline; } .smallfont a:visited { color: #0000A3; text-decoration: underline; } .smallfont a:active { color: #0000A3; text-decoration: blink underline; } .smallfont a:hover { color: #3671A0; text-decoration: none; } .Your_Custom_Profile_Logo { background-color: #FFFFFF; background-image:url(http://www.soundchilds.net/global_files/SC-Basic-Logo.png); background-position:left middle; background-repeat:no-repeat; } /*PAGE KEY LINKS NAVIGATION (LEFT SIDE NAVIGATION BAR) */ .Navcell { background-color: #CCCCCC; } .Navlink { color: #0000A3; text-decoration: none; /*DO NOT CHANGE BELOW PROPERTIES: font-family, font-size*/ font-family: verdana, geneva, lucida, arial, helvetica, sans-serif; font-size: 9pt; font-weight: bold; } .Navlink a:link { color : #0000A3; font-weight: bold; text-decoration: underline; } .Navlink a:visited { color : #0000A3; font-weight: bold; text-decoration: underline; } .Navlink a:active { color : #0000A3; font-weight: bold; text-decoration: blink underline; } .Navlink a:hover { color : #CCCCCC; text-decoration: none; font-weight: bold; } /* END of your CSS Style code */
    • Paste the code in a basic text editor (like notepad).
    • Modify the tags in the text editor.
      • Tip: All customised profile pages have these tags visibly included in the page source code. Pick ideas from layouts you like.
      • If you use graphics, you need to have them also already designed and uploaded somewhere online at this point, so you can enter the correct url addresses in the style tags.
    • Go to your MY FORUM Controls or straight here
      
    
    
    • Click at Edit Profile CSS and META tags
      
      
      
  • Paste your modified CSS code from the text editor in the Custom CSS Style Tags -field.
    • Important: Copy and paste all code between
      /* Copy and paste everything from here down */
      and
      /* END of your CSS Style code */
  • Save Changes
  • All done:)

 

2. Customising your content with vB Code

vB Code is quite like using <html>. At your artist-seller pages vB Code tags can be used to further enhance text effects, include links, images, audio etc. If vB tags can be used at a information field it is mentioned at the left side of the filed at the backstge user interface.

• List of all vB Code tags available at SoundChilds