Jesse Cravens Global RSS Feed

CSS

Your Virtual Ph.D. - Popular Science

Want to master a new computer language? Brush up on your calculus? Learn how to fix your car? No sweat. With the vast array of college courses and podcasts available online, the apple of knowledge is ripe for the clicking. Here, we've narrowed the options to our favorites—the best of the geeky best, from free podcasts and lectures to accredited distance-learning programs from major universities.

Powered by ScribeFire.

Dave Child has posted a number of Web development related cheat sheets in .pdf and .png format on his blog. These include CSS, xHTML, JavaScript, Ruby on Rails, PHP, and MySQL.

Thanks Dave!

In case your interested - here is my adaptation of the original zen Minimalist theme. I'm calling it zenPro.

First, the stylesheet:

a {
color: #666;
        text-decoration: none;

}

acronym, abbr {
border-bottom: 1px dashed #333;
}

acronym, abbr, span.caps {
cursor: help;
font-size: 11px;
letter-spacing: .07em;
}

blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}

#neoheader{
        padding-left: 85px;
}

body {
background-image: url(center.gif);
        background-color: #BABAAB;
        background-repeat: repeat-y;
        font-family: "verdana";
        text-decoration: none;
font-size: 10px;
        letter-spacing: .8px;
        line-height: 1.8em;
color: #333;
margin-left: auto;
        margin-right: auto;
padding: 0;
text-align: center; /* IE 5.5 hack */
}

cite {
font-size: 9px;
font-style: normal;
}

h1 {
font-size: 15px;
        margin: 20px 0px 0px 0px;
padding: 0px;
text-align: left;
}

h2 {
font-size: 6px;
margin: 20px 0px 0px 0px;
padding-bottom: 5px;
}

h3 {
font-size: 20px;
margin: 20px 0px 0px 0px;
padding-bottom: 5px;
}

h1 a:hover, h2 a:hover, h3 a:hover {
color: #A0C329;text-decoration: line-through;
}

ol#comments li p {
font-size: 100%;
}

p, li, .feedback {
font-size: 10px;
}

ul.post-meta {
list-style: none;
}

ul.post-meta span.post-meta-key {
font-weight: bold;
}

.credit {
background: #fff;
color: #A0C329;
font-size: 9px;
margin: 10px 0 0 0;
padding: 3px;
text-align: right;
}

.credit a:link, .credit a:hover {
color: #A0C329;
text-decoration: none;
}

.feedback {
color: #ccc;
text-align: left;
clear: both;
font-size: 90%;
padding-left: 15px;
}

.meta {
font-size: 9px;
        padding: 0px;
        margin-left: 20px;
}
.meta, .meta a {
color: #714514;
font-weight: normal;
letter-spacing: 0;
}

.post, {
margin-top: 5px;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 35px;
        border: 1px solid #ccc;
        padding: 10px;
       
}

#comments-post {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
        border: 0px solid #ccc;
        padding: 10px;
}

.date {
        margin-left: 20px;
}

.storytitle {
margin-top: 0px;
margin-bottom: 0px;
        margin-left: 20px;
}

.storytitle a {
text-decoration: none;
}

.textarea {
width: 200px;
margin: 0;
}

#clearer {
clear: both;
margin: 0;
padding: 0;
}

#commentform  #comment{
width: 400px;
margin: 0;
padding: 10px;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background: #eee;
color: #333;
border: 1px solid #333;
padding: .2em;
}

#commentform textarea {
width: 100%;
}

#commentlist li ul {
border-left: 3px solid #eee;
font-size: 12px;
list-style-type: none;
}
#content {
float: left;
width: 500px;
        border: 1px solid #000;
margin: 0px;
padding: 0px;
background-color: #fff;
}
#content p{
padding-left: 15px;
        padding-right: 15px;
}

#content .meta{
padding-left: 10px;
}

#footer {
border-top: 1px solid #ccc;
margin-bottom: 0;
margin-left: 30px;
margin-right: 30px;
        text-align: left;
}

#main {
}

#header, #header a:link {
font-size: 10px;
        height: 45px;
font-weight: normal;
color: #ccc;
text-decoration: none;
}

#header a:hover {
color: #A0C329;
        text-decoration: line-through;
}

#menu {
        border: 1px solid #000;       
        background: #fff;
        float: right;
width: 250px;
}

#nav {
       
        padding-left: 5px;
padding-right: 5px;
}

#nav form {
margin: 0 0 0 13px;
}

#nav input#s {
width: 80%;
background: #eee;

color: #A0C329;
}

#nav ul {
color: #333;
font-weight: normal;
font-size: 14px;
list-style-type: none;
margin: 5px;
padding: 10px;
        border-top: 1px solid #ccc;

}

/* this is a fix for the way WP handles styling for link and theme switcher */
#nav li h2 {
color: #333;
font-weight: normal;
font-size: 18px;
list-style-type: none;
margin: 0;
padding-left: 3px;

}

#nav ul li {
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}

#nav ul ul {
font-size: 10px;
font-weight: normal;
line-height: normal;
list-style-type: none;
margin: 0;
text-align: left;
}

#nav ul ul li, #nav ul li ul li {
font-size: 10px;
font-weight: normal;
border: 0;
letter-spacing: 0;
margin-top: 0;
padding: 1px;
}

#nav ul ul li a {
color: #444;
text-decoration: none;
}

#nav ul ul li a:hover {
border-bottom: 1px solid #333;
        text-decoration: line-through;
}

#nav ul ul ul.children {
font-size: 11px;
padding-left: 4px;
}

#rap {
width: 772px;
background: #E7E7E0;
margin: auto;
margin-top: 20px;
margin-bottom: 0px;
        border: 1px solid #000;
        padding: 20px;
text-align: left; /* IE 5.5 hack part II */
}
#wp-calendar {
border: 1px solid #000;
empty-cells: show;
font-size: 11px;
margin: 0;
width: 95%;
text-align: center;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
text-decoration: none;
}

#wp-calendar a:hover {
background: #eee;
color: #333;
}

#wp-calendar caption {
color: #444;
font-size: 18px;
font-weight: normal;
text-align: left;
}

#wp-calendar td {
color: #444;
font-weight: normal;
font-size: 11px;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}

#wp-calendar td.pad:hover {
background: #fff;
}

#wp-calendar td:hover, #wp-calendar #today {
background: #eee;
color: #A0C329;
}

#wp-calendar th {
font-style: normal;

}

/* tabbed navigation code */

#pagetab {
padding: 5px 0 3px 0;
margin: 10px 0 0 1px;
font-weight: bold;
font-size: 10px;
font-family: arial, "Trebuchet MS", sans-serif;
}

#pagetab ul {
list-style: none;
margin: 0;
display: inline;
}

#pagetab li {
list-style: none;
margin: 0;
display: inline;
}

#pagetab li a {
padding: 3px 0.5em;
margin-left: 1px;
border: 1px solid #777;
border-bottom: none;
background: #eee;
text-decoration: none;
}

#pagetab li a:link { color: #714514; }

#pagetab li a:visited { color: #714514; }

#pagetab li a:hover {
color: #714514;
background: #fff;
border-top: 1px solid #222;
border-right: 1px solid #222;
border-bottom: 1px solid #fff !important;
border-left: 1px solid #222;
}

#pagetab li a#current {
background: #714514;
border-bottom: none;
}

.page_item {
margin: 0;
padding: 0;
}

.right img {
        float:right;
        margin: 4px;
        padding: 4px;
        background: #ccc;
        border: 1px solid #000;
}
.left img {
        float:left;
        margin: 4px;
        padding: 4px;
        background: #ccc;
        border: 1px solid #000;
}

.sidebar {
      
       border-bottom: 1px solid #ccc;
}

.credit {
       border: 1px solid #000;
       padding-right: 10px;
}
.audio {
       padding-top: 5px;      
       text-align:center;
}
.feed {
       padding:10px;
       float: right;
}

.storytitle sIFR-replaced h2, .storytitle sIFR-replaced h3,{
padding-left: 10px;
}
.sIFR-replaced h2,
.sIFR-replaced h3,{

padding-left: 10px;
}

So digg and reddit have both posted on the work of Stu Nichols and his pure CSS photo gallery. Check it out: here. I'm anxious to try it out. I'd like to find a way to blend this image gallery with a liquid three column layout, but the gallery is fixed - so it may have to be implemented on an internal page. Although, it would be interesting to have this image gallery present on a home page - since before the hover it only takes up the room of a horizontal menu. I'll be exploring this idea further - stay tuned.

sIFR, PHP, and More! My WordPress Plugin Competition entries… @ CHAITGEAR @ [CG @ Site5] :

Spent some time today configuring sIFR into wordpress in order to achieve these h1, h2 , h3 text you see displayed here. But then I came across this plug in for wordpress - which makes things much easier.

I making use of a number of fonts, but I love the quadaptor font.