How to Modify Your Site Details Design Without Knowing a Single Line of CSS Code

 

You looked at your site. It’s beautiful, but something just isn’t right.

The text overlays over the image would be more readable if you can just add a slight of blurred shadows under the letters.

Then you realized something. You are dealing with a live website, not an image editor.

You could probably do a complete mock up of an app UI in under five minutes in Photoshop or Sketch, while you are half asleep. But you know that you don’t have the slightest idea on how to tweak CSS code and which element should you deal with to add the blurred shadows. Heck, you don’t even know what CSS stands for and what it does.

You could leave your site alone, but the perfectionist designer inside you just won’t let it go. Hiring a web developer just to add the shadow would be overkill.

What to do?

Well, why don’t you do it yourself?

And wipe off those cold sweat because there’s a way to modify your site without touching a single line of code.

 

The Thousands Lines of Codes

First, let’s deal with the terminology. CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in a markup language.

In layman terms, CSS is the code used to set the visual style of web pages and user interfaces.

Knowing your way around CSS is like having the magical power to freely manipulate colors, shapes, backgrounds, fonts, animations, and other visual elements on your site.

The problem is, CSS can be very intimidating for those who are code illiterate.

 

css-freepik-css-code

 

Not only you need to be able to associate the codes with their visual representations, but you also have to deal with literary thousands of lines of codes and find which ones that you need to tinker with.

Before we reveal the easiest way, let’s go with the easier one.

 

Visual Elements Inspections

You designers should consider yourself to be lucky to be alive in this time of human evolution because of browsers’ element inspection feature.

OK, that might be an overstatement. But the feature does make our editing-the-web-design life easier.

How to use the feature you ask? It’s simple. Just open the page using your browser and right click on the page. You’ll see something similar to Inspect Element (Safari) or Inspect (Chrome). For the purpose of this article, we are going to use Safari. The process on other browsers is more or less similar.

 

css-freepik-right-click-menu

 

Then click the “target” icon on the inspector bar and select the page element that you want to inspect. You can see what element that you choose in the code editor field along with the style that it uses right next to it.

 

css-freepik-inspecting-element

 

While you can “modify” the element’s value in the editor and observe the result, the changes won’t be applied to the actual website itself. You can consider the feature as your experimenting ground.

But you gain valuable data here. Armed with this information and a little bit of search feature magic, you can go to the real web code knowing exactly what and how to modify.

 

Look Ma, No Code! Sort of…

Similar to the plot of almost all mystery movies, the biggest secret will be revealed right before the end. So, after going through the basic, here’s how you can tweak your site’s look and feel without touching any code.

We’ll start with the assumption that you are using WordPress – currently the most popular site builder – to build your site. If you are, you can use a plugin called SiteOrigin CSS that could help you do visual editing of your site almost as easy as doing it in the image editor.

You can start by installing the plugin. Login to your WordPress admin site and go to the Plugins – Add New menu from the left sidebar. You can then Search, Install, and Activate the plugin.

 

css-freepik-install-plugin

 

With the plugin activated, go to the Appearance – Custom CSS, and click the “eye” icon to start the fun.

 

css-freepik-custom-css

 

You will see visual code editor similar to the browser’s element inspector that we discussed earlier. The differences are, this one is more advanced, and all the changes will be applied to the site instantly after you save.

 

css-freepik-site-editor

 

To edit an element, all that you need to do are:

  • Click on the element that you want to edit.
  • Choose one or many possible tweaks available on the left sidebar. There are tons of options under Text, Decoration, and Layout. It’s advisable that you play around with the options to familiarize yourself with them.
  • If you want to go a link, click the link and choose the URL after “ Navigate to: “ above the CSS bar.
  • Click on the Checkmark icon on the top left corner when you have finished your editing.
  • You will see all the CSS code modification on the main area.
  • Don’t forget to hit Save CSS button to apply the changes.

If you’ve made a mistake, you can always revert to one of the previous versions by choosing it from CSS Revisions box.

css-freepik-css-revisions

Please note that CSS visual editor is a different animal compared to image editor that you usually use. And since there are too many variables at play, there are limitations to what the tool can do. That’s why knowing a little bit about CSS would come in handy. And whenever you need more CSS resources and references, all the available materials are only a Google away.

To close our discussion here’s a visual comparison of the front page of Smart Devices for Home a newly built website about smart technologies related to home. Can you spot the differences?

 

css-freepik-comparison

 

The example above is only one of the virtually unlimited possibilities. The sky (and your time) is the limit.

Now that you know the closest thing to image editor to modify your site appearance, all that’s left to do is to explore and experiment.

Have fun.