Nile Flores Media

Helping You Rock Out Your Website Like A Rockstar

You are here: Home » Blogging » Custom Thesis Theme #1: Blue Simplicity

Custom Thesis Theme #1: Blue Simplicity

By 2 Comments


There really are not that many custom Thesis themes out there. Of course, they are also known as skins. For me, I like to use the custom CSS, the custom configuration file, and also Thesis OpenHook.

My first custom Thesis “skin” is more of a step by step tutorial. So, before I go into this tutorial, here is what the result SHOULD look like. Plugin installed for the navigation is WP-PageNavi. Layout includes an author’s box and a simple custom comment area.

(Right click on image to open larger screenshot preview)

This tutorial is a bit long, so I broke it into 6 parts. It really does not matter what order, but this was the order I thought would be best. You are welcome to adjust whatever you wish.

Here is the download link for the images included with this simple skin/ theme.

Download Background Tile #9 (2588 downloads )

1. Adjusting Site Options

  • a. Header: make sure not to check both boxes to show header and tagline
  • b. Feed Link in Nav Menu: make sure not to check box to show feed in nav menu

2. Adjusting Design Options

  • a. Body and Content: select Arial
  • b. Nav Menu: In the field for nav border width (px), enter 0
  • c. HTML Framework: select Page framework
  • d. Outer Page Padding: select 1.0
  • e. Columns: select 2 and specify 700 for content and 300 for sidebar (1000px width)
  • f. Column Order: select Content, Sidebar 1
  • g. Multimedia Box – select option to not show multimedia box

3. custom_functions.php


function cat_nav() { ?>
<ul id="cat_tabs">
<?php wp_list_categories('title_li='); ?>
</ul>
<?php }
add_action('thesis_hook_after_header','cat_nav');
remove_action('thesis_hook_footer', 'thesis_attribution');

function post_footer_author() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h4>Article by <a href="&lt;?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_description(); ?></p>
<p class="hlight"><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles.</p><p>If you like This post, you can follow this author at on <a href="http://www.twitter.com/"><b>Twitter</b></a>.</p>
<p>Subscribe to this websites feed via <a href="#"><b>RSS</b></a> or <a href="/contact/" target="_blank"><b>EMAIL</b></a> to receive instant updates.</p>
</div>
<?php }
}
add_action('thesis_hook_after_post_box', 'post_footer_author');
function custom_search() {

// Enter your custom search text here
$searchtext = "Your search custom text";
// Enter your custom submit text here
$submittext = "Your submit custom text";

?>

function custom_bookmark_links() {
global $post;
?>
<ul class="bookmark_links">
<li><a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark this article on Delicious</a></li>
</ul>
<?php
}

4. Openhook

a. WP Head – Cufon font replacement (I have included the font file in the zip file along with the javascript files necessary to replace the text.)


<script src="<?=bloginfo('template_url')?>/js/cufon-yui.js" type="text/javascript"></script>
<script src="<?=bloginfo('template_url')?>/js/cufon-replace.js" type="text/javascript"></script>
<script src="<?=bloginfo('template_url')?>/js/Eras_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2');
</script>
<script type="text/javascript">
Cufon.replace('h3');
</script>
<script type="text/javascript">
Cufon.replace('h4');
</script>

b. Before Header – After inserting the following code, please check the boxes to remove the thesis nav menu and to Execute the PHP.


<div id="customthesisheader"><div id="thesissearchform"><?php thesis_search_form(); ?></div></div>
<div id="customlogoarea"><?php if ( file_exists( TEMPLATEPATH . '/custom/images/logo.png' ) ) { ?>
<a href="<?php echo get_settings('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/custom/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
<?php } else { ?>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<? } ?>
</div>

c. After Header – After applying the following code, check mark the box to Execute the PHP.


<?php thesis_nav_menu(); ?>

d. After Content – After applying the following code, please remember to check mark all the boxes to execute the PHP in the hook, remove the post navigation, and to remove the next and previous thesis hook. (Remember you are using WP-PageNavi.)


<div style="clear: both;"></div>
<div id="customwpnavi">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
<div class="pagination">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php } ?></div>

