Rounded corners like drupal.org
I have searched Google and drupal.org but cannot find a walkthrough for the rounded corners at drupal.org--especially the orange and green blobs at the top, which are awesome. Can anyone explain, or provide an educational link, to understand their code? Below is output from Firebug for the orange box: <div class="box"> <div class="w1"> <div class="w2"> <div class="w3"> <div class="w4"> <p> </p> <p>Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.</p> <ul id="missionlinks"> </ul> <div id="missionlinks4"/> </div> </div> </div> </div> #mission .box .w4 {6a2940069b4343128... (line 1) background-image:url(/themes/bluebeach/block2-bl.png); background-position:0% 100%; background-repeat:no-repeat; left:-2px; min-height:187px; padding:16px 195px 16px 16px; position:relative; z-index:10; } Inherited fromdiv.box #mission .box {6a2940069b4343128... (line 1) color:#4E3000; font-size:1.1em; } Inherited fromdiv#contentwrapper #contentwrapper {6a2940069b4343128... (line 1) font-size:0.8em; } Inherited frombody html > body {6a2940069b4343128... (line 1) font-size:16px; } body, .form-text, .form-password, textarea, th, td {6a2940069b4343128... (line 1) color:#003150; } body, input, textarea, th, td, select {6a2940069b4343128... (line 1) font-family:"Bitstream Vera Sans",Verdana,Helvetica; } body {6a2940069b4343128... (line 1) font-size:100%; } Thanks!
On 15 Apr 2008, at 18:21, Sean Wingert wrote:
I have searched Google and drupal.org but cannot find a walkthrough for the rounded corners at drupal.org--especially the orange and green blobs at the top, which are awesome.
Can anyone explain, or provide an educational link, to understand their code? Below is output from Firebug for the orange box: <snip>
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners -- Nicolas Borda ------------------- http://nic.ipwa.net/ http://www.linkedin.com/in/nborda
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners
The implementation on drupal.org is done using pure CSS. The idea is that you're using those 4 extra divs as hooks to add the 4 background images. You specify the position of the background images so they sit in each of the 4 corners. There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods. http://www.google.com/search?hl=en&q=rounded+corners+css Regards, Richard Burford Freestyle Systems (01642) 288064 07891138356 rich@freestylesystems.co.uk www.freestylesystems.co.uk On 15 Apr 2008, at 18:31, Nicolas Borda wrote:
On 15 Apr 2008, at 18:21, Sean Wingert wrote:
I have searched Google and drupal.org but cannot find a walkthrough for the rounded corners at drupal.org--especially the orange and green blobs at the top, which are awesome.
Can anyone explain, or provide an educational link, to understand their code? Below is output from Firebug for the orange box: <snip>
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners
--
Nicolas Borda -------------------
http://nic.ipwa.net/ http://www.linkedin.com/in/nborda
_______________________________________________ themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
On 15 Apr 2008, at 18:55, Richard Burford wrote:
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners
The implementation on drupal.org is done using pure CSS. The idea is that you're using those 4 extra divs as hooks to add the 4 background images. You specify the position of the background images so they sit in each of the 4 corners. There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods.
Yes you are right, I didn't check out the CSS in Firebug, sorry. I like this technique: http://www.albin.net/examples/roundedcorners/ -- Nicolas Borda ------------------------- http://nic.ipwa.net/ http://www.linkedin.com/in/nborda
I like this technique: http://www.albin.net/examples/roundedcorners/
The problem with that method is that it requires you to add the images as markup so they are effectively hard-coded. Using a CSS technique like Steven used on drupal.org you have more control over the images and don't need more markup than the 4 divs with your corner classes. This means you have less effort to change the colour of rounded blocks using #block-id .corner-class {} psynaptic http://freestylesystems.co.uk On 15 Apr 2008, at 19:30, Nicolas Borda wrote:
On 15 Apr 2008, at 18:55, Richard Burford wrote:
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners
The implementation on drupal.org is done using pure CSS. The idea is that you're using those 4 extra divs as hooks to add the 4 background images. You specify the position of the background images so they sit in each of the 4 corners. There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods.
Yes you are right, I didn't check out the CSS in Firebug, sorry.
I like this technique: http://www.albin.net/examples/roundedcorners/
--
Nicolas Borda -------------------------
http://nic.ipwa.net/ http://www.linkedin.com/in/nborda
_______________________________________________ themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
On Apr 15, 2008, at 11:30 AM, Nicolas Borda wrote:
On 15 Apr 2008, at 18:55, Richard Burford wrote:
I think it's done with JavaScript: http://acko.net/blog/anti-aliased-nifty-corners
The implementation on drupal.org is done using pure CSS. The idea is that you're using those 4 extra divs as hooks to add the 4 background images. You specify the position of the background images so they sit in each of the 4 corners. There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods.
Yes you are right, I didn't check out the CSS in Firebug, sorry.
I like this technique: http://www.albin.net/examples/roundedcorners/
Really?!? *shudders* ;-) I don't use that technique anymore. I use the wrapper div w/ background-image technique. For a fixed width div, you need 2 wrapper divs. For a fluid width div, you need 5 wrapper divs. That gets the imgs out of the html. - John
Richard wrote:
There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods. http://www.google.com/search?hl=en&q=rounded+corners+css
Richard, your message's link to Google turned out to be awesome! It lead me to try http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/. I'm using Panels2 and Views. The link's approach works well, but only when I insert "custom HTML code" in Panels2, or create a custom block containing HTML (I'm using the sample code below). However, this approach doesn't seem very Drupal-ish--meaning, static HTML renders translations inoperable since nothing passes through t() and changes to the drupal menu aren't (obviously) updated in my static code. How do I wrap that--or the drupal.org--approach into the Drupal menu system? Do I need to create a custom region in a PHP Template, and therefore review the VanDyk / Westgate chapter on Theming? <!-- most basic example --> <div class="dialog"> <div class="content"> <div class="t"></div> <!-- Your content goes here --> <h1>Even <em>More</em> Rounded Corners With CSS</h1> <p>Here is a very simple example dialog.</p> <li class="round-li"> <a title="An assortment of high-quality products" href="/products">Products</a> </li> <p>Note that if gradients are used, you will need a "min-height" (or fixed height) rule on the body of the dialog. If these examples appear funny at the bottom, it is because they do not enforce the min-height rule.</p> </div> <div class="b"><div></div></div> </div>
Sounds like you need to use block.tpl.php http://drupal.org/node/11813 psynaptic http://freestylesystems.co.uk On 16 Apr 2008, at 18:21, Sean Wingert wrote:
Richard wrote:
There are so many different ways you can do it and there are even sites whose sole purpose is to showcase these different methods. http://www.google.com/search?hl=en&q=rounded+corners+css
Richard, your message's link to Google turned out to be awesome! It lead me to try http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ . I'm using Panels2 and Views. The link's approach works well, but only when I insert "custom HTML code" in Panels2, or create a custom block containing HTML (I'm using the sample code below).
However, this approach doesn't seem very Drupal-ish--meaning, static HTML renders translations inoperable since nothing passes through t() and changes to the drupal menu aren't (obviously) updated in my static code. How do I wrap that--or the drupal.org--approach into the Drupal menu system? Do I need to create a custom region in a PHP Template, and therefore review the VanDyk / Westgate chapter on Theming?
<!-- most basic example --> <div class="dialog"> <div class="content"> <div class="t"></div> <!-- Your content goes here --> <h1>Even <em>More</em> Rounded Corners With CSS</h1> <p>Here is a very simple example dialog.</p>
<li class="round-li"> <a title="An assortment of high-quality products" href="/products">Products</a> </li>
<p>Note that if gradients are used, you will need a "min- height" (or fixed height) rule on the body of the dialog. If these examples appear funny at the bottom, it is because they do not enforce the min-height rule.</p> </div> <div class="b"><div></div></div> </div>
_______________________________________________ themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
participants (4)
-
John Wilkins -
Nicolas Borda -
Richard Burford -
Sean Wingert