halfcut
05-Nov-2002, 02:24 PM
Well
I'm sure you've all checked out Aaron's transparent skin by
now and you may be wondering how it was done. Its no big secret it just
involves some slightly more advanced than usual CSS techniques and tweaks
to Invision Boards templates and macros.
Firstly you could probably
do with a background image, this can be a tiling non tiling image, fixed
or not for our purposes I'll be using a fixed background called
bg.jpg.
Upload bg.jpg to your style_images/*/ folder
Open up
your stylesheet in the admin CP and add :
body { background-image:
url("style_images/<#IMG_DIR#>/bg.jpg");background-attachment:fixed
}
refresh your forums and the
background should be there.
Transparency
Also you may
only wish to make a certain area of your board transparent if speed is an
issue. In this little tutorial I'll just be covering .forum1 .forum2
which is the area on the board view which has forum name, description,
number of topics, replies and last post info.
In the default
invision board stylesheet these are defined by .forum1 { background-color: #DFE6EF }
.forum2
{ background-color: #E4EAF2 }
the CSS definition for alpha
tranparency is filter: alpha(opacity="A VALUE BETWEEN 0 and 100") where
0 is completely transparent and 100 is completely opaque. A value of
around 60 - 70 is most suitable.
Syntax
:
.forum1 { background-color:
#DFE6EF; filter: alpha(opacity="70") }
.forum2 {
background-color: #E4EAF2; filter:
alpha(opacity="70") }
However if you try making that
change you may notice that not very much has happened, maybe the text has
got a bit fainter but not much else.
This is because invision
creates its various table borders seperating lines etc not with the
command border='1' as you might think, but by manipulating
cellspacing and layering bgcolors on top of each other.
Look
through your templates and in a lot of the main table definitions
you'll see bgcolor="<{tbl_border}>" In 1.1 {tbl_border} is a macro so its not
too much trouble to rectify the problem.
Go to Admin CP, Skins &
Templates, Manage Macros and about 5th from the bottom you'll see
tbl_border which in the default skin has a value of #345487. WARNING do
not remove this macro completely as the templates still refer to it,
instead edit it and simply delete the #345487 so tbl_border now has a
blank field.
Still not transparent? well thats that layering thing
I mentioned earlier, the solution to this lies both in your stylesheet but
more importantly in your templates. The final obstacle to transparency is
.mainbg in your stylesheet.
You could set this as transparent
however the effect isn't pleasing to the eye, it just fades
everything, make it completely transparent and you forum will vanish.
However 1.1 has a very useful tool.
Go back to admin cp, manage
styles & templates, manage stylesheets and edit. Right at the top
you'll see Show me where... .hlight is used in the
templates. In the box which shows .hlight find .mainbg and click go. A
list of the templates where .mainbg is used will be produced. This is the
laborious bit, however as this tutorial only concerns the board section
its quite simple.
The first template that pops up is + subheader so
edit ACP Home -> Template Control Home -> Invision Board Template Set ->
skin_boards -> subheader, what your looking for is anything that refers to
class='mainbg' for example in subheader its
<td
class='mainbg'>. You simply remove the
class='mainbg' bit leaving you with a simple
<td> tag. Update the template.
Now for
the bit we're interested in the next one down is + CatHeader_Expanded
open it up and edit it. Again you'll find a <td
class='mainbg'> get rid of the class='mainbg' and update.
And your forum1 & forum2
should now be transparent
http://www.virtual-forum.com/tutorial.jpg
You can apply this technique to any area of your
stylesheet including graphics, for example category backgrounds etc so
just experiment with it.
Adam
edit : you get big speed
increases by not fixing the background, but this only really suitable for
a tiling bg, and you won't get the effect of the forums
'floating' over the background.
I'm sure you've all checked out Aaron's transparent skin by
now and you may be wondering how it was done. Its no big secret it just
involves some slightly more advanced than usual CSS techniques and tweaks
to Invision Boards templates and macros.
Firstly you could probably
do with a background image, this can be a tiling non tiling image, fixed
or not for our purposes I'll be using a fixed background called
bg.jpg.
Upload bg.jpg to your style_images/*/ folder
Open up
your stylesheet in the admin CP and add :
body { background-image:
url("style_images/<#IMG_DIR#>/bg.jpg");background-attachment:fixed
}
refresh your forums and the
background should be there.
Transparency
Also you may
only wish to make a certain area of your board transparent if speed is an
issue. In this little tutorial I'll just be covering .forum1 .forum2
which is the area on the board view which has forum name, description,
number of topics, replies and last post info.
In the default
invision board stylesheet these are defined by .forum1 { background-color: #DFE6EF }
.forum2
{ background-color: #E4EAF2 }
the CSS definition for alpha
tranparency is filter: alpha(opacity="A VALUE BETWEEN 0 and 100") where
0 is completely transparent and 100 is completely opaque. A value of
around 60 - 70 is most suitable.
Syntax
:
.forum1 { background-color:
#DFE6EF; filter: alpha(opacity="70") }
.forum2 {
background-color: #E4EAF2; filter:
alpha(opacity="70") }
However if you try making that
change you may notice that not very much has happened, maybe the text has
got a bit fainter but not much else.
This is because invision
creates its various table borders seperating lines etc not with the
command border='1' as you might think, but by manipulating
cellspacing and layering bgcolors on top of each other.
Look
through your templates and in a lot of the main table definitions
you'll see bgcolor="<{tbl_border}>" In 1.1 {tbl_border} is a macro so its not
too much trouble to rectify the problem.
Go to Admin CP, Skins &
Templates, Manage Macros and about 5th from the bottom you'll see
tbl_border which in the default skin has a value of #345487. WARNING do
not remove this macro completely as the templates still refer to it,
instead edit it and simply delete the #345487 so tbl_border now has a
blank field.
Still not transparent? well thats that layering thing
I mentioned earlier, the solution to this lies both in your stylesheet but
more importantly in your templates. The final obstacle to transparency is
.mainbg in your stylesheet.
You could set this as transparent
however the effect isn't pleasing to the eye, it just fades
everything, make it completely transparent and you forum will vanish.
However 1.1 has a very useful tool.
Go back to admin cp, manage
styles & templates, manage stylesheets and edit. Right at the top
you'll see Show me where... .hlight is used in the
templates. In the box which shows .hlight find .mainbg and click go. A
list of the templates where .mainbg is used will be produced. This is the
laborious bit, however as this tutorial only concerns the board section
its quite simple.
The first template that pops up is + subheader so
edit ACP Home -> Template Control Home -> Invision Board Template Set ->
skin_boards -> subheader, what your looking for is anything that refers to
class='mainbg' for example in subheader its
<td
class='mainbg'>. You simply remove the
class='mainbg' bit leaving you with a simple
<td> tag. Update the template.
Now for
the bit we're interested in the next one down is + CatHeader_Expanded
open it up and edit it. Again you'll find a <td
class='mainbg'> get rid of the class='mainbg' and update.
And your forum1 & forum2
should now be transparent
http://www.virtual-forum.com/tutorial.jpg
You can apply this technique to any area of your
stylesheet including graphics, for example category backgrounds etc so
just experiment with it.
Adam
edit : you get big speed
increases by not fixing the background, but this only really suitable for
a tiling bg, and you won't get the effect of the forums
'floating' over the background.