I’ve just snazzed up the blockquotes styling on a couple of my P2 sites and thought I’d share the code that did it. Here’s an example of the final result in P2:
This is a block quote. You can create one by adding blockquote tags to the beginning and end of a block of text you’d like to look a little different. It doesn’t always have to be a quote, just something you’d like to give a little emphasis to.
This is a little plain in the original P2 and I thought it deserved a bit of styling. Here’s what creates the above:
The first line creates the background colour for the block. Any f/e variations work well as they give only a slight highlight. Try the following:
#eee for grey
#eef for yellow
#ffe for blue
you get the picture…
Next we add a bit of breathing space all around the block of text by adding some padding, and we’ll increase the font size to something more readable.
The border-style property adds the dotted outline to the blocks. Feel free to remove it if that’s too much emphasis, or try any of the following values as variations:
And finally we’ll add some rounded corners to those blocks with the last three lines (courtesy of that marvellous http://border-radius.com generator)
Fell free to experiment with those values, and let me know if you find anything else that may look interesting. Add the above code to your child theme’s style.css file, or add it to a custom CSS field in your WordPress installation.
Note that the effect of this styling will only be visible upon a browser refresh, as this is overriding styles provided by P2. So when you write a post, you’ll see the old (plain) version being inserted. Visitors will see the new styling right away.
I must admit that the new default font in TwentyFourteen looks damn sexy – but I’ve only just gotten used to the TwentyThirteen theme. Don’t get me wrong, if you’re after a magazine style theme then TwentyFourteen does a great job.
Since I didn’t want to change themes again over at versluis.com, I thought perhaps I’ll just replace the default fonts in TwentyThirteen (Bitter and Source Sans Pro) with TwentyFourteen’s new font Lato.
Lato is an open source font by Warsaw based designer Łukasz Dziedzic hosted on Google Fonts. Lucky for us we can link to it in our CSS stylesheet right away. Do this somewhere near the top, just below any other @import statements:
Next, overwrite the existing TwentyThirteen declarations with this bit of CSS. If you’re using a child theme, add this right after the import statement. If you’re tweaking the original (which you shouldn’t) then you can add this to the very bottom of style.css. Alternatively you can declare this as additional CSS if you have the option (Jetpack does this for example):
/* new font for 2014: Lato */
This will style the following elements, overriding existing TwentyThirteen declarations:
site title and description
all post/page headlines
input text areas
drop down menus
Remove items as appropriate (for example the site title). If you don’t fancy Lato and would like to use another font instead, just link to it with an @import statement, then replace “Lato” in the font-family declaration with your own font. Here’s an article I’ve written that shows you howto do this:
I really wanted to use the new WordPress TwentyThirteen theme over on my other site http://www.versluis.com. But I didn’t like the idea of using the default header images.
Since my previous theme had random header images, I thought it would be great to tap into the now built-in function and prepare a child theme that overrides those existing header images with my own. Here’s how I did it:
first we’ll create a child theme
then we’ll remove the existing header images
and add our own images
As a final touch I’ve tweaked the site title font and gave it a Photoshop-like outer glow, all in CSS. Let me talk you through it step by step.
You know I love P2. I always have, and I always will. It’s the perfect theme that turns my WordPress installation into a notebook site.
Many users – me included – have often wished for the addition of categories to P2, so that when you write a post, you can add it to the category from the front page, perhaps via a convenient drop down menu.
We’re all excited about the new features in Automattic’s P2 Theme v1.4.0 – however many of us have setup custom tweaks around Post Categories. In the latest version these have been replaced with Post Formats.
Post Formats are great, but they are limited to values defined in the WordPress core. If you wanted to create a new post menu like “critical” or “alarm” this wouldn’t work. We could use Custom Post Types to add to those formats, however it’s way too big an operation for I wanted to achieve: which is bringing back the “posting into categories” feature we’ve come to love from the previous version.
In this article I’ll show you how to back-port categories so posts will appear as they did in P2 v1.3.3 while retaining all functions of the latest update.
P2 is one of my all time favourite themes – not only because it transforms WordPress into something completely different, but also because it’s an innovative way we communicate internally here at WP Hosting. If you don’t know P2 yet, do check it out at p2theme.com and watch the video.
At the time of writing P2 is at Version 1.3.3 and has been since November last year. Code changes quickly, so by the time you’re reading this my ramblings may be out of date.
Let’s have a look at how we can add and amend the default categories (i.e. Status Update, Blog Post, Quote and Link).
Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.
My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.