SiteOrigin CSS – Plugin

What is CSS

CSS, which stands for Cascading Style Sheets, is a way for elements of your page to be displayed.  In WordPress when you add a theme, the creator of the theme includes a Style sheet named style.css that controls the aspects of your website.  This includes things like font color, spacing, layout and much, much more.  If we have a theme that we generally like, but want to make small tweaks there are programs that will help us do just that.  Today we are going to cover the SiteOrigin CSS plugin and how we can use it to increase the wow factor of your website.

Installation of SiteOrigin CSS

To install the “SiteOrigin CSS” plugin, first make sure you are signed into your WordPress Admin account. On the left sidebar locate plugins and then select “Add New”. Search for “SiteOrigin CSS”. For more information on installing plugins check out How to install WordPress Plugins. The plugin should look like the example below.

Navigating SiteOrigin CSS

Now that the plugin is installed we can access it from the admin sidebar.  It is located in Appearance > Customize CSS.  After opening the plugin you will see a window like the example below.

On this page we have 2 sections.  The white area is where your saved CSS code is placed.   If you are a CSS champ you can enter those changes here, but we’re going to walk you through the steps if you don’t have an understanding of CSS and show you just how easy it is.  Now on the top right you will see 2 buttons. The “Visual” and “Expanded” editor.  For now click on the eye button which will take us to the Visual editor.

Visual Editor

The “Visual Editor” is divided up into 3 main sections that we will cover in detail below.  On the “Left Column” we have the declaration controls. On the “Right Column” we have 2 sections.  On the top half we have a visual inspector that will display your website and on the bottom half we have code inspector.  By default your homepage will load when you enter the visual editor, but there is an address bar that we can navigate to a different page on your website.

Making CSS Adjustments

Next we are going to select an individual item to make adjustments.  In the Visual Editor select just about anything, but for our example we are going to change the color of our title to purple.

1. First when we opened up the visual editor we landed on our home page. We need to navigate to one of our posts, then copy and paste the URL in the box so we can navigate to this page.  When finished press enter.
2. We are going to click on the words “Example Page”
3. When we do, it will generate a list of elements that were selected.  There may be more than one.  Don’t worry if you select the wrong one and the results are not what you are expecting. It is easy to correct a mistake, as we will go over below.
4. For our list we are going to select the element “h1.hero-title”.
   1. Note : If you want to dive in a little further when making your selection, most web-browsers will allow you to inspect the elements of a website.  To do this open up a new tab or browser, navigate to your page and right-click in the body.  From the pop up menu you should see something like “View Page Source”, click it.  Scroll through the page source until you locate the area you are trying to change.  When you find it you should have a hint of what element to select.  Again if you select the wrong one you can remove your change easily.
5. Now if we look on the left toolbar we will notice that what we selected is also displayed.  We are now ready to edit the element.
6. Next select the text tab, below it you will see the text color.  Click the box to the right to change the text color, and because this is a visual editor, you will see the results on the right window.
7. If you are pleased with the changes you’ve made, click the check box above the “Layout” tab. Then you will be brought back to the text editor.
8. Awesome! You now should see your CSS code displayed. Our final step is to click the “Save CSS”.
   1. Note: This change does impact all pages that references this CSS element.  Next we will show you how to undo your changes and make a CSS edit on a single page.

Undo a CSS Edit

To undo an edit, we first need to make sure we are on the “Basic Editor”.  Your CSS code should be displayed, as pictured above. Delete the lines of code that were added and click the “Save CSS” button.

CSS Edit on a Single Page

If we need to make a CSS edit page specific, then we first need to find the Post ID. For step by step instructions on how to find the Post ID check out How to Locate the Page or Post ID.  Once we have located the Post ID, we need to add “.postid-(postid#)” in front of the CSS Edit.  This will tell the CSS to only make this adjustment on that particular page. Make sure to click the “Save CSS” button to save your edit.

Other Options in the CSS Visual Editor

As shown above, we’ve walked through changing the text color of our post title.  There are many other options that we can change with WordOrigins CSS. These are listed below.

Text Tab

1. Text Color – As shown above, this will allow us to change the text color.
2. Font Size  – Adjusts the size of your font.
3. Line Height – Adjusts how high the line will appear.
4. Font Width – Thickness of the font, can be adjusted by percentage or set to bold.
5. Font Style – Changes the font style like italicize.
6. Text Decoration – Allows adjustments like underline or strike-through.
7. Font Variant – Allows Small Caps.
8. Text Transform – Set the text to all caps or all lower case.
9. Font Family – Change to a different font (premium upgrade).
10. Text Align – Align text Left, Right or Center.
11. Text Indent – Adds indentation on the text.
12. Letter Spacing – Adds spacing between each letter.
13. Word Spacing – Adds extra spacing between words.
14. White Space – Controls how the white space around your text is handled.
15. Text Shadow – This box adds a text shadow that you manually input using the [(Font Spacing X) (Font Spacing Y) (Font Color Code)].  For example, if you wanted to add a black shadow, our input is (-3px 3px #000000).

Decoration

1. Background Color – Changes the background color of an element.
2. Background Image – Add a background image in the element that you can choose from your Media Library.
3. Background Position – Adjusts the position of the background added.
4. Background Repeat – Repeats the background image if needed.
5. Background Size – Change the background size.
6. Box Shadow – Adds a box shadow.  This also has to be manually imputed the same as the “Text Shadow” above.  If you wanted to add a black shadow for your box you would input (-3px 3px #000000).
7. Opacity – Sets the opacity of the element from 0 to 1 where 0 = 0% and 1 = 100%.
8. Borders – Allows you to set a border around the element, then you can style it with thickness and color.

Layout

1. Margin – Set a margin for the element top,bottom, left, right or all.  Then set the pixel thickness of this margin.
2. Padding – Set the padding of the contents within the element.
3. Position – Set the position that is used for an element.
4. Absolute Position – Sets the position next to its nearest relative.
5. Width – Set how wide an element can be.
6. Height – Set a fixed height of an element.
7. Display – Specifies the display behavior of an element.  Check out Hide Image using CSS for more information.
8. Float – Allows you to float the element left or right.
9. Clear – Clears a floating element.
10. Visibility – Will allow you to hide or collapse and element when using a table.
11. Overflow – Controls what to do with the overflow of an element that won’t fit into the area.
12. Overflow X – Allows you to clip or add a scroll bar for the overflow left and right.
13. Overflow Y – Allows you to clip or add a scroll bar for the overflow top and bottom.
14. Z-Index – Changes the stack order of positioned elements.

We would love to hear from you. Drop us a comment below and let us know if this was helpful or let us know what you would like to see featured at SundayWP.com