inspectingElements

Getting Started – Inspecting Elements

One of the very first things you need to know when it comes to “understanding” how to modify your OP CSS – rather than just mashing copy-and-paste code from various sources – is how to FIND the part you want to change.

OP is designed so that this has it’s own CSS. In order to change anything OP has put into you place you will need to override their CSS with your own. In order to understand what is meant by overriding please see Getting Started – Cascade what?!.

Now, we as Users on OP do NOT control 75% of the markup. In fact the ONLY markup we have control of is what appears in the “main content” sections of the page (wiki pages, adventure logs, parts of the characters pages), and with a bit of “hackery” we can make some markup “fall out” of the main content sections so that is appears in the “side” areas. This is because OP is what is known as a Content Management System (CMS) – or more specifically a Web Content Management System .

This means that MOST of the markup, and subsequently the CSS classes and id names have been determined for us.

This means a couple of things:

  • You can not move/add to/change any markup outside what you have access to via the content edit window. You can not add things to the page HEADER for example (which means you cannot apply inline script tags to the head of a page to make individual page overrides).
  • You have to know what OP named specific elements in order to override them.

In addition to this:

  • You can not use scripting languages of any kind.
  • You can not access the database (so you can not for example recreate the tag list from the search page on your main page unless you make it “static” and update it manually every time you want it to change – you can make it LOOK like the tag list, you can’t make it FUNCTION like the tag list)

Remember we are working with a style sheet language. It’s purpose to affect the “look and feel” – not the functionality of the webpage.

So, how can you find the names of preexisting CSS?

There are actually a number of different ways, depending on which browser you use, and what time of layout you prefer to work in.

I am not going to go over all of them here. However I will make mention of a number of them (with links to other tutorials as available), and I will outline the method I use in more detail – and you can choose the method that works best for you.

In All Browsers

  • View Page Source – right click on a page and choose “View Page Source”. This will show you the rendered HTML markup for the page.
  • Inspection – all browsers have a method to inspect elements. IE and Chrome both use the Developer Tools, Firefox uses the Inspector Tool. See below for specifics for how to access and more information.
  • On the Fly Edit – ALL of the Developer Tools/Inspection tools will also allow you to edit CSS on the fly. These edits ONLY appear on your screen and only until you close the edit window. This allows you “play around” with the CSS on ANY page (not just your own) without making irreparable errors. Once you have CSS that you like, remember to move the code into the appropriate place (the CSS section of OP) in order to make your changes permanent.

In IE

  • Developer Mode – Access this by choosing it from the Tools Menu or by hitting F12. Developer Mode will allow you to see all markup, CSS, scripts and the error console for a webpage. It will also let you switch between different compatibility modes to see how the page appears in different versions of IE.

In Chrome

  • Developer Tools – Similar to developer tools in IE. Access by choosing the “Chrome Menu” (looks like three bars to the right of the Address/URL bar), then Tools, then Developer Tools. Alternatively – right click on an element in a page and choose “Inspect Element” to have it pull up the information specifically.

In Firefox

  • Inspect Element – similar to Developer Tools. To access it either right click an element similar to in Chrome and choose “Inspect Element” or go to Tools > Web Developer > Inspector. (Thorvaldr’s Firefox Inspect Element Tutorial)
  • FireBug – an extension for Firefox similar to Developer Tools. I use this occasionally, I usually fall back on the last method.
  • Web Developer Extension – this is the method I use most often. Like FireBug it’s an extension of Firefox that is similar to Developer Tools. It let’s me do what I need to do, quickly – and I got used to it years ago. And it’s very visual in usage which I find most are not.

WebDev ToolBar Overview

Installing the WebDev Toolbar will put the following toolbar in you browser.
WebDevBar.png

Choosing the CSS menu will give you specific CSS related options. The “Inspect Element” option is called Display Style Information.
cssMenu.png

Selecting the menu item will bring up a special type of cursor that will draw a red line around each particular element. Once you select an element it will display ALL CSS code that applies directly to that element, which Stylesheet / Inline it exists in. This is helpful in finding which classes (and ALL classes) you will need to override, since sometimes you need to override multiple classes to get an effect to work properly.

I find that for myself, when working with CSS belonging to someone else that I may not be familiar with – the cursor outline makes it much easier to find the individual elements I’m looking for.

Inspect.png

The other aspect of the Inspect is the Ancestor Path for the Element you are currently viewing. This allows you to work your way back up through nested elements to.

ancestorpath.png

Once you’ve found the style you want – you can use the “Edit CSS” option to do the “on the fly editing” mentioned above. Remember this editing is temporary and one you are satisfied needs to be saved inside OP. Also, be careful changing tabs or you may lose your edits!

To see ALL CSS regardless of stylesheet attached to a page use the “View CSS” option.

The Toolbar has a few other options of interest.
*Resize lets you change the window port quickly to see what the webpage looks like in different resolutions
*Outline – throws boxes around the aspect that you choose. For example if you want to see all of the “block level” elements in your OP page you can do that. Or all “floated” elements.
BlockLevel.png
(Block)
Floated.png
(Floated)
*Information > Stack Level – will display the z-index of elements as you mouse over them
InformationStack.png

There are many other options – but that should get you started!

inspectingElements

Post Reforge CSS dawnhawk dawnhawk