Tag Archives: CSS

How to centre an element in CSS

In the olden days of HTML development, in the late 90ies, we only had inline styles. Centring an element was done using the <center> property. That approach isn’t very elegant anymore in modern CSS ๐Ÿ™‚

Today we can use something like this:

It’s slightly more complicated than a single tag, but also opens up more options to tweak top and bottom margins at the same time.

How to change fonts in TwentyFifteen by Automattic

TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

It’s easy to change it to something else though, and in this article I’ll show you how.

By default, TwentyFifteen and Noto Serif looks like this:

Screen Shot 2015-11-05 at 11.58.15

If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

Now TwentyFifteen will look like this:

Screen Shot 2015-11-05 at 11.59.27

If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).

How to use the new Apple System Font SAN FRANCISCO on your website

Screen Shot 2015-11-04 at 16.58.08

Apple have a new System Font in El Capitan and all of their other products starting 2015: it’s called San Francisco. It’s very similar to their previous font Helvetica Neue, but apparently San Francisco is better for your eyes (not to mention the fact that Helvetica Neue isn’t owned by Apple, and obviously we can’t have that).

If you’ve tried searching for San Francisco on your Mac’s Font Book app, you’ll notice that it doesn’t seem to exist. Likewise, if you’re trying to use it in CSS it won’t work.

Thanks to Craig Hockenberry I now know that this is because Apple haven’t exposed the font the usual way; rather, it can be used in web content and via CSS with a new property they’ve introduced. Here’s how:

Replace body with your own CSS property, and on Apple devices running El Capitan, iOS 9, watchOS2 or tvOS, your web views will sport San Francisco. Other devices will show Helvetica Neue when installed, or use a generic sans-serif font.

How to target a specific row in a table via CSS

This week I needed to make use of another CSS Pseudo element which is – like many of its colleagues – a rather sharp tool in the CSS toolbox.

I was using the eMember plugin for a membership site and wanted tweak the signup form. By default it looks like this (I’ve already removed a rather ugly looking border from the table):

Screen Shot 2014-03-28 at 17.12.01

The site I’m working on will provide a free membership, but that’s a technicality that users can’t change – and let’s face it the entire line reading “Membership: Free” could do with vanishing.

Rather than hack core files, I was able to override it with a CSS tweak and make it disappear. The problem is that this particular row in the table doesn’t have a class or ID to reference it.

CSS Pseudo Element nth-child to the rescue: with it, we can target a specific occurrence of the table row element (in our case, the fourth one down). Here’s how:

This looks cryptic, I know – let me explain what’s happening here.

First we have an ID to target the specific area which is #wp_emember_regoForm. That’s the entire registration form though. In it, we drill deeper into table (which is the table shown above), and in it we have tr and td elements. td is a single cell, whereas tr is a whole row so we choose tr. Those are standard HTML elements.

But we don’t want to target every tr element in the table, we only want to target the 4th one down, hence we specify tr:nth-child(4). Had it been the second one, we would have said tr:nth-child(2).

Now all we do is set its display property to none, making it vanish without a trace. Here’s the final result – as if it never happened:

Screen Shot 2014-03-28 at 17.24.08

The nth-child selector can do other funky things, and you probably have seen it in action. Ever wondered how designers can make every other row in a table look slightly darker? Instead of a number, they use “odd” or “even”, targeting every other cell (starting with the first or second one):

nth-child even works with formulas, and of course you don’t have to target a table. Imagine making every other p tag disappear, or style every 3rd link in a different colour.

Have fun experimenting ๐Ÿ˜‰

How to replace and add HTML text elements with CSS

CSS-LogoIn some circumstances you may can replace HTML text elements via CSS. This is useful if you don’t have access to the source files, or if you want to override text in a Child Theme’s stylesheet.

There are several approaches to this conundrum, I’ll show you two of them. Both require that you have a class, ID or element that you can target. You then either amend more text to it, or replace the existing text completely via the CSS pseudo-elements before and after.

This isn’t always successful though as the original styling may not survive the surgery. Let’s take a look.

Option 1: The Visibility Hack

Here’s the easiest way to replace something. In this example I’ll target a class called myelement:

What’s happening here? First we grab hold of our element and set its visibility to hidden, making it vanish. Next we’ll add our own content before the original, thereby replacing it, and make it visible again.

Instead of “visibility” you can also try “display: none” and “display: block”.

If I had wanted to leave the original words and add something else at the end, I can do this:

Or if you’d like to insert something before the original I can use this:

The original styling will stay intact, however elements that follow the text (for example hyperlinks) may be destroyed when you replace text. Be as specific as possible when targeting text elements.

Option 2: The Out-Of-Vision Hack

A very creative approach is to avoid changing the visibility of existing text by moving it our of vision and then bringing it back. Sometimes changing attributes such as “visibility” or “display” can cause trouble when we try to restore them.

Here we’re doing just that:

This will completely remove my original text and replace it with “Welcome back!”, hopefully in the same styling as before (but then, it may not survive either).

CSS isn’t really made for this, but it’s powerful enough and works in many cases. Try it out!

How to style block quotes in P2

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:

  • groove
  • double
  • ridge
  • dashed
  • dotted
  • inset
  • outset
  • solid
  • thin

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.

How to tweak style code blocks in WP Code Highlight

I love the WP Code Highlight plugin by BoLiQuan. It brings well deserved colour to code blocks wrapped in PRE tags. I use them a lot, but until I discovered this plugin they all looked grey and bland.

Since last year I was using them on my iOS Dev Diary and thought since both sites are now running the same layout I’d integrate code highlighting here to (new for 2014).

Out of the box however it didn’t look as nice as I wanted it to:

Screen Shot 2014-01-04 at 09.41.51

I’m using it with P2 (or P2 Categories actually) so it needed some pazzazz. Here’s what I wanted to change:

  • make sure the border is cropped on the right
  • give the blocks rounded corners
  • and a bit more padding on the inside
  • make the text a bit bigger
  • offset the background and turn it light grey

And here’s what it looks like after the treatment:

Screen Shot 2014-01-04 at 09.49.48

Here’s the code that did it. Add this to the bottom of your style.css file, include it in your Child Theme or add it to a custom CSS option field (JetPack provides this for example):

The first block styles the PRE tags and gives them padding, rounded corners and a grey background. If you’re not using the WP Code Highlight plugin then this will work fine too.

The second block styles the plugin’s CSS specifically. Note how I have to repeat the padding and declare those rules as important. This is because the plugin uses inline styles that cannot be targeted with a standard override. The last line removes the cropping on the right hand side of the code blocks.

To increase the size of the code text, change the font-size property in the second block to 1.1 or higher.


How to fade an element with CSS and jQuery

You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

How to use a custom font in CSS

CSS-LogoDid you know that with CSS 3 you can load custom true type fonts and use them on your website?

It’s relatively simple to do too. First you define a new font face with a URL to your file, then you call it just like you would call a pre-defined font.

In this example I’m using the Old Typewriter font from http://www.dafont.com/old-typewriter.font. Once unzipped you’ll end up with a standard .ttf file that you can reference like so:

Now you can style your text via the font-family property:

Where to get custom fonts

There are several sites that offer true type fonts for download. They’ll work in Word and Pages too once installed on your local machine. Here are some of my favourite sites for finding nice fonts:

Note that some fonts have usage restrictions: Even though you may be able to download them, check the license and see if you’re allowed to use them, or find out if you must buy a license before you do.

Also note that once you upload the font to your server it can be accessed by everybody.

Compatible Font Types

You’ll be pleased to hear that CSS supports several font types to be used as described above:

  • TrueType (.ttf)
  • Web Open Font Format (.woff)
  • OpenType (.otf)
  • Embedded OpenType (.eot)
  • SVG Fonts (.svg, .svgz)

Source: http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/