Create a CSS file Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    Create a CSS file

    larme d'ange
    larme d'ange
    larme d'ange
    Forumember


    Male Posts : 41
    Reputation : 9
    Language : french
    Location : in the heart of my love
    • Post n°1

    Tutorial Create a CSS file

    Post by larme d'ange December 20th 2005, 10:01 am

    Create a CSS file


    If you want to custom at best your board, you'll have to create a CSS file then host it (in your personal Web space) ; the advantage to create a CSS file, is that we are not limited in size (indeed, the CSS file can be also writen in Admin panel >> General Admin >> Configuration >> Site description but the number of characters is limited...)


    In Admin panel >> General Admin >> Configuration >> Site description , enter this code in more of your texte :
    Code:
    <link rel=stylesheet href=URL/Fichier.css type=text/css>

    About the syntax, it's quite simple ; make a search with :
    Google.

    Here is what can be done [my board] (french board) with my CSS file :

    Code:
    body {
       background-attachment:fixed;
       background-repeat:no-repeat;
       background-position:top center;
       cursor: url("http://bklproject.free.fr/Forum/cible.cur");
    }

    table.forumline {border:2px dashed;}

    th{font-variant: small-caps;}
    th.thCornerL, th.thTop, th.thCornerR{border:0px;}

    td.bodyline{border:3px dotted;}
    td.spaceRow{border:0px; background-color: transparent;}
    td.catHead,td.catBottom{border:0px;}
    td.catLeft{border:0px;font-variant: small-caps;text-align:center;}
    td.row1,td.row2,td.row3{filter:Alpha(Opacity=80);}

    span.cattitle,span.maintitle,span.mainmenu,span.nav{font-variant: small-caps;}

    a{cursor: url("http://bklproject.free.fr/Forum/cible_hand.ani");}
    a.copyright{color: #00BFF3;}
    a.copyright:hover{color: #CC6600;}

    Some explain :
    body { ... } >> fix the background image,
    table.forumline {border:2px dashed;} >> dotted line around the cells,
    td.bodyline{border:3px dotted;} >> dots all around the board,
    {font-variant: small-caps;} >> display of the small letters to small capital letters,
    td.spaceRow{border:0px; background-color: transparent;} >> removal of the bar between the categories, Forums, ...
    td.row1,td.row2,td.row3{filter:Alpha(Opacity=80);} >> Opacity of 80% for the cells of the Forum (it is necessary to put colors in the 'Table Row 1, 2 and 3'),
    cursor : url("URL"); >> Cursor of your board
    a.copyright{color: #00BFF3;} >> to modify the page footer link colour,
    a.copyright:hover{color: #CC6600;} >> to modify the page footer link colour when the mouse passes on.

    Written by the friendly SanDream

    that's all folks

    Corrections by Katt


    This tutorial was written by Katt
    • Back to top
    larme d'ange
    larme d'ange
    larme d'ange
    Forumember


    Male Posts : 41
    Reputation : 9
    Language : french
    Location : in the heart of my love
    • Post n°2

    Tutorial To merge with "create a css"

    Post by larme d'ange December 20th 2005, 11:24 am

    You may find your CSS file use for your board to:

    Code:
    http://YOURBOARDADRESS.forumotion.com/44.css



    -----------

    Like explain before, you also can write your CSS directly in the "Site description", but you'll quickly be limited, in think you just can put 255 characters.
    But to use one or two style, you also could use this for simply CSS.

    So:

    Admin panel >> General Admin >> Configuration >> Site description

    your CSS must be write between this two tags:

    <style type="text/css">your ccs</style>

    Warning, you must close the tags, if it's not, you'll have a bug of display with your board.
    It's able to correct this bug, but you will have to ask for on the support forum.

    Let us pass now to few example:

    Fix the background image

    This allow you to fix your backround image, no repeat of the image(no mosaic effect), and defines image alignement to top center of your board

    Code:
    body {
      background-attachment:fixed;
      background-repeat:no-repeat;
      background-position:top center;}

    To put it on your forum, you so write entirely this script in the site description:

    Code:
    <style type="text/css">body { background-attachment:fixed; background-repeat:no-repeat; background-position:top center;}</style>

    to complete:

    background-attachment: fixed ou scroll <=> background image fix or scrolling,
    background-repeat: repeat, repeat-x, repeat-y ou no-repeat <=> To repeat, horizontally, vertically or not the background image,
    background-position: top, center or bottom || left, center or right <=> Position of the background image (Top, Centered or Down || Left, Centered, Right)

    Finally, if you want than your background be see,
    Enfin, si vous voulez que votre image de fond soit vu, even inside the body line background color du cadre, always is the admin panel, go to:

    >> Colors, Body line background color :
    Put the empty field.
    • Back to top
    Cornelia
    Cornelia
    Cornelia
    Hyperactive


    Female Posts : 4763
    Reputation : 173
    Language : I'M NOT A TECHIE OR A MOD, SO QUIT SENDING ME PMS FOR TECHIE STUFF OR LOST PASSWORDS !!!
    Location : Absent on weekends until camping season ends
    • Post n°3

    Tutorial Re: Create a CSS file

    Post by Cornelia July 1st 2006, 3:16 am

    You think it's not possible to put textured backgrounds in the bodyline backgrounds and in the forum table rows?

    It's possible by modifying the CSS of your board Wink

    In Admin Panel > Styles Admin > Colors > you activate the CSS > you change these parts, by adding what I indicate in red. You replace "http://PICTURE_ADDRESS.png" by your background picture


    Bodyline background

    .bodyline{
    background-color: #ffffff;
    border: 1px #444444 solid;
    background-image: url("http://PICTURE_ADDRESS.png");
    }


    Table row 1, 2 and 3

    td.row1{
    background-color: #e1f4ea;
    background-image: url("http://PICTURE_ADDRESS.png");
    }
    td.row2{
    background-color: #d8f1e3;
    background-image: url("http://PICTURE_ADDRESS.png");
    }
    td.row3{
    background-color: #c7ebd8;
    background-image: url("http://PICTURE_ADDRESS.png");
    }


    Table 3Right (separation between categories, forums, ... and the last column in the topics page)

    td.row3Right,td.spaceRow {
    background-color: #d1d7dc;
    border: #ffffff;
    border-style: solid;
    background-image: url("http://PICTURE_ADDRESS.png");
    }

    NOTICE : the other parameters in my codes are only samples from my test board
    • Back to top