Installing Sage

Install Sage Starter Theme

Okay, so hopefully now we have Bedrock working. The next part in our development workflow is to get Sage installed. Navigate to your themes folder here is the location of mine : We can either load the terminal type in “cd ” and then drag the theme folder into the terminal window OR, a slightly […]

Local by Flywheel and Bedrock

Get Bedrock Working on Local by Flywheel

This is the very start of our journey creating a theme using Sage. Full disclosure – Im learning too! and thats why you should comment whenever you have a question or a better way of doing something. I have done a lot of research in each section and try to keep to best practices, so […]

Font Awesome Icons on Input

Tutorial: How to add Font Awesome icon to form input

It’s often nice to add small font awesome icons inside form fields. For instance, on a contact form, we can add a little email icon, person icon, phone icon all inside the form field. If we include the FontAwesome Library I am a firm believer that we should get some real value out of it […]

Parallax

Parallax WordPress Hero Tutorial

Check out the front page to see this in action. This style of parallax works great as a front-page “Hero Image”. It’s coded with just some CSS. It does however require you to make some coding changes to the template, and because your template file WILL be different from mine you should only do this […]

Buttons with Font Awesome

Simple Font Awesome Button

An example FontAwesome button, easily adjusted to use as you need. Example Read More Html CSS

CheckBox Font Awesome Tutorial

Font Awesome Checkbox

So, you loaded the whole FontAwesome library, you may as well make use of it! Lets turn those boring checkboxes into awesome ones. Try it out : Item 1 HTML CSS Notes Font Awesome has lots of icons we can use to turn into checkboxes, using the basic code above just replace the unicode number […]

Font Awesome Social Icon CSS.

These examples are placed on a blue background box to stand out, this is not part of the code. If you are placing these icons on a white background you can change the first rule in the CSS from white, to whatever color you want your icons. You can generate this code automatically, and visually […]