Loading...
 
Skip to main content

Tiki Design

Forum List Topic List

 
Thread actions

    • rounded corners

    Posted by gezza on Sun 02 of Aug, 2009 23:16 GMT-0000 posts: 11 Hungary

    Hi Gary!

    Hope you can help me out, I am doing some work on css files to give a more web2 look and feel and one important thing for me is to make as many corners rounded as possible..chi likes rounded things, not sharp edges 😊
    For modules on it is easier as they have fixed width. Can you give me a hint on how to solve this for the boxes where there is no width? what is the best practice? I have read this article:
    http://www.sitepoint.com/article/rounded-corners-css-javascript/

    I tried to do the nested solution but it was not working for me, maybe I made a mistake. I took the empty css from trunk and added this:

    div.simplebox {
    border: 0px solid #cce5ff;
    background: #cce5ff url(oit_dev_2/corner_topleft_cce5ff.gif) no-repeat top left;
    padding: 1em}

    div.simplebox div { background: url(oit_dev_2/corner_topright_cce5ff.gif) no-repeat top right; }

    div.simplebox div div { background: transparent url(oit_dev_2/corner_bottomleft_cce5ff.gif) no-repeat bottom left; }

    div.simplebox div div div { background: transparent url(oit_dev_2/corner_bottomright_cce5ff.gif) no-repeat bottom right; }

    I also attached the corners in a zip. Can you give me a hint how to get this working?

    many thanks&cheers,
    gezza

    corner_cce5ff.zip (1.06 Kb)
    Reads: 16849
    Posted by Gary Cunningham-Lee on Wed 05 of Aug, 2009 02:57 GMT-0000 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

    Copy to clipboard
    <div>content goes here </div>


    not the

    Copy to clipboard
    <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

    Posted by gezza on Wed 05 of Aug, 2009 20:07 GMT-0000 posts: 11 Hungary

    Hi Gary!

    Thanks for the answer and the tips! Actually I placed those extra divs in the template when I was testing but there was no effect..anyroad, the method you suggest sounds far better, I did not really want to mess with the templates, so I am glad to hear there is another way. Your link to the js file suggests me that I have to place the file in the templates folder at the style's directory to make it work, hope I am right..will find out soon 😊
    thanks&cheers,
    gezza