Twenty Ten CSS Snippets and Tricks

I’ve updated this section as this single page was becoming too long, check the Code Snippet section. I’ll leave this up because there’s several helpful comments, but i’m turning the comments off.

This page contains a list of random code snippets I’ve found useful, most are for Twenty ten theme or 2010 Weaver.

1. Better Twenty Ten 404 page

<?php
/**
 * The template for displaying 404 pages (Not Found).
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

<div id="container">
<div id="content" role="main">

<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help, or browse our most current articles.', 'twentyten' ); ?></p>

<div style="margin-top:25px">
<h2>Most Recent Articles</h2>
<ul>
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>
</div>

<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->

</div><!-- #content -->
</div><!-- #container -->
<script type="text/javascript">
// focus on search field after it has loaded
document.getElementById('s') && document.getElementById('s').focus();
</script>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

3. Change post excerpt length
Open functions.php find the first line, change return 40 to a different number.

function twentyten_excerpt_length( $length ) {
    return 80;
}

3. Warcraft Style Blockquotes

/* warcraft style blockquotes are pretty cool thanks Lassirra for the image*/
blockquote {
 -webkit-box-shadow: 0px 1px 3px #525252;
 -moz-box-shadow: 0px 1px 3px #525252;
 box-shadow: 0px 1px 3px #525252;
 color: #089ade;
 margin: auto ;
 width: 90%;
 padding: 10px ;
 background: url('http://zeaks.org/blizzbg.jpg') #333 no-repeat ;
 -moz-border-radius: 8px;
 font-size: 12px;
 }

4. Show post excerpts in Twenty Ten
Make a copy of Twenty Tens loop.php
Open it and find the line that reads

<?php if ( is_archive() || is_search()

In that line, directly after what I’ve pasted add

|| is_home

Upload your loop.php to your child theme directory and start adding excerpts to your posts.

5. Twenty Ten with left sidebar

#primary, #secondary {
	float:left;
	clear:left;
	margin-left: 10px;
}
#container {
	float:right;
	margin-right:-260px;
}

6. Highlights the targeted form field.

/*highlight focus form field*/
input[type=text]:focus, input[type=password]:focus{
    background-color:yellow;
}

7. Change continue reading link in Twenty Ten child theme. Just add to your own functions.php file.

/* change continue reading - Add to functions*/
class Twentyten_Child_Text_Wrangler {
function reading_more($translation, $text, $domain) {
  $translations = &get_translations_for_domain( $domain );
  if ( $text == 'Continue reading <span class="meta-nav">&rarr;</span>' ) {
   return $translations->translate( 'Read the rest of this post... <span class="meta-nav">&raquo;</span>' );
  }
  return $translation;
 }
}
add_filter('gettext', array('Twentyten_Child_Text_Wrangler', 'reading_more'), 10, 4);

8. Hide page titles in Twenty Ten

.page .entry-title{display:none;}

9. Add round corners to wrapper area of Twenty ten
#wrapper {

-moz-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -webkit-border-radius: 7px;
    }

10. Add shadow to wrapper area

#wrapper {box-shadow: 0 0 3px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,0.25); -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,0.25);}

11. 3 column Twenty Ten layout

/* content area position */
#main {position:relative;}
div#container {margin-left:250px; width:430px; margin-top: -30px;}
div#content {margin:0;}
/* left menu position and width */
#primary {position:absolute; top:10px; left:0; width:250px;}
/* right menu position and width */
#secondary {position:absolute; top:10px; left:740px; width:250px;}

12. Move site description under title in Twenty Ten

/* move site description under title */
#site-description {
    clear: both; float: left ;
    clear: right; float: left;
    margin-top: -10px ; margin-left: 30px ;/* adjust as needed */
}
#site-title {padding-left: 25px;}

13. Move site title and description on to header image

/* move site title and description on header */
#site-title {
    position: absolute;
    top: 100px; margin-left: 40px; /* adjust as needed */
}
#site-description {
    position:absolute; clear: both; float: left;
    top: 150px ;		/* adjust and coordinate with #site-title */
    margin-left: 50px ;  /* adjust as needed */
}

14. Overlap navigation menu on to header image

/* overlap nav on header image */
#header #access{
top: -37px;
position: relative;
}

15. Give Navigation menu transparency in Twenty Ten

#access {
/* fallback for web browsers that don’t support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.70 opacity */
background: rgba(0, 0, 0, 0.70);}

16. Round bottom corners of header image and navigation to match

/* rounded corvers of nav and header img, overlap nav on header */
/* overlap nav on header */
#header #access{
top: -37px;
position: relative;}
/*give nav transparency*/
#access {
/* rounding bottom corners of menu */
border-bottom-right-radius: 13px;
border-bottom-left-radius: 13px;
-moz-border-radius-bottomright: 13px;
-moz-border-radius-bottomleft: 13px;
-webkit-border-bottom-right-radius: 13px;
-webkit-border-bottom-left-radius: 13px;}

