I was looking for some god css and found this page
Do a search on this page on the word popular and you will get a well laid out box. The heading is brilliant Its well laid out. I tried getting into the html but couldn’t even find any references in it to the style sheet.
Its entirely made of css with no images
How would I go about replicating that.
Hi,
If you are talking about the popular now box then the CSS is available through Firebug (or your favourite developer tools)…
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.rad_bot { border-radius: 0 0 3px 3px; }
.sidebar .block { margin-bottom: 30px; }
.sidebar .listtop { position: relative; }
.sidebar .shadowXtop {
border: 1px solid #E9E9E9;
box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.7);
}
.sidebar {
float: right;
margin: 25px 15px 80px 0;
padding: 0;
width: 300px;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix { zoom:1.0 }
.sidebar .listtop ul {
margin: 0;
padding: 0;
}
.sidebar .listtop ul li {
border-bottom: 1px solid #F1F1F1;
list-style-type: none;
margin: 0;
padding: 10px;
position: relative;
}
li.dsq-widget-item span {
color: #D8D8D8;
display: block;
float: left;
font-family: Georgia;
font-size: 1.8em;
font-weight: 700;
height: 25px;
line-height: 25px;
margin-right: 5px;
position: relative;
text-align: center;
top: -5px;
vertical-align: middle;
width: 25px;
}
.sidebar .listtop ul li a { text-decoration: none; }
.dsq-widget-list li a {
color: #2A2A2A;
font-size: 1em;
font-weight: 500;
}
#main .sidebar {
float: right;
margin: 25px 15px 80px 0;
padding: 0;
width: 300px;
}
h4 {
font-size: 1.2em;
line-height: 1.25;
margin-bottom: 1.25em;
}
.sidebar h4 {
background-color: #5A77A0;
border-bottom: 1px solid #4D678C;
box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
color: #D1D9E5;
font-family: "Calibri", "Droid Sans", Tahoma, Geneva, sans-serif;
font-weight: 500;
margin: 0;
padding: 5px 10px;
text-shadow: 1px 1px #486286;
text-transform: uppercase;
}
.sidebar .rad_top { border-radius: 3px 3px 0 0; }
.dsq-widget ul.dsq-widget-list {
padding: 0;
margin: 0;
text-align: left;
}
img.dsq-widget-avatar {
border: 0px;
margin: 0px;
padding: 0px 3px 3px 0px;
float: left;
}
a.dsq-widget-user { font-weight: bold; }
a.dsq-widget-thread { font-weight: bold; }
p.dsq-widget-meta {
clear: both;
font-size: 80%;
padding: 0;
margin: 0;
}
li.dsq-widget-item {
margin: 15px 0;
list-style-type: none;
clear: both;
}
span.dsq-widget-clout {
padding: 0 2px;
background-color: #ff7300;
color: #fff;
}
table.dsq-widget-horiz td { padding-right: 15px; }
.dsq-widget-comment p { display: inline; }
</style>
</head>
<body>
<div class="sidebar">
<h4 class="rad_top"><strong>Popular</strong> Now</h4>
<div class="block listtop clearfix rad_bot shadowXtop">
<ul class="dsq-widget-list">
<li class="dsq-widget-item even"><span>1</span> <a href="/ebooks-for-web-designers/" class="dsq-widget-thread">Lorem ipsum dolor sit amet ipsum dolor sit amet </a>
<p class="dsq-widget-meta">1 comment · 17 hours ago</p>
</li>
<li class="dsq-widget-item odd"><span>2</span> <a href="/principles-startup-should-follow/" class="dsq-widget-thread">Lorem ipsum dolor sit amet ipsum dolor sit ametipsum dolor sit amet</a>
<p class="dsq-widget-meta">1 comment · 20 hours ago</p>
</li>
</ul>
</div>
</div>
</body>
</html>
That’s just a rough grab but you should create your own rules based on the above and not copy someone else’s code directly though.
Hi Paul
Thanks. I found the inspect element in firefox (right click) which helped
I don’t like to just pinch things. I just didn’t understand the code since it had about 7 classes involved. I always like to simplify things so I can actually use them. I created my own version here (not quite as good but I will be able to use it )
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
strong {font-weight:bold;}
.sidebartop {font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;
font-size: 1.2em;
line-height: 1.25;
width:135px;
padding-bottom:4px;
border:1px;
border-top-left-radius: 10px 5px;
border-top-right-radius: 10px 5px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
color: rgb(209, 217, 229);
text-shadow: 1px 1px rgb(72, 98, 134);
background:rgb(90,119,160);
}
.sidebar {font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;
width:133px;
border:1px;
text-align: center;
color: rgb(88,88,88);
background:rgb(249,249,249);
left-margin:35px;
}
.odd{border-color:rgb(11,11,11);border: 1px solid #E9E9E9;background:rgb(256,256,256);
}
.even{border-color:rgb(11,11,11);border: 1px solid #E9E9E9;
background:rgb(249,249,249);
}
</style>
</head>
<div style="width:135px;float:right;box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.7);border: 1px solid #E9E9E9;
">
<div class="sidebartop" >
<strong>MAIN</strong> MENU
</div>
<div class="sidebar" >
<div class="odd" >
•Lesson 1</div>
<div class="even" >
• History topics</div>
<div class="odd" >
•General issues</div>
<div class="even" >
•Main topics</div>
</div>
</div>
</div>
</body>
</html>
That’s the best way to learn and we all look at source code to see how things are done and then set about doing it ourselves.
If there’s anything specific you don’t understand then just shout and we’ll try to clarify .