Create a CSS file

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

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.

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

Create a CSS file

Create a CSS file

To merge with "create a css"

Re: Create a CSS file