By lobcat on

on the drupal home page the main menu or tabs have rounded corners: http://drupal.org/home

Drupal HomepageLogin / Register have rounded corners and turn white when highlighted

how do I make something like that for the drupal default theme????

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

You can use firebug (a Firefox extension) to examine the html and see the css applied.

DGvNp0niToyRspXaaqx3PiQBMn66QXyAq5yrNHpz’s picture

DGvNp0niToyRspXaaqx3PiQBMn66QXyAq5yrNHpz commented

The implementation on the homepage of http://drupal.org/ uses an image based solution. I personally would recommend a CSS3 solution like this

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8" />
	
		<title>Rounded Corner Navigation Example</title>
	
		<style>
		ul {
			background-color: #56B3E6;
			display: block;
			padding: 20px;
		}
		li {
			display: inline;
			margin: 0;
			margin-left: 10px;
		}
			li:first-child {
				margin-left: 0px;
			}
			li a {
				background-color: #0678BE;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				-moz-border-radius-topLeft: 10px;
				-moz-border-radius-topRight: 10px;
				-webkit-border-top-left-radius: 10px;
				-webkit-border-top-right-radius: 10px;
				color: #FFFFFF;
				font-family: Helvetica, Arial, sans-serif;
				font-size: 12px;
				text-decoration: none;
				padding: 10px 10px;
			}
			li a:hover {
				background-color: #FFFFFF;
				color: #000000;
			}
		</style>
	</head>
	
	<body lang="en">
	
		<ul>
			<li class="homepage first"><a href="/home">Drupal Homepage</a></li>
			<li class="dashboard last"><a href="/user/1/dashboard">Your Dashboard</a></li>
		</ul>
	
	</body>

</html>

This is a fully functional example which you can copy and paste into your code editor and then view in a browser, you would need to apply the styles within the

tags to your themes main CSS file.
Doren Berge’s picture

Doren Berge commented

CSS 3 allows rounded corners. But browser support is not complete... yet. But very doable.
The Drupal site (and most sites that use similar effects, use background images positioned with CSS using "sprites."

There are TONS of tutorials on how to do this. Try.
http://www.smashingmagazine.com/
http://www.alistapart.com/

Dan Cederholm's books are really good for these concepts too.
"Bulletproof Web Design," "Web Standards Solutions"...

DGvNp0niToyRspXaaqx3PiQBMn66QXyAq5yrNHpz’s picture

DGvNp0niToyRspXaaqx3PiQBMn66QXyAq5yrNHpz commented

Really great links you posted on the image example.

I second the recommendation for Dan Cederholm's "Bulletproof Web Design" book.

Also check out "CSS Mastery", there are some good examples in there as well.