5. Widgetized Footers – Look for launch.php in your lib/functions folder. Open and insert at the bottom of the file.

/*---------------------------------*/
/* WIDGETIZED FOOTER - 3 COLUMNS */

/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
}

/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
<div id="footer_setup">

<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
<?php endif; ?>
</div>

<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
<?php endif; ?>
</div>

<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
<?php endif; ?>
</div>

</div>
<?php
}

add_action('thesis_hook_footer','widgetized_footer');

6. custom.css


body {

background:#444546 url(images/bg.png) repeat-x;
}

.custom #customthesisheader {
width:1000px;
margin-left:auto;
margin-right:auto;
background:url(images/top-img-bg.png) no-repeat;
height:150px;
margin-top:-30px;
}

.custom #customlogoarea {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:-135px;

}

.custom #thesissearchform {
float:right;
margin-top:30px;
}

.custom .search_form {
width: 275px;
height: 40px;
background: url(images/search-bg-img.png)no-repeat;
margin-top: -22px;
}

.custom .text_input {
width: 225px;
height: 20px;
margin-top:8px;
margin-left: 20px;
border: 2px solid #23468E;
font-size:12px;
padding-left:3px;

}

.custom #container {
margin-bottom:10px;
}
.custom #page {
padding-bottom:1px;
}

.custom .menu {
margin-left:-2px;
margin-top:-50px;

}

.custom .menu li.current a, .custom .menu li.current-cat a {
border-bottom: #5581D9 4px solid;
}

.custom .menu a {
border-bottom: #23468E 4px solid;
background:none;
margin-left:2px;
font-weight:bold;
font-size:14px;
}

.custom .menu a:hover {
border-bottom: #5581D9 4px solid;
background:none;
}

/* Category Nav Menu */

ul#cat_tabs { list-style: none; border: 0px; border-width: 0 0 1px 1px; background:#23468E; height: 30px; margin-top: 0px;}
ul#cat_tabs li { margin-bottom: 10px; background: #23468E; border-left: 0; float: left; }
ul#cat_tabs li.current_page_item, ul#cat_tabs li.current-cat { padding-bottom: 0.1em; background: #fff; border-bottom: 0; }
ul#cat_tabs li a { display: block; line-height: 10px; color: #fff; font-size:14px; letter-spacing: 1px; padding-top: 8px; padding-left: 10px;}
ul#cat_tabs li a:hover { color: #5581D9; font-weight: bold;}

ul#cat_tabs li ul {position:absolute; display:none; list-style:none;}
ul#cat_tabs li:hover ul {display:block;}
ul#cat_tabs li ul li {float:none;}

ul#cat_tabs:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Style the First (or Only) Post */
.custom .post.top {
background:#FFFFFF none repeat scroll 0 0;
border-bottom: 1px solid #ddd !important;
padding-bottom: 10px;
}

/* Style Remaining Posts (in a Multi-Post Listing) */
.custom .post.post_box {
background:#FFFFFF none repeat scroll 0 0;
border-bottom:1px solid #ddd;
padding-bottom: 10px;
}
/* Post Styling */

.custom .calendaricon {float: right;
margin-top: -1em;}

.custom .month {text-transform: uppercase;
font-family: arial;
margin-top: -5.5em;
margin-left: 2.2em;}

.custom .day {font-family: arial;
margin-left: 2.99em;
padding-top: .3em;
padding-bottom: 2.2em;}

.custom .year {font-family: arial;
margin-left: 2.1999em;
margin-top: -2.2em;}

/* Author Profile Box */

