Exploring Your Site

Exploring Your Site


This guide will show you how to use the Inspect Element function of your web browser to explore your site, so you can start learning how to edit it. Personally, I prefer the Inspect Element feature in Firefox, because it allows you to move your mouse around and see everything easily.

Changing the Sidebar Text Color:

Let’s say that you want to change the text color in the right side-bar. How do you do that? By using the Inspect Element function of your browser. First, right click on the element you want to edit, and select “Inspect Element”. In this example, I’ve right clicked on the white “GM” label.

right-click.jpg

You’ll now see the Inspector pop up. You’ll see that the item you clicked on is highlighted.

Inspector.jpg

You can click back and forth on this menu to select different elements. Elements to the left contain the elements to the right.

Inspector2.jpg

Inspector3.jpg

You’ll notice that as you change the selected element, the dotted white selection on your page will change to show the selected element.

Another way to change the selected elements is to click on one of the following highlighted “Select element with mouse” buttons.

Inspector3.jpg

As you move your pointer around your site, you’ll notice that the highlighted elements change to whatever your cursor is currently hovering over.

But, we want to change some text colors!

When we hover around the sidebar, at some point we can get the following highlighted:

color-white.jpg

That seems to be the entire sidebar selected, so lets try changing that. And notice in the right code area, it says “.color:white;” (highlighted.) But, what does “DIV#sidebar.large-3.columns.sidebar” mean? Anything that starts with a “#” is an ID, and anything that starts with a “.” is a class. In general, Obsidian Portal usually uses classes, so we’ll only pay attention to those.

Usually, the last class you see is the one you want to use. In this case, that would be .sidebar. So, let’s try using that. First we’ll try the following:

 .sidebar {color:black;} 

When we try this though, it just won’t work. Why not? Sometimes, we need to add a “!important”. What does this do? Basically, it overrides anything else. So, we need to add the following:

 .sidebar {color:black !important;} 

Now, when we look back at the wiki page, we’ll see the following:

color-black.jpg

Notice that what used to say “color: white;” is now crossed out. That means it’s being overridden, and indeed if you scroll down, you’ll see “.color: black !important;” lower down.

When working with changing your CSS, it takes a fair amount of trial and error. It’s rare that I’ve ever changed anything correctly on the first try, but the more you practice with it, the better you’ll get at it.

Back to Tutorials

Exploring Your Site

Tyellador Thorvaldr Thorvaldr