unstyled = styled

style post markup without shortcodes in wordpress

by Scott Godin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js"></script>
        <div class="container">
        <div class="entry">
            <h2>Sample Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula, nisi id rutrum aliquam, magna orci convallis justo, ut vestibulum ipsum dui eu tortor. Fusce ac leo ac arcu fringilla mattis. Sed ac justo nec justo ullamcorper blandit. Nulla condimentum erat quis mauris accumsan sodales imperdiet urna fermentum. Sed a lobortis lectus. Integer ac lacus eu neque dignissim tincidunt.</p>
            <p><img src="http://homedesign2you.com/wp-content/uploads/2011/04/endless_pools2-495x330.jpg" alt=""/><img src="http://homedesign2you.com/wp-content/uploads/2011/04/endless_pools2-495x330.jpg" alt=""/></p>
        </div>
        </div>

CSS

.container { position: relative; font-size: 9pt; width: 855px; margin: 1.5em auto;}
.entry { width: 35%; float: right; padding-bottom: 30px; border-bottom: 1px solid lightgray; }
.entry h2 { text-transform: uppercase; border-bottom: 1px solid lightgray; margin-bottom: 30px; font-weight: bold; padding-bottom: 3px;}
.entry p { margin: 2em 0; line-height:14pt; }
.col-images { position: absolute; top: 0; left: 0; }
.col-images img { display: none; }
.col-images img:first-child { display: block; }
.more-views-title { float: left; margin-right: 1em; margin-top: 4px; }
.more-views { display: block; margin-top: 6px; }
.more-views a {background: transparent url(http://i44.tinypic.com/nzlwyc.png) no-repeat scroll top left; display: inline-block; height: 11px; width: 12px; }
.more-views a.activeSlide {background-position: 0px -11px;}

JavaScript

var $jQ = jQuery.noConflict();
$jQ(function() {
    $jQ(".wordpress-category-index .entry")
        .find("img")
        .wrapAll('<div class="col-images"><div class="col-image-cycle"/></div>')
        .parent().parent().append('<h3 class="more-views-title">More Views:</h3><div class="more-views"/>')
        .find(".col-image-cycle")
        .cycle({
            fx: 'scrollLeft',
            sync: true,
            speed: 'fast',
            timeout: 0,
            pause: true,
            next: '.col-image-cycle',
            pager: '.more-views',
            pagerAnchorBuilder: function(idx, slide) { 
                return '<a href="#"></a>';
            }
        });
});