Skip to main content
Welcome guest. | Register | Login | Post

New Look

7 replies [Last post]
supermike's picture
Offline
Joined: 2006-02-17

If you're ever interested in a new look for Nuxified.org, such as:

http://drupal.org/node/257

I just wanted to say that I have figured out in as few lines of code how they do the rounded edge boxes with CSS and div/span tags. I've rewritten it somewhat. Just give me the way you want me to ship this and off it goes.

I also LOVE the gradient banner on that site. It's simple, but has a great visual effect.

libervisco's picture
Offline
Joined: 2006-05-04

I use some CSS trick for round corners on Nuxified.com, but it might not be what you have. Smiling

If you wish to give it out maybe best would be to just put the code here in forums (enclosed in tags.

Btw, I think CSS round tags work only in mozilla browsers (and konqueror, maybe opera too I think), but not in IE 6 where it'll just display plain square corners.

Thanks.
Daniel

supermike's picture
Offline
Joined: 2006-02-17
"libervisco" wrote:

Btw, I think CSS round tags work only in mozilla browsers (and konqueror, maybe opera too I think), but not in IE 6 where it'll just display plain square corners.
l

Nope, hit the Drupal link I provided, using IE 6, and you'll find it works there too. So, if you want this code, I'll get it to you in just a moment.

Oh, darn. Unfortunately this has images attached. I can paste the HTML and CSS in here, but where do I put the images? They are tiny 7x7 pixel PNGs -- only 4 of them.

libervisco's picture
Offline
Joined: 2006-05-04

I don't have windows anywhere near, so I can't check with IE 6, but never mind.

I am not really in need for that feature right now, but I could be if you guys want me to make some round corners on Nuxified.org. Eye

In any case if you wish to send the package to me I appreciate it. You can send it to my email address at libervis [at] libervis.com

But feel free to post the code here if others would like to see. Smiling Not a requirement though. Laughing out loud

Thank you

supermike's picture
Offline
Joined: 2006-02-17

You'll probably want to move this to some other forum:

<!--
Name as test.html to see this sample.

See http://drupal.org/node/257 for what the corners look like.

You'll want to make your own 7x7 pixel corner PNG files, or you can use
Firefox's View Page Info, Media tab, to find the corner images from the 
Drupal site and save them. You'll want to rename them as section_tl, section_tr, section_bl, and section_br. You can use GIMP's colorizer to 
change these into other colors, and then edit the color in the CSS below.

The color for the corners is #0174bb.

Forgive me for including the CSS and HTML in one single file without a 
LINKREL connection. I'm taking a shortcut here.
-->
<style>
.section {
  margin: 1px 5px 15px 5px;
  position: relative; /* for IE bug */
}
.inside {
  background-color: #DFEDF7;
  border: solid #90C2E1;
  border-width: 0px 1px 1px 1px;
}
.section .inside .brtrick {
  background: url(section_br.png) no-repeat 100% 100%;
  position: relative;
/* to improve, find a way to have "top: 0px" only on IE */
  top: 1px;
  left: 1px;
}
.section .inside .bltrick {
  background: url(section_bl.png) no-repeat 0% 100%;
  position: relative;
  padding: 5px;
  left: -2px;
  top: 0px;
}
.section .brtrick {
  display: block;
  background: url(section_tl.png) no-repeat 0% 0%;
  position: relative;
}
.section .bltrick {
  display: block;
  background: url(section_tr.png) no-repeat 100% 0%;
  position: relative;
  padding: 3px 5px 2px 5px;
}
.section h4 {
  background-color: #fff;
  background-color: #0174BB;
  margin: 0px;
  font-size: 1.0em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-size: 1.0em;
}
</style>

<!-- START SECTION BLOCK -->
<div class="section">
<h4><span class="brtrick"><span class="bltrick">
<!-- START SECTION HEADER TEXT -->
Sample Header
<!-- END SECTION HEADER TEXT -->
</span></span></h4>
<div class="inside"><div class="brtrick"><div class="bltrick">
<!-- START SECTION BODY TEXT -->
<ul>
<li>Body Item 1</li>
<li>Body Item 2</li>
<li>Body Item 3</li>
<li>Body Item 4</li>
<li>Body Item 5</li>
</ul>
<!-- END SECTION BODY TEXT -->
</div></div></div>
</div>
<!-- END SECTION BLOCK -->

<!-- 
Notes for Improvement:

* Now if you can do this in less lines of code, and yet have it work in IE
and Firefox, I'll be reasonably impressed.

* If you can get it so that it uses one single image file and shifts it around,
I'll be reasonably impressed with that too.

* See the item marked "/* to improve, find a way to have "top: 0px" only on IE */" for something that is a very tiny, almost not noticable, cosmetic bug in IE.

-->
free-zombie's picture
Offline
Joined: 2006-03-08

I see no round corners :S (konqueror 3.5.1)

libervisco's picture
Offline
Joined: 2006-05-04
"supermike" wrote:

You'll probably want to move this to some other forum

That's ok.. that was a suggestion so it can stay where it is.

"free-zombie" wrote:

I see no round corners :S (konqueror 3.5.1)

You mean round corners on this page don't work: http://drupal.org/node/257 ?

They work for me on Konqueror 3.5.1.

supermike's picture
Offline
Joined: 2006-02-17
"free-zombie" wrote:

I see no round corners :S (konqueror 3.5.1)

If you just saved the HTML and ran it, you would not see round corners. You need the PNG files to see that. I stated that in the HTML. But that's on the assumption you did that.

Hope this helps! Smiling

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.