.postauthor {background: #ffffff; border:1px solid #e1e1e0; overflow: hidden; padding: 1.5em;margin:8px;}
.postauthor img {border: 0px solid #e2dede; float: left; margin-right: 1.5em;height:40px;width:40px;}
.postauthor h4 {color: #666; font-size: 1.5em; margin-bottom: 5px;}
.postauthor p {color: #515151; font-size: 11px; margin-bottom: 12px;}
.postauthor p.hlight {font-size: 11px; text-transform: uppercase;}
.postauthor p.hlight span {color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px;}

.clear { clear: both }

.frame {
background: #EEE;
border: 1px solid #DDD;
padding: 0.5em; /* may need to be adjusted */
}

.custom #customwpnavi {
border-top:1px solid #c0c0c0;
border-bottom:4px solid #23468E;

}

/* pagenavi */
.wp-pagenavi { margin: 15px 0px 15px 0px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:12px; padding: 5px 9px; margin: 2px; text-decoration: none; border:0px; border-bottom: 4px solid #23468E; color: #404040; }
.wp-pagenavi a:visited { font-size:12px; padding: 5px 9px; margin: 2px; text-decoration: none; border:0px; border-bottom: 4px solid #5581D9; color: #413f36; }
.wp-pagenavi a:hover { font-size:12px; border-bottom: 4px solid #5581D9; color: #5581D9; }
.wp-pagenavi a:active { font-size:12px; padding: 5px 9px; margin: 2px; text-decoration: none; border-bottom: 4px solid #5581D9; color: #413f36; }
.wp-pagenavi span.pages { font-size:12px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #000000; border:0px; color: #5581D9; }
.wp-pagenavi span.current { font-size:12px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 0px; border-bottom: 4px solid #5581D9; color: #23468E; }
.wp-pagenavi span.extend { font-size:12px; padding: 5px 9px; margin: 2px; border-bottom: 4px solid #5581D9; color: #23468E; }

/* Sidebar */

.custom .sidebar h3 {
border-top:4px solid #23468E;
font-size: 14px;
font-weight: bold;
text-transform: normal;
line-height: 36px;
}

.custom .textwidget {
font-size: 12px;
color: #404040;
}

.custom .widget .widget_featured-posts h3{
background:none;
}

/* Comment Section */

.custom .avatar img {float: left; margin-left: -1em; padding-right:
1em;}

.custom dl#comment_list dt.comment{

background:transparent url(images/commenttop3.gif) no-repeat scroll 50%
100%;

height: 9em;

}

.custom dl#comment_list dd.comment {

background: #5581D9 url(images/commentbottom4.gif) no-repeat scroll 0%
100%;

border-bottom: 0 none;

margin-left: 63px;

margin-top: -1em;

width: 504px;

}

.custom dl#comment_list dd.comment div.format_text {margin-top:-1em ;}

/* Footer */

#footer{
background: #eeeeee;
}
.custom #footer {
width: 100%;
border-top:2em solid #fff;
background: #eeeeee;
padding:0em;
}
.custom #footer a{
border-bottom: 1px none #fff;
}
.custom #footer {
text-align:center;
}
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #444343;
/* widget padding */
padding:1.5em;
/* margin at bottom of widgets */
margin-bottom: 25px;
/* do not change this! */
overflow: hidden;
}

/* widget item setup */
#footer_setup .footer_items {
/* contents alignment */
text-align: left;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #fff;
/* do not change these! */
display: inline-block;
float: left;
height: 100%;
}

/* widget item headers */
#footer_setup .footer_items h3 {
/* font size */
font-size: 1.5em;
/* bold or not */
font-weight: bold;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #ffffff;
/* padding under header text */
padding-bottom: 3px;
/* border under header text */
border-bottom: 3px none #ffdf00;
/* distance between border and widget text */
margin-bottom: 5px;
}

/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
font-size:1.4em;
line-height:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }


About Nile Flores

Nile is a 43-year old female from the greater St. Louis (Southern Illinois side) area. Nile is a mother of 1 son. She is also a web designer and developer, a graphic designer, and a public speaker, who exclusively designs and develops using WordPress. She also blogs at GoDaddy's Blog, Verpex Hosting's blog and her very personal sites, Pixelled and Nail Polish Happy.




Related posts:

No related posts.

Reader Interactions

Comments

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *