Loading...
 
 Error
  • The search index could not be updated. The site is misconfigured. Contact an administrator.
    SQLSTATE[42000]: Syntax error or access violation: 1064 unknown table 'themes_tiki_org_main_6604fd248f79c' in delete request
Tiki Design

Tiki Design


rounded corners

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

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

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


Layout

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