Tiki Design

Tiki Design

Re: rounded corners

posts: 254 Japan

From what I can see, the problem is probably that the new divs you added in the CSS don't exist in the template. The simplebox HTML code is only

<div>content goes here </div>

not the

<div class="rounded"><div><div><div> Content goes here </div></div></div></div>

shown on the sitepoint page, so the extra divs to be styled with your corner images are missing.

You could add these tags manually but it would mean modifying .tpl files. To minimize template file modifying and still get boxes with custom corners (not always round in my case), I've often used the method described here: http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/. In this method, the extra divs are added by javascript and so don't have to be added in the template file. There just needs to be a "parent" div to identify the box to be styled. You can see this demonstrated at http://zukakakina.com and choose the WofW style. {UPDATE: This is no longer available.) The boxes containing the center and right columns and the wikitext and articles are made with this method (though some details need to be fixed, as you can see). You can get the stylesheet at http://zukakakina.com/tw3/styles/wofw.css and the js at http://zukakakina.com/tw3/styles/wofw/custom.js. In the template, such as tiki.tpl in this example, there needs to be a surrounding the div or table you want to add the custom corners and borders to.

In wikitext there's more freedom because you aren't limited to the divs provided in the templates. So you could use the sitepoint method by constructing the box with DIV plugin tags.

-- Gary

Switch Theme


Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config