How To Use The Firefox Web Developer Tool to Customize your Site
"I have downloaded and installed them both. Uhhhhhhh..... what now?"
This tutorial is for you! I will go over two basic functions from the web developer extension, and explain them how to use them. If you understand those two functions, designing your site will become a lot easier.
By Ivar.
After you have downloaded and installed the web developer extension, an extra row with several menus will appear.firefoxfirefox web developercustomizesmugmugcssweb developer
Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu.
firefoxfirefox web developercustomizesmugmugcssweb developer
Function one: 'Display Element Information' CSS requires you to define two things: 1) WHICH ELEMENT do I want to change 2) what do I want to change about that element In order to tell your CSS what element to change, you need to know the name of the element. This is where the 'Display Element Information' function comes in handy. Find your 'Information' menu, and select 'Display Element Information'
firefoxfirefox web developercustomizesmugmugcssweb developer
A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want.
firefoxfirefox web developercustomizesmugmugcssweb developer
Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is superseded by a '.' ) of the element selected show on the top row of the yellow floatie.
the ID is the name of that specific element selected. You can adjust CSS for that ID and only that element will get affected by it.
More than one element can be part of a class. Adjust the CSS for a class, and all elements part of that class will be affected.
In this case the ID is 'breadcrumb' and the class is 'nav'firefoxfirefox web developercustomizesmugmugcssweb developer
HELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor' is also show on the yellow floatie. Look under 'Ancestors' and find the last line which starts with a 'div#'
In this case, the ID is still 'breadcrumb' and the class is 'nav'firefoxfirefox web developercustomizesmugmugcssweb developer
Function two: 'Edit CSS' OKAY, I know the ID and/or class, what now? The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view the changes immediately. It doesn't actually apply it to your smugmug stylesheets yet, so you can try and play around as much as possible, without anyone else seeing the changes untill you save them.
firefoxfirefox web developercustomizesmugmugcssweb developer
After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmugWhite-*****.css are smugmug's own stylesheets. One or both show depending on choices you've made in your control panel.
user-Nickname-****.css contains the CSS you have put in your CSS window, in your customization screen.
theme_XXXX-*****.css is the theme you have selected. It can be a standard smugmug theme, or a self-made theme.
Don't worry about the 'Embedded Styles'firefoxfirefox web developercustomizesmugmugcssweb developer
If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on the 'user-Nickname-*****.css' tab.
You can write your CSS in the notepad-area beneath the tabs, and instantly see changes!
In the example I changed the background-color of the #breadcrumb, of which we found the ID previously.firefoxfirefox web developercustomizesmugmugcssweb developer
After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simply paste it in that box, and save your new customization.
That's it, you're done!firefoxfirefox web developercustomizesmugmugcssweb developer
EXAMPLE
I want to change the color of the name of the active gallery on top of my page.
Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb' (for this purpose you can ignore span's)
Remember to put both the ID and the class in your CSS, only the class would change all elements on the page that are classed 'title'.
More questions? Want to discuss? Go to Dgrin Forums.firefoxfirefox web developercustomizesmugmugcssweb developer