Форуми / Cotonti / Skins / create box in ccs file

Inten
#1 13.05.2009 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 13.05.2009 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 ...

Відредаговано: pieter (13.05.2009 15:07, 15 років тому)
rayblo
#3 13.05.2009 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 13.05.2009 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 14.05.2009 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 14.05.2009 02:29
Its looks very nice thank you very much Its fantastic :)
pieter
#7 14.05.2009 02:31
If your site is ready, give us the link.
... can we help you ...
Inten
#8 14.05.2009 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

Відредаговано: Inten (15.05.2009 03:34, 15 років тому)
pieter
#9 15.05.2009 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 ...

Відредаговано: pieter (15.05.2009 05:21, 15 років тому)
Inten
#10 15.05.2009 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 15.05.2009 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 15.05.2009 19:29
I just registered on Dutchcotonti.com
It talks a little easer for me :P