Foren / Cotonti / Skins / create box in ccs file

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

Dieser Beitrag wurde von pieter (am 13. Mai 2009, 15:07, vor 14 Jahre) bearbeitet
rayblo
#3 13. Mai 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. Mai 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. Mai 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. Mai 2009, 02:29
Its looks very nice thank you very much Its fantastic :)
pieter
#7 14. Mai 2009, 02:31
If your site is ready, give us the link.
... can we help you ...
Inten
#8 14. Mai 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

Dieser Beitrag wurde von Inten (am 15. Mai 2009, 03:34, vor 14 Jahre) bearbeitet
pieter
#9 15. Mai 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 ...

Dieser Beitrag wurde von pieter (am 15. Mai 2009, 05:21, vor 14 Jahre) bearbeitet
Inten
#10 15. Mai 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. Mai 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. Mai 2009, 19:29
I just registered on Dutchcotonti.com
It talks a little easer for me :P