keyword pages: 1  2  >  
< 1 of 11 >
Digital Grin > EXAMPLEI 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.
Digital Grin > 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!
Digital Grin > 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.
Digital Grin > 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'
Digital Grin > 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.
Digital Grin > 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'
Digital Grin > 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'
Digital Grin > 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.
Digital Grin > 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'
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.
Digital Grin > EXAMPLEI 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.
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.
See photo in gallery
keyword pages: 1  2  >  
< 1 of 11 >
THE GALLERIES OF DGRIN.COM - ALL IMAGES ©