Phase 2 Customization

[{JT}]

In this thread I will be detailing some of the CSS specifics to customizing the new styles as well as covering some specifics in converting previous customizations to the new style.

First hint; .offblue was a color that was used to customize various strong tags, headlines, etc. We will now be using the class .title

You will be able to change what that color is in specific areas by combining it with what DIV ID it falls in; so to change the color of the gallery in the breadcrumb you would use:

#breadcrumb .title {
color: red;
}

More hints to follow, post your questions here.

[Mike Lane]

Originally Posted by {JT}

In this thread I will be detailing some of the CSS specifics to customizing the new styles as well as covering some specifics in converting previous customizations to the new style.

First hint; .offblue was a color that was used to customize various strong tags, headlines, etc. We will now be using the class .title

You will be able to change what that color is in specific areas by combining it with what DIV ID it falls in; so to change the color of the gallery in the breadcrumb you would use:

#breadcrumb .title {
color: red;
}

More hints to follow, post your questions here.

I knew that when my page's customization got messed up this morning that new customization options were on the way

Nice!

[onethumb]

Originally Posted by Mike Lane

I knew that when my page's customization got messed up this morning that new customization options were on the way

Nice!

Um, no.

There have been no changes to smugmug's codebase on the live site in weeks.

Try again. :)

Don

[Mike Lane]

Originally Posted by onethumb

Um, no.

There have been no changes to smugmug's codebase on the live site in weeks.

Try again. :)

Don

Well darn it, what the heck happened? Oh well, it's an easy enough fix ... but odd, very odd.

[cjohn]

Originally Posted by {JT}

In this thread I will be detailing some of the CSS specifics to customizing the new styles as well as covering some specifics in converting previous customizations to the new style.

First hint; .offblue was a color that was used to customize various strong tags, headlines, etc. We will now be using the class .title

You will be able to change what that color is in specific areas by combining it with what DIV ID it falls in; so to change the color of the gallery in the breadcrumb you would use:

#breadcrumb .title {
color: red;
}

More hints to follow, post your questions here.

Does that imply that from now on we can costumize the color and font of titles and links in each gallery individually, as opposed to costumizing the whole site in the corbrand settings? Surely a dumb question, but my CSS knowlege are close to level 0... actually no, they ARE level 0! :)

[onethumb]

Originally Posted by {JT}

In this thread I will be detailing some of the CSS specifics to customizing the new styles as well as covering some specifics in converting previous customizations to the new style.

First hint; .offblue was a color that was used to customize various strong tags, headlines, etc. We will now be using the class .title

You will be able to change what that color is in specific areas by combining it with what DIV ID it falls in; so to change the color of the gallery in the breadcrumb you would use:

#breadcrumb .title {
color: red;
}

More hints to follow, post your questions here.

To convert this from "pocket protector speak" to every day english, here's what you'd do. You should be able to do this NOW to your customization without breaking anything else, btw:

To change ALL green text to red on your pages, copy and paste this into your Stylesheet section of Customization:

.title {
color: red;
}

To change only the green in the "breadcrumbs" ( the navigation at the top of your page which looks like 'yourname > category > gallery title') to blue:

#breadcrumb .title {
color: blue;
}

There are DIV IDs on lots of page elements, so you can individually change almost anything you see that's green by simply viewing the HTML source and looking for the text you'd like to change. A "DIV ID" sounds terribly complicated and technical, but it's really not. It's simply a way of giving something on a page a name so you can manipulate it later.

If you look for the breadcrumb data in your HTML source, for example, you'll see that it has a DIV ID of "breadcrumb" which is why the above example works.

Of course, you can use fancy and geeky color codes to pick any of 16,700,000 colors, too. So if you'd like all the green to become smugmug's old blue:

.title {
color: #41B8D4;
}

Hope that helps, and please, reply back if we're still too confusing. We want to help!

Don

[Mike Lane]

Originally Posted by cjohn

Does that imply that from now on we can costumize the color and font of titles and links in each gallery individually, as opposed to costumizing the whole site in the corbrand settings? Surely a dumb question, but my CSS knowlege are close to level 0... actually no, they ARE level 0! :)

In JT's example anything on any page that has an id="breadcrumb" (just search it out in the source once the new stuff goes live) will have a red font. This is what we've all been waiting for. You could easily hide all the elements (on all pages) that have an id="breadcrumb" which in this case sounds like it means that you can hide the Whomever's Page > Gallery > Travel (for example) if you need to (and those with header navigation probably have no use for the breadcrumbs).

[cjohn]

Don,

You've helped a lot, thank you! :) I was naively thinking that "breadcrump" was the name of one of your galleries... Silly me!

Looks like I have some customizing to do!!!!

[cjohn]

Originally Posted by Mike Lane

In JT's example anything on any page that has an id="breadcrumb" (just search it out in the source once the new stuff goes live) will have a red font. This is what we've all been waiting for. You could easily hide all the elements (on all pages) that have an id="breadcrumb" which in this case sounds like it means that you can hide the Whomever's Page > Gallery > Travel (for example) if you need to (and those with header navigation probably have no use for the breadcrumbs).

Got it now! :) This is pretty fantastic indeed, it looks like I will be able to tune stuffs the way I want them. Ok, next stop the bookstore and the CSS shelf.

[mbrady]

Originally Posted by cjohn

Got it now! :) This is pretty fantastic indeed, it looks like I will be able to tune stuffs the way I want them. Ok, next stop the bookstore and the CSS shelf.

There are links to some good CSS reference sites listed here too http://www.sitepronews.com/archives/2005/july/20.html

Matt