Latest news in CSS
Add some pop!
CSS If your designing a theme with a dedicated column to the date stamp, you can take back some of that space under it and add a unique pop to your design. In the image to the right the date column is a span and the content of the article is in a div to the right of it. Because of the way it is layed out, using a span and then floating the content next to it, you have the ability to float things outside of the content and under the date stamp as ...
Continue readingFancy Pull Quotes.
CSS A pull quote is a quoted snippet from an associated article that is used to highlight a bit of the post. Pull quotes are the most effective element for adding improved scanability to your text, and by extension the perception of your sites usefulness. Here’s the basics. First, create a new class in your themes style sheet, call it .quote. This is the base of how your pull quotes will be formatted and positioned. Specify whether you want it ...
Continue readingWhy Your Blog Should Probably Have a Print Stylesheet
CSS If your blog has well-written and informative articles, like any good blog should, you should probably have a well-formatted print stylesheet declared. Just like your regular “screen” CSS controls how your webpage looks in a browser, the “print” stylesheet controls how your webpage prints on a printer. First things first, you need to declare the stylesheet: <link rel="stylesheet" href="print.css" type="text/css" ...
Continue readingProtecting Your Images From Theft
CSS If you Google “stop image theft“, you will get some results of some really bad, non-effective ways of preventing image theft. Things like “disabling right-click” with JavaScript. Crippling usability is never good, especially when it will barely even slow down someone determined to steal your image. This is kind of like strip searching kindergardeners because one of them brought a knife to school once. There are two ...
Continue readingStyling Specific Posts On Your Blog
CSS One of the many, many smart things that WordPress does is apply the ID of posts to the div of that post. Most themes leave this intact, although I have seen some themes that remove it. This is how the container div for posts should look like: <div class="post" id="post-<?php the_ID(); ?>"> One of the reasons WordPress does this is for linkability. ID’s have that special ability to “skip down the page”, so if you ...
Continue readingTips for Styling Code in your Posts
CSS If you’ve ever included snippets of code on your blog, you know that presenting that text can be a unique challenge. HTML provides a tag for this purpose, the <code> tag. Unfortunately, just chucking your code in those tags isn’t the end-all solution. For one thing, you typically need to turn off your Rich Text editor and hand-write them in if you want to get those tags at all. For another, if you are including actual HTML code ...
Continue readingDocument Your CSS Like You Are Working on a Team
CSS Commenting your CSS is simple, just put them in between “/*” and */”, like so: p { font-size: 1.3em; /* Font size for main content */ } That’s a single line comment, but you can do multi lines just as easily: /* Blog Design Template Author: Chris Coyier Authors Website: css-tricks.com Feel free to use, share, or alter this template in any way. Links are always appreciated. */ There are many different schools of thought on ...
Continue readingSeasonal CSS
CSS With the changing seasons and the multitude of holidays some also change their sites design to fit. From winter and summer themes, too night and day, to Christmas and Valentines. But changing a sites look can be a chore, especially if you’re doing it frequently. But thats where CSS finds a perfect application, changing the entire look of your site with one file is certainly alot easier then the alternative. And now there are ways to have ...
Continue readingFile Paths in Your WordPress CSS and Theme Files
CSS The directory of your WordPress theme probably looks a lot like this: This is where all the files for your theme live, and this is where you will come to make edits. Notice the images folder in there. If your theme makes use of any images for it’s design (it probably does), they will be in this folder. What can be a little confusing is just how to reference the images in this folder, in terms of their file paths. If you are editing the CSS ...
Continue readingColor and Width of your Content Area, a lifelong choice?
CSS Part of the fun of having a CSS based site with dynamic content (like most blogs), is your ability to change the design of your site with relative ease. On a site like Blogging Tips, there are hundreds and hundreds of different pages with unique URLS. Can you imagine having to hand code design changes onto each any every one of those when you wanted to update the look of the site? No thanks. But thanks to CSS and a Content Management System like ...
Continue reading
Recent Posts
Blogging tips writers
Blog Partners
