Forums / Cotonti / Skins / create box in ccs file

Inten
#1 2009-05-13 14:13
Can some tell me how to create extra boxes in the .ccs file like i shown in the image below ?



Regards,
pieter
#2 2009-05-13 14:57
Please ask Rayblo. He had once a 3-column version.
Best is te gaan naar de site in mijn signature.
Daar kan je hem een PM sturen.

example: http://www.seditio.eu/


--------------------------------
If you want to try it yourself:
#content #lSide { float:left; width:550px; }
#content #lSide .lboxHD { color:#3E606F; background: url(img/SED-Light_lBoxHD.gif) no-repeat; width:540px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #lSide .lboxBody { width:530px; background:#FFF url(img/SED-Light_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }

#content #rSide { float:right; width:240px; }
#content #rSide .rboxHD { color:#3E606F; background: url(img/SED-Light_rBoxHD.gif) no-repeat; width:230px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #rSide .rboxBody { width:220px; background:#FFF url(img/SED-Light_rBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }

These are the 2 boxes. Left and right
You need to make 2 extra: eg left_small and middle

And you have to play with it. If you have problems, I will have a look at it tonight if you want.

And you need to resize some pictures for the heading.
... can we help you ...
This post was edited by pieter (2009-05-13 15:07, 15 years ago)
rayblo
#3 2009-05-13 15:53
A three column version is easier indeed then creating what you show in your picture.

Pieter is right you need to create new images for your boxes
[b]www.dutchcotonti.com[/b]<br />
De plaats voor nederlandse ondersteuning voor Cotonti.<br />
The place for support for Cotonti in Dutch
Inten
#4 2009-05-13 23:44
the images aint the problem, I'm better with Photoshop then with ccs files :) or English for that mather :P

I tried this

#content #mlSide { float:left; width:550px; }
#content #mlSide .mlboxHD { color:#3E606F; background: url(img/SED-Light_lBoxHD.gif) no-repeat; width:250px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #mlSide .mlboxBody { width:250px; background:#FFF url(img/SED-Light_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }

And

#content #mrSide { float:left; width:550px; }
#content #mrSide .mrboxHD { color:#3E606F; background: url(img/SED-Light_lBoxHD.gif) no-repeat; width:250px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #mrSide .mrboxBody { width:250px; background:#FFF url(img/SED-Light_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }


After that i don't exactly know where to put the div in the index file

Regards
pieter
#5 2009-05-14 01:28
the best I can do for the moment


#content #mlSide { float:left; width:395px; }
#content #mlSide .mlboxHD {color:#3E606F; background: url(img/SED-Light_lBoxHD.gif) no-repeat; width:250px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #mlSide .mlboxBody { width:375px; background:#FFF url(img/SED-Light_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }

#content #mrSide {margin-left:405px; width:395px; }
#content #mrSide .mrboxHD {color:#3E606F; background: url(img/SED-Light_lBoxHD.gif) no-repeat; width:250px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #mrSide .mrboxBody { width:375px; background:#FFF url(img/SED-Light_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; }

<!-- BEGIN: MAIN -->
<div id="mlSide">	
	<div class="mlboxHD">{PHP.skinlang.index.Newinforums}</div>
	<div class="mlboxBody">{PLUGIN_LATESTTOPICS}</div>
</div>
<div id="mrSide">	
	<div class="mrboxHD">{PHP.skinlang.index.Newinforums}</div>
	<div class="mrboxBody">{PLUGIN_LATESTTOPICS}</div>
</div>	
<div id="lSide">

	{INDEX_NEWS}

	<div class="lboxHD">{PHP.skinlang.index.Newinforums}</div>
	<div class="lboxBody">{PLUGIN_LATESTTOPICS}</div>
	
</div>
<div id="rSide">

	<div class="rboxHD">{INDEX_TOP_TAG_CLOUD} :</div>
	<div class="rboxBody">{INDEX_TAG_CLOUD}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Polls}</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Online}</div>
	<div class="rboxBody"><a href="plug.php?e=whosonline">{PHP.out.whosonline}</a> :<br />{PHP.out.whosonline_reg_list}</div>
</div>

<!-- END: MAIN -->

Hope you like it. Pictures are not doner yet. this is for you :-)
... can we help you ...
Inten
#6 2009-05-14 02:29
Its looks very nice thank you very much Its fantastic :)
pieter
#7 2009-05-14 02:31
If your site is ready, give us the link.
... can we help you ...
Inten
#8 2009-05-14 03:04
when im done i give you the link, i think it will be tonight somewhere

A little later then i thought but here is my site
Nothing much :) but im proud lol

http://www.inten.cc/index.php
This post was edited by Inten (2009-05-15 03:34, 15 years ago)
pieter
#9 2009-05-15 05:18
nice but at the bottom of the new boxes there are no roundings like the other boxes.

verify SED-Light_lBoxFT.gif and SED-Light_mBoxFT.gif
... can we help you ...
This post was edited by pieter (2009-05-15 05:21, 15 years ago)
Inten
#10 2009-05-15 05:30
lol.. i didn't noticed that yet rofl :P

Now im thinking of making a bigger mess out of it.
There where already some complaints about the fact there isnt a player link when in forums or any other page so i was thinking of creating the whole left menu bars on the right side to in the header or footer so it stays there when viewing a other page or in forums.

Regards and thanks for the heads up :)
pieter
#11 2009-05-15 19:07
problems is that the header and footer are reloaded. (I think it is)
So if the player is started and you jump to another page, it stops.
... can we help you ...
Inten
#12 2009-05-15 19:29
I just registered on Dutchcotonti.com
It talks a little easer for me :P