RocketTheme - TOPIC: Module with rounded corners (1/3)

Welcome Guest! Login

0 items Join Now

- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Module with rounded corners

Posted 18 years 11 months ago
- I would like to create rounded corners using pure CSS. I found out the code ( http://www.spiffycorners.com/sc.php?sc=spiffy&bg=ffffff&fg=0a67e6 ), but didn't find where to insert it, and how to assign it to a certain module. This is certainly very simple...
- Yves
#9877
Re: Module with rounded corners

Posted 18 years 11 months ago
- Let me make a cup of coffee and I will explain...
#9902
- zigzag
- Sr. Rocketeer
- Posts: 220
- Thanks: 0
Re: Module with rounded corners

Posted 18 years 11 months ago
- I'd really like to know how to do this too - hurry up with the coffee ;D
  Not much help but I'm quite pleased as I've found out that if you paste in the whole code (inc the style bit) into a custom module it works nicely, but I'd like to do it for all modules.
#9903
Re: Module with rounded corners

Posted 18 years 11 months ago
- Made the coffee, but I need to read up on some stuff, understood the question in a wrong way.
  
  I understood it as how do I add some content within a module that is placed within a rounded box, you want to have the actual module rounded right?
  
  You need it to work as in the template "Open Office" - right?
  
  I will see what I can do, but check the css and index of the template I just mentioned.
#9904
- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Re: Module with rounded corners

Posted 18 years 11 months ago
- Was the coffee good ?
  
  Yes, it's like in Open Office template (I didn't look this template...), I want a specific module with rounded corners.
  
  I check now the CSS and index of this template to understand how it's done.
  
  [Edit]: I see that's it's done with background image above and under. But I would like to do it in pure CSS, like spiffycorners.
  
  My question is rather: where do I put the code produced by spiffycorners in order to apply it to a specific module, like Poll for example.
- Last Edit: 18 years 11 months ago by .
- Yves
#9905

Re: Module with rounded corners

Posted 18 years 11 months ago

Well in the html part of the template you will found something like this:

                                   &nbsp; <div class="forcewidth">
                                        <?php if (mosCountModules('newsflash') > 0) { ?>
                                             <div class="redbox_t"></div>
                                             <div class="redbox_m">
                                                  <?php mosLoadModules('newsflash', -1); ?>
                                             </div>
                                             <div class="redbox_b"></div>
                                        <?php } ?>

That's where it all happens for the red/orange newsflash box on the mentioned template.

Then find all the stuff that is mentioned in the CSS files regarding redbox_something eg. what images are used and so on.
You should be able to replace the stuff you got with the stuff from this template.

#9906

Re: Module with rounded corners

Posted 18 years 11 months ago
- I bet that t stands for top, m for mid and b for bottom
#9907

Re: Module with rounded corners

Posted 18 years 11 months ago

Yep it's all in the css template:

So add the stuff from the html and adjust it to the template you want.
Then download the required images mentioned in the css, upload em to your template images folder:
Add the css to your css file.

If you need some special look as grom the generator site you mentioned, add that instead. A little puzzle but def. possible.

div.forcewidth {
&nbsp; width: 194px;
&nbsp; overflow: hidden;
}
 
td.seperator {
     background: url(../images/oo_seperator_vert.png) top center repeat-y;
}
 
td.middle {
&nbsp; width: 550px;
}
 
div.redbox_t {
&nbsp; float: left;
&nbsp; width: 194px;
     height: 10px;
     overflow: hidden;
     background: url(../images/oo_redbox_t.png) no-repeat;
}
 
div.redbox_m {
&nbsp; float: left;
     width: 178px !important;
     width: 194px;
     background: url(../images/oo_redbox_m.png) repeat-y;     
     padding: 8px;
}
 
div.redbox_m td {
     color: #ffffff;
}
 
div.redbox_b {
&nbsp; float: left;
&nbsp; width: 194px;
     height: 10px;
     overflow: hidden;
     background: url(../images/oo_redbox_b.png) no-repeat;
     margin-bottom: 8px;
}

Last Edit: 18 years 11 months ago by .

#9908

Re: Module with rounded corners

Posted 18 years 11 months ago
- Yves Gabioud wrote:
  Was the coffee good ?
  
  Yes, it's like in Open Office template (I didn't look this template...), I want a specific module with rounded corners.
  
  I check now the CSS and index of this template to understand how it's done.
  
  [Edit]: I see that's it's done with background image above and under. But I would like to do it in pure CSS, like spiffycorners.
  
  My question is rather: where do I put the code produced by spiffycorners in order to apply it to a specific module, like Poll for example.
  
  But Spiffycorners use images as well?
  
  As far as I know, doing rounded corners with css and no images, is just a bizarre hobby for css freaks and the few examples of css I have seen doesnt look healthy.
- Last Edit: 18 years 11 months ago by .
#9909
Re: Module with rounded corners

Posted 18 years 11 months ago
- Sorry thought it was code from the Spiffy Generator.
  
  I can see the link is one of those without images, not sure how I would add all those lines really, imo it looks experimental just for the sake of doing it?
#9910

Time to create page: 0.068 seconds