/* rounded bottom corners to header image */
#branding img { 
clear : both; 
display : block; 
border: 1px solid #000000;
/* border-top : 13px solid #000000; */
border-bottom: 13px solid #000000 ;
/* rounding bottom of border */
border-bottom-right-radius: 13px;
border-bottom-left-radius: 13px;
-moz-border-radius-bottomright: 13px;
-moz-border-radius-bottomleft: 13px;
-webkit-border-bottom-right-radius: 13px;
-webkit-border-bottom-left-radius: 13px;}

17. Change the thickness of the navigation bar in Twenty Ten

#access {height: 30px; margin-left: }
#access a {line-height: 30px;}
#access a:hover {height: 30px;}
#access ul ul {top: 30px ;}
#access ul ul ul {top:0px ;}

18. Define the properties for even and odd comments.

Even number comment block (2,4,6,8 etc) control

#comments .even{background:#FF0000; border:2px solid #0000FF;}

Odd comment block (1,3,5,7 etc) control.

#comments .odd{ background:#0000FF; border:2px solid #FF0000;}

19. Hide a widget area with this code. Just change the element to reflect what widget area you want to hide. This will hide the last widget on the right in the footer.

#fourth {display: none;}

20. Get theme directory for child theme. Nothing new, but I'm always looking this up. instead of using.

bloginfo('template_directory');

use

get_bloginfo('stylesheet_directory');

Using the first directs to Twenty Tens directory, when using a child theme you want it to look in the child theme folder.

21. Change the cache update time limit on the WordPress RSS widget (default is 1 hour) add this to your functions.php and edit 1800

add_filter( 'wp_feed_cache_transient_lifetime', create_function( '$a', 'return 1800;' ) );



15 thoughts on “Twenty Ten CSS Snippets and Tricks

  1. Fantastic tips! Thanks so much for sharing them! It's amazing what you can do with Twenty Ten. I've been using it as a framework for several Web sites, now.

  2. Hey Zeak , great site. I have been working the rounded corners into a few of my sites.

    Do you make them work in IE?

    I installed curvy script and it made the wrapper corners round but not the navbar and header image. here is my site I am having trouble with in IE8 http://tinyurl.com/4gnn5po.

    I thought it was the just the picture so i rounded the corners of it and that ws not it nor is it the nav bar. I cant figure out where the black corners come from. I even tried changing the background color and that was not it either.

    cheers

  3. The round corners display for me in IE, bottom left and right of the nav and header image. Your home link hover creates a corner overlapping the round corner though when I hover over it. If this is what you’re talking about try using
    #access .menu-header,
    div.menu {margin-left: 15px;}[/code]
    see if that helps.
    If you have more questions, could you post them here http://twentyten.info/twenty-ten-tips-tricks/add-round-corners-to-twenty-ten-in-ie-and-ff/ I'm trying to keep wordpress related stuff on my new site, thanks :)

  4. hmm, weird, it's showing that for me now too. Did you use the full URL to the curvy corner script in yoru header? or just /wp-content/whatever

  5. Ok, i’m not sure why it’s doing that, it didn’t do it when I created this post I’m sure. Maybe wordpress or the script has changed since.

    change #header #access{
    top: -37px;

    to -27px;
    remove
    border-bottom: 13px solid #000000 ;
    from #branding img { } if you have that added.

    Let me know if that works out for you and for any other questions, please post them here http://twentyten.info/twenty-ten-tips-tricks/add-round-corners-to-twenty-ten-in-ie-and-ff/

  6. Zeak,

    Is there a CSS snippet for adding your social media icons just above your search button? I have looked and looked for a way to do this. I've looked at the widgets, etc. but would rather not use them. Great tips and thanks.

    • An easy way to do that would be to pick out social icons you want to use, then use the post editor to get them to show how you like, then grab the code from the html tag and drop it into a text widget. For this site, I’ve added my icons to the top of the page, i could easily put them in a text widget though.

  7. Thanks so much for this article, really helpful. I was wondering if I could ask your advice on a couple of things in the twenty ten theme?

    1. I'm trying to remove the 'posted in [categories]' and 'tagged [tags]' text from the bottom of each post but leave in the 'leave a comment' text. I've managed to get rid of them on the homepage by using:

    .cat-links {

    display:none;

    }

    .tag-links {

    display:none;

    }

    But they are still showing up in all of the archived posts, and I was wondering if you know the code to remove them?

    Here's a link to the homepage:
    http://caribbeanlivingblog.com/

    And to one of the archives:
    http://caribbeanlivingblog.com/2011/05/13/swedish

    2. I'm trying to remove the underlining from the date (below the post titles) and make the text grey, and have used this code:

    .entry-meta a:link {

    text-decoration:none;

    color:#8B8878;

    }

    Weirdly though, it works on some posts but not on all (see homepage link) and was wondering if you know what is wrong with it?!

    Also, I'm just using CSS to make these changes – I don't have access to the HTML docs etc.

    Thanks very much in advance for your help, much appreciated!

    • I took a look, but it's really hard to read through all of the Twenty Ten CSS. Is it possible to use a child theme on WordPress.com? Firebug wasn't picking up the css you added, it's being overwritten by the a:link a:active css etc. If you copy your css file and email it to zeaks @ live.ca I'll take a look at it on my test site

  8. Pingback: WordPress téma bez odkazu v pätičke « Užívateľov blog