2.4 Creating And Managing Custom Stylesheets In Oxygen (Video)

Course Navigation     

Welcome back. In this step, we're going to create and prepare our main stylesheet to use in our freelance website design project. I'll also show you how to use multiple stylesheets, as well as organize everything using the folder options. Let's dive right in.

Here's what you will learn:

  1. How to create and organize your stylesheets in Oxygen Builder 4.0
  2. Creating the basic structure of your main stylesheet

Script for video lesson step 2.4

One of the features I love in Oxygen Builder, from the very beginning, is the ability to create and manage stylesheets.

This is one of the many features that make Oxygen Builder feel very much like a professional developer environment, yet still retain its user-friendliness, if that makes sense.

Yes, you have your drag-and-drop visual editing options, but you can also get your hands dirty using advanced features that help to remove all design limitations when it comes to building WordPress websites.

Now, let's begin with creating and organizing our stylesheets for our freelance website project, first.

Create and organize stylesheets

If you're not already inside of the Editor for one of the templates you just created, then navigate to Oxygen > Templates > and pick a template to edit, I'm going to select the global template, but it really doesn't matter because you can access the stylesheets from any template.

Just wait for it to load... and then we're going to click on Edit with Oxygen. Hopefully, you remember how to do this from the previous two steps.

From inside of the editor, in the top right of the menu, click on the stylesheets icon to open the stylesheets tab. See the image below.

You should now see the Stylesheets options in the right-hand sidebar. Here you can add folders and add stylesheets within folders. See the image above.

By default, you have one Uncategrorized folder enabled and one disabled. For now, you can just use the uncategorized folder that is enabled. So, all we need to do is add our stylesheets to this folder.

Now, let me share with you my little strategy:

What I like to do is create multiple stylesheets inside of my uncategorized folder. These would go as follows:

Uncategorized (Enabled)
- main (All of the main CSS goes here)
- media-queries (Responsive Design CSS goes here)
- animations (Effects and transitions using CSS @keyframes goes here)

Just a quick note on the media-queries and animations stylesheets. For the most part, were going to use the responsive design options as well as the effects panel in Oxygen. But from time to time, I like to add my own CSS for specific custom breakpoints and animations, etc. So this is why I created these extra stylesheets.

Now, you can follow my strategy, however, for the sake of simplicity, you can just create a single stylesheet and include everything in it. The choice is completely yours.

Basic stylesheet structure

OK, so if you're following along with my strategy, here's how we're going to organize the structure of our stylesheets for this project.

Inside of the main stylesheet, it is a good idea to add some basic information about the website, as well as organize where everything is going to be placed.

By organization, I mean to include a Table Of Content as well as Line Comments to help compartmentalize and describe what each of the CSS will be used for.

To create a line comment, all you need to do is add your code between */ comment and /*. This will also disable the CSS until you are ready to use it.

Below, is a simplified version of the template that I use to organize my main stylesheet for any website project. You are welcome to copy it and paste it into your own.

Template Name: Freelance Template
Template URI: https://courses.fabriziovanmarciano.com
Author: Fabrizio Van Marciano
Version: 1.0
WordPress version required: 5.9

Table Of Content
---
1. Typography
2. List styles and bullet points
3. Blockquote
4. Menus
5. Hyperlinks
6. Buttons
7. Forms

Again, feel free to change some of the values such as the template URI (your own domain) and Author (your name).

Now, although we've added a list of elements in our table of content, to add custom CSS, we may not use all of them. Because, once again, for the most part, we'll be using Oxygen's editor to customize most of those elements. But, it's there, and it's organized ready for us to use.

For the media queries stylesheet, I'm going to add the following -

/* 480px Screen size
---
@media screen and (max-width: 480px) {
font-size: 14px;
}
*/

Now, again, just to remind you. I know I'm probably sounding like a robot here. But we may not need to add any custom media queries since we''ll be using the responsive design options inside of Oxygen, however, it's there for us to use if we need to. You may have also noticed that for now, I've wrapped this query inside of a line comment to disable it.

For the animations stylesheet, we can leave that one blank for now.

Summary of step

It's a wrap for this step. We've created our stylesheets and they're ready for us to begin adding our custom CSS for this website project later on. Right then, let's keep moving. In the next step, we'll be creating our blog post template, plus we'll be diving into the layout and design as well. See you in the next step.