Easily Find Font Information For Any Web Site
Ever go to a site and really like the font but too lazy or not sure how to see what font they are using? Perhaps you are a developer and need to know the exact font size, color, and font family your developer is using so you can make sure everything is pixel perfect. Both of these tasks become quick and painless with the “WhatTheFont!” Chrome extension.
After you have installed it – you will then see a little “f?” icon at the top of your browser. By clicking on this icon – you are then able to click anywhere on a web page and see the font information.
This extension takes all the guesswork out of fonts for technical and non-technical people alike.
Fix for Bold Fonts Looking Bolder in Chrome
If you noticed your fonts in Chrome looking more bold in Chrome than Safari – there is an easy fix. Add this in to your stylesheet (body or specific CSS class/ID):
Example:
h1 {-webkit-font-smoothing: antialiased;}
You can see the difference:
Before:
After:
Add Bootstrap Classes to the Next and Previous Image Buttons
When viewing media (usually the image.php template) within WordPress – there are buttons to browse the next and previous buttons that you might want to customize if you are creating a Bootstrap WordPress them. If this is the case – styling the buttons with Bootstrap is easy. You can simply add the following to your theme’s functions.php file.
/**
* Add CSS class to image navigation links.
*
* @wp-hook previous_image_link
* @wp-hook next_image_link
* @param string $link Complete markup
* @return string
*/
add_filter( 'previous_image_link', 'lucidity_img_link_class' );
add_filter( 'next_image_link', 'lucidity_img_link_class' );
function lucidity_img_link_class( $link ) {
$class = 'next_image_link' === current_filter() ? 'next' : 'prev';
return str_replace( '<a ', "<a class='btn btn-default $class'", $link );
}
Note – you can change the btn-default class to btn-primary or whatever you need.
Add Bootstrap Button Classes to the WordPress Comment Form
Looking to stylize that WordPress comment button on the WordPress comment form? Adding the correct classes needed to the comment form button are as easy as finding where comment_form() is called in your theme. In my cases – this is within the comments.php file.
Once you find that – you just need to change
comment_form()
to:
$args = array(
'class_submit' => 'btn btn-default',
);
comment_form($args )
There are a number of modifications you can make to the comment form (changing button text, changing labels, adding notes, etc that you can make with the comment_form() function which are worth looking at here: https://codex.wordpress.org/Function_Reference/comment_form
Add Bootstrap Classes to WordPress Widgets
When creating your Bootstrap WordPress themes, you will notice the sidebar widgets (archives, categories, etc) which use dropdowns do not share the Bootstrap styling because there is no place easily accessible to add in the needed classes or CSS.
Considering the options – here are two ways you can turn those default selects into something that matches the rest of your beautiful Bootstrap site.
Add a filter in your functions.php file
This is specific to the category dropdown. I was hoping we could use the same on the widget_categories_dropdown_args filter, but that is not possible as of WordPress 4.6. (see next example to address this). This filter works great if you use the categories widget and no other that display a select.
/**
* Add CSS class to sidebar category selects.
*/
add_filter( 'widget_categories_dropdown_args', 'lucidity_widget_categories_dropdown_args' );
function lucidity_widget_categories_dropdown_args( $args ) {
if ( array_key_exists( 'class', $args ) ) {
$args['class'] .= ' form-control';
} else {
$args['class'] = 'form-control';
}
return $args;
}
Add some Bootstrap CSS to your style.css file
This works great if you have multiple selects displayed within your widgets. Note: the sidebar in the example has an ID of “sidebar”. This CSS is brought over from the Bootstrap .form-control style.
#sidebar .widget select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
I hope this helps make your site a bit more cohesive with the Bootstrap styles!
CSS Font Families Made Easy
If you are looking for font family code – check out CSS Font Stack. You can chose your font, and with a click of your mouse – copy the entire family for your use.
HOWTO: Target Firefox for Specific CSS
Generally – the best way to handle CSS is to keep it simple, clean, and without any hacks. From now and again there are some times when I need to write CSS specific to IE (using conditional comments). I recently came across a site where I needed to target Firefox because of a width issue. This is the first time in my many years I ran into this – and tried a number of hopeful solutions but nothing worked. I then found that if I used: @-moz-document url-prefix(){} that that would work out and only Firefox would use the styles within that.
Example:
.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
.font_example {font-size:1.075em;}
}
Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.
While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!
WordPress Themes Over the Years…A Look Back and Then into the Future
After working with WordPress for over five years now, I have seen a lot of changes both front-end and backend – both for developers and for users. I work for the most part on WordPress themes for a few hours a day and have been doing so for the last 3+ years full time. As I wrap up the final changes for my company’s commercial WordPress theme Lucidity – I wanted to take a few minutes and point out some of the changes over the years and also talk about where I think themes are going.
I remember back in the day being excited about Alex King’s Theme Competition and wishing I had some spare time (I was working full time and doing consulting every other moment) to also participate. These early themes were generally simple and were something people would use on their simple blogs -using a hand full of WordPress functions. During this time, the functions.php was unheard of and there were not too many custom functions that were used (for most themes). The big difference between them were mostly in how the sites were laid out with HTML and CSS. Even though these themes were simple – they were great because it allowed you to easily modify the look and feel of your site by editing a few template files and modifying the CSS.
These themes were more about look and less about function.
If you think about themes then and themes now – the difference is often huge. Most themes now are packed with custom functions, have advanced admin options, and give the users greater control of their content, the site’s look and feel, and general options – all without having to modify any template files or know any CSS. Themes are more complex, are generally made up of more template files, and are much more flexible.
These themes are more about providing both users and other developers with a framework and tools to easily manage content.
Recently Alex King/Crowd Favorite released Carrington Build which is a perfect example of where themes are going. This theme offers an unbelievable amount of flexibility and customization and will make both users and developers eager to use this theme.
So as I wrap up development on Lucidity – I am trying to bridge the old (simple) with the new (framework/tools). I look forward to getting this out to the public so they can enjoy the ease of use, flexibility, and further control over their content.
All in all – WordPress themes have come a long way and will not only continue to improve user’s front end experience, but also improve the backend experience when using WordPress. Look for even greater things to come!
CSS Tuesday: Images as List Bullets
There are plenty of ways to spruce up the boring bullets used in HTML lists.
The best way and most browser compatible way I have found to do this is using the following code:
ul li {background: url('images/dot.gif') no-repeat 0 3px; list-style:none;margin:0 0 2px 0;padding:0 0 0 10px;}
You can see that here:
- Example of fancy bullet
- Another bullet point
Vs. The plain list:
- Example of fancy bullet
- Another bullet point
Something like this may seem simple, but it is often overlooked and can really dress up a site.
CSS Tuesdays: Keeping it Simple
I just released my fist two commercial WordPress themes: Lucidity and Lucidity Catalog with a focus on simplicity.
After creating over one hundred custom WordPress themes – I decided to take my most requested features, coupled with a slick admin interface, and some really simple XHTML and CSS and put it together to create a really easy to use and customize theme.
If you looking for something really easy and clean – take a look at the CSS used. You can see that a little goes a long way!
Just remember – keep it simple. When you overcomplicate – you will end up with sloppy code, hacks, and problems with old/new browsers alike.