Posts Tagged ‘css’

I figured I’d share two ways I’ve done blockquotes on this site.
Here is the HTML being used

<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet quam. Sed quis justo scelerisque dui iaculis euismod. Nunc sit amet lectus ac orci placerat pulvinar?</p></blockquote>


The first is from the original design the site had.

In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.


blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/


The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.


blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}


This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.

I recently saw a tutorial on SimplePie’s site about using relative dates and I modified the function to output a CSS class rather than text. That way you can make newer stories bold, brighter, or bigger and older stories dimmed out or smaller. Use your imagination with CSS.

Here is the function

//CREATE CSS BASED ON DATE
function create_age_css_class($date_sent)
{
/**
$date_sent should be in the following format: YYYYMMDDHHMMSS
Based on doRelativeDate() By Garrett Murray, http://graveyard.maniacalrage.net/etc/relative/
**/
$in_seconds = strtotime(substr($date_sent,0,8).' '.
substr($date_sent,8,2).':'.
substr($date_sent,10,2).':'.
substr($date_sent,12,2));
$diff = time()-$in_seconds;
if ($diff < 86400)
$css_class = 'age_today';
else if ($diff < 604800)
$css_class = 'age_days';
else if ($diff < 1209600)
$css_class = 'age_week';
else if ($diff < 2630880)
$css_class = 'age_weeks';
else
$css_class = 'age_month';
return $css_class;
}


Here is how I call it

$data .= '<li><a href="'. $item->get_permalink();
//SET CLASS BASED ON DATE/AGE
$data .= ' class="' . create_age_css_class($item->get_date('YmdHis')) . '"';
$data .= '>';


You don’t have to use SimplePie for this function, but its what inspired me to modify it.