Changing a look

[Bigguy]

Is it not possible to change the corners. look at Reply #17 for reference.

(I`m very sorry to post like this, I just want to know if changing this is possible)

[Acf]

Its possible.. but is alot of work. you have to change the categorie cell by splitting it in three cells.
one cell for each corner but then you will still have some borders in the css you wish to remove.

I am thinking of making and releasing a theme with corners in the futhur...

[Bigguy]

I dont mind the border so much but the corners would be the finishing touch on this little conversion. If its to hard (which it would be for me) then I can leave it I guess. I was thinking of putting this out as a sort of half theme or color variation or something but I dont know how to do that either. I have kept the modified css and the images seperate from everything else in case I can somehow. So I guess I will have to leave the corners I guess unless someone feels brave enough to tackle this. Thanks for the great help.

[snork13]

making the rounded corners is lots of fun and requires lots of change...either to the table's cells, or can also be done via css. i went the table way for the sample theme...i know bloc uses css..

my example which is not done yet:

http://www.snork13.net/forum/

-snork

[Bigguy]

Which way do you think is easiest I have the images but just dont know how to add them. (I`m always trying to learn, slowly lol)

Nice look btw snork13

[snork13]

Which way do you think is easiest I have the images but just dont know how to add them. (I`m always trying to learn, slowly lol)

Nice look btw snork13

well css is the cleanest way...but in your case the adding of additional td to the tr might be easy enough...

[Bigguy]

td = table and tr = row Is that right I think that is what your talking about. If it is I really wouldnt know were to go from there

[Acf]

td = table and tr = row Is that right I think that is what your talking about. If it is I really wouldnt know were to go from there

1	2
3	4

qoute this message and look at the bbc code

[Bigguy]

table, tr, td,  the td must equal table data or a cell that sits in a tr which is a translator inside the table.  LOL, does that make sense or should I have a couple more beer, lol. Just trying to understand this a bit thats all.

[Acf]

a table contains rows
and rows contain coloms

http://www.w3schools.com/
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

[Bigguy]

Ok where is the code within smf that I change, maybe if I look at that a bit it will give some clues

[Bigguy]

This is just a guess and I`m probably way off but would I add something like this to the style sheet:

top-left {

background-image: url('images/corner.gif');
height: 9px;
width: 9px;
font-size: 2px;
}

top-right {

float: right;
margin-top: -9px;
background-image: url('images/corner.gif');
height: 9px;
width: 9px;
font-size: 2px;
}

html:

<div class="top-left"></div>
<div class="top-right"></div>

I found this on the net while trying to figure this out. Your probably all gettin a good laugh but thats ok, I`ll learn. I found this here Hope I`m getting warm anyway.

[snork13]

ya, via css....you could assign each <td> a class within a row

[Bigguy]

Ok so I am gettin closer. Would the code I found have to replace exsisting code or would it get added into the style.css. I figure the images can really go anywhere right as long as the path points to them. The height and width would get changed to the height and width of the images I`m using

[Bigguy]

So would I just put that code in the css file and make sure all the paths to the images are right.

[Acf]

Found some time to look at more closely
Find in boardindex.template.php:

Code Select Expand

<div class="catbg', $category['new'] ? '2' : '', '" style="padding: 5px 5px 5px 10px;">';
$first = false;

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

echo '
', $category['link'], '
</div>';

replace with:

Code Select Expand

<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td style="border-bottom: solid 1px #375576;"><img src="http://www.mywworld.com/mkportal/templates/skylight/images/m_sx.gif" alt="" title="" /></td><td class="catbg', $category['new'] ? '2' : '', '" style=" width: 100%; padding: 5px 5px 5px 10px;">';
$first = false;

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

echo '
', $category['link'], '
</td><td style="border-bottom: solid 1px #375576;"><img src="http://www.mywworld.com/mkportal/templates/skylight/images/m_dx.gif" alt="" title="" /></td></tr></table>';

[Bigguy]

Ok that changed a bit. The news fader didnt change or the info center. All the catagories changed though and it looks alot better. Thats one step closer. Thank you so far for this. You might have to refresh the page but have a look. http://www.smfhelper.com  Thats awesome so far.

[Bigguy]

What files would I modify to do all the corners like this and can I use this code you used in all the files After this is done I think this theme is done for me.

[Acf]

info center...boardindex:

Code Select Expand


<div class="catbg" style="padding: 6px; vertical-align: middle; text-align: center; ">
<a href="#" onclick="shrinkHeaderIC(!current_header_ic); return false;"><img id="upshrink_ic" src="', $settings['images_url'], '/', empty($options['collapse_header_ic']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin-right: 2ex;" align="right" /></a>
', $txt[685], '
</div>


Code Select Expand

<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td style="border-bottom: solid 1px #375576;"><img src="http://www.mywworld.com/mkportal/templates/skylight/images/m_sx.gif" alt="" title="" /></td><td class="catbg" style="width: 100%; padding: 6px; vertical-align: middle; text-align: center; ">
<a href="#" onclick="shrinkHeaderIC(!current_header_ic); return false;"><img id="upshrink_ic" src="', $settings['images_url'], '/', empty($options['collapse_header_ic']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin-right: 2ex;" align="right" /></a>
', $txt[685], '
</td><td style="border-bottom: solid 1px #375576;"><img src="http://www.mywworld.com/mkportal/templates/skylight/images/m_dx.gif" alt="" title="" /></td>

i havent tested this...

[Bigguy]

I used that code and it almost worked I have it in now. It is not aligned properly. But it looks good.