Learning how to edit your own WordPress theme is empowering, and fun! CSS may look scary at first, but once you get in there and play around a bit you'll notice that its very logically written and orderly. There are so many things you can do with CSS (Cascading Style Sheets)! One of my favorite things to play with in CSS is image styles. Changing the way your photos display can make a huge difference in the feel of your site. Updating your caption styles, adding rounded corners, and making sure your images are mobile responsive are the things we'll cover today.
It doesn't get much better than free fonts. Add a reliable source like Google's font service with over 600 fonts to choose from, and the possibilities for pairings are endless! Since the launch of the Google fonts service, many of my developer friends and DIY WordPress friends have asked me how to use Google fonts in WordPress. The answer is so simple it may surprise you! In fact, there are multiple ways and they are all easy.When you're done with this post, you'll be empowered to beautify your own site with any font from Google fonts.
Websafe fonts are the only fonts you should use on your websites. In case you do not know what a websafe font is: Websafe fonts are those fonts that are preloaded onto every single computer sold. So, when you specifiy for your site to use say, Times New Roman, your reader's browser locates that font file on their own computer and serves it so they see the Times New Roman font where you've specified your site should use it. Over the years web developers have mourned the small number of websafe fonts and their overuse. Thankfully we now have services like Google Webfonts that will serve hundreds of
A year or so ago, my friend, Angela England, and I were talking about finding a way to help bloggers redesign their sites without big upfront costs. While a professional blog makeover will always be worth paying for, there are people just starting out who may really like an existing theme, but long for different color options. Since we're both huge fans of StudioPress and their child themes for the Genesis Framework, we decided to start offering our own stylesheets for popular layouts. Meet: Blog By Number
I'm asked a couple times a week how I find the part of my CSS file that needs changed... I always answer, with Firebug. The next question of course is what's Firebug? And then, How do I use it? Here's the Firebug download page. You can also use your Firefox Add-ons menu under the Tools tab to find this and install in your browser. Then follow along in these videos as I show you how Firebug works! Part 1
If you like to play with your own websites and you're looking for a way to create rounded corners on your boxes, navigation bars, etc here's a css rounded corner tutorial. Why Rounded Corners Using CSS? The more images we eliminate from our site designs, the faster our sites will load. Until css offered us the ability to create rounded corners we used individual images to create rounded boxes and buttons for our blogs. While some rounded corner css tutorials still use images* they only use one tiny corner image and they specify placement/rotation to make all four corners, filling the rest of the area