Rounded boxes/containers in html feature/module

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.

6/14/2009 12:55:53 PM

naveenv2002

Total Posts 33

View Posts

Rounded boxes/containers in html feature/module

I love mojoportal and am basically a developer. so find it little hard to do graphics stuff and skinning.

Can some one in the forum help me understand how I can created rounded boxes and buttons in the html content (page/feature/editor) that we inlcude as part of the html editors. following are the steps I wish to do

1. Create a page

2. Add html feature/module on to the page

3. Click the edit link

4. And here I want CSS based, rounded with colored background box/container in the html portion. Also I want the same to be able to do with rounded buttons.

5. Greatly appreciate if some one could give me a sample code (CSS) to be inserted so I could use it straight away.

For example in a separate page the below code produces a rounded div/paragraph. But am not sure how do I include this in the html editor that we see in the html content module.

===============

<html>
<style type="text/css">
p, .container3 h3 {margin:0 15px;}
.container, .container2, .container3 {background:#ccc; color:#fff; margin:0 15px;}
.container2 { width:200px; }
.container3 { width: 200px; float: right; }
.rtop, .rbottom{display:block; background:#fff;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#ccc;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

.rl1 {margin: 0 0 0 5px; }
.rl2 {margin: 0 0 0 3px; }
.rl3 {margin: 0 0 0 2px; }
.rl4 {margin: 0 0 0 1px; height: 2px;}

.rr1 {margin: 0 5px 0 0; }
.rr2 {margin: 0 3px 0 0; }
.rr3 {margin: 0 2px 0 0; }
.rr4 {margin: 0 1px 0 0; height: 2px;}
</style>

<body>
<div class="container">
 
Sed do eiusmod tempor incididunt ullamco laboris nisi ut labore et dolore
magna aliqua. Quis nostrud exercitation qui officia deserunt ut enim ad minim
veniam. In reprehenderit in voluptate mollit anim id est laborum. Duis aute
irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, qui officia deserunt cupidatat non proident.
Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.

</div>

6/16/2009 5:15:40 AM

Joe Audette

Total Posts 18439

View Posts

Re: Rounded boxes/containers in html feature/module

You would want to put the css in one of the css files in your skin folder and then only paste in the html markup (just the parts inside the body tag, do not paste in a new body tag as the page already has a body) using source view of the editor. After making changes to css youneed to touch web.config to clear the server cache and you also need to clear the browser cache to get the new css. Some of the included skins already have corner rounding using this technique. This technique just can create a container with rounded corners it can't round buttons as far as I know.

Hope it helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.