SoundChilds HOME HOME | AUDIO CHARTS | FORUM | GALLERY | SEARCH | STORE.  
    MY SC | HELPDESK  
 
f
HOME > MY SC (Introduction to SoundChilds) > Get Registered (Detailed Introduction) > Use Custom CSS Styles
Customise Your Public Member Profile Appearance Refresh This Page Go Back To Previous Page Search SoundChilds

PAGE KEY LINKS
Use Custom CSS Intro
Get Registered
General Introduction
How To Sell-Promote
Get Help
 
BASICS

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
      • 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)

    • legend
      • This tag defines the text legends appearance
      • Note: No dot before the starting a letters

    • .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
        alt2

    • .vbmenu_control (and .vbmenu_control:link, .vbmenu_control:visited ...)
      • This tag defines the style for controls bars background, text and links.
        alt2


    • .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
        smallfont

    • .time
      • This defines the style of time tags and some other specially highlighted tags
        smallfont

While the above tags are general layout tags, the tags below this chapter affect the more special blocks of the page. Most of them can be used by the general tag styles. The best fitting general style is named at the end of the tag. For example, later down the style .Your_Custom_Profile_Name_tcat can be straight forward be defined from the general .tcat style and the page layout stays consistent. However, if you so prefer, you can customise the following special tags further to give your page an even more spiced look and feel.

    • .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.

      • smallfont

    • .Your_Custom_Profile_Name_tcat
      • This tag defines the style of your member name area. If you use a graphic here, the maximum dimensions are 270 pixels wide and 30 pixels high. The dimendsions may change, if you use a different size font.
        smallfont

    • .Your_Custom_Title_alt1
      • This tag defines the style of your member title area. If you use a graphic here, the maximum dimensions are 270 pixels wide and 30 pixels high. The dimendsions may change, if you use a different size font.
        smallfont

    • .Your_Custom_Keydata_alt1
      • This tag defines the style of your key information area. If you use a graphic here, the maximum dimensions are 270 pixels wide and 185 pixels high. The dimensions may change, if you use a different size font than the default with the .smallfont style.
        smallfont

    • .Your_Custom_Buddybit
      • This tag defines the style of your BuddyBit area. If you use a graphic here, the ideal dimensions are 270 pixels wide and 130 pixels high. The dimensions may change, if you use a different size font than the default with the .Your_Custom_Buddybit_Text style.
        smallfont

    • .Your_Custom_Buddybit_Text (and .Your_Custom_Buddybit_text:link ...)
      • This tag defines the styles of your BuddyBit area texts and links. The dimensions of the BuddyBit content areas get "wrecked", if you use a lot larger size font than the default one with this style.
        smallfont

    • .Your_Battle_tborder
      • This tag defines the style of your Battle Cry area border as it's main purpose, but also first layer table background. If you use a graphic here, the maximum dimensions are 612 pixels wide. The height changes depending on the size of your font. This area is visible only if you have a Battle Cry typed at Your Forum Controls indicating you want to debate people at the Rap-Battles forum.
        smallfont

    • .Your_Battle_alt1 (and .Your_Battle_alt1:link ...)
      • This tag defines the style of your Battle Cry area text, links (which you can further modify with vBCode) and the top layer table background. If you use a graphic here, the maximum dimensions are 612 pixels wide. The height changes depending on the size of your font. This area is visible only if you have a Battle Cry typed at Your Forum Controls indicating you want to debate people.
        smallfont

    • .Your_Battle_smallfont (and .Your_Battle_smallfont:link ...)
      • This tag defines the style of your Battle Cry area smallfont texts and links.
        smallfont



  • 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)
      • 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
        smallfont

      • Click at Edit Profile CSS and META tags
        smallfont

      • 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 profile vB Code tags can be used to further enhance text effects, include links, images, audio etc. The tags are available when modifying following profile fields:

 
Go Back To Previous Page Return to previous page | More info at the helpdesk | Related Discussion









 



 
© All Rights Reserved | Legal Documents Of SoundChilds
All products, code, articles, images, brands and trademarks are property of respective owners.
This page is subject to change without further notice.
 

LevelTen Hit Counter - Free Web Counters
LevelTen Web Design Company - Website Development, Flash & Graphic Designers