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

[acapern]

I'm totally new at this - just signed on less than a week ago. I've figured out the basics (iknowaguy.smugmug.com) but I'd like to know more. I'd like to use my account for different purposes and I want the custimization to be different. So could you show me a specific example of how this breadcrumb stuff works? I don't even know where to look when I read HTML source code. I have bought 2 books and am willing to learn!!

Amanda

[BenV]

Originally Posted by {JT}

More hints to follow, post your questions here.

Perhaps instead of providing "hints" (as if we're all a bunch of script kiddie hackers just waiting to get our hands on a new challenge), you can give us a link to where all the classes and div IDs are/will be documented.

Will this page be updated to follow suit?

BenV

[arthill]

I agree with BenV. Please provide a document that shows div id's and classes. And/or just list which stylesheets go with what. As I understand it, basically we are overriding the default stylesheet items when we put elelments into the customization section.

[{JT}]

As I have said many times before, we will be providing written documentation on the new classes and styles once the new pages are created and finalized :)

Originally Posted by arthill

I agree with BenV. Please provide a document that shows div id's and classes. And/or just list which stylesheets go with what. As I understand it, basically we are overriding the default stylesheet items when we put elelments into the customization section.

[lidaf]

i hope there will be an easier way to make the "all HTML" pages within a gallery with the new changes today! (i can't wait to start customizing!) thanks smugmug.

Lida

[mdifelice]

I’ve started to update my site and the add flexibility of CSS is great.

Example: http://mdifelice.smugmug.com/gallery/677841



My CSS development process/environment.

• Open up your site to the new Style: SmugMug
• From what ever browser you are using (IE or Firefox), Right Click on the Page and click ”View Source”
• Copy page XHTML source to a new notepad document and save as: “smugmug.html”
• You should be using a GOOD XHTML/HTML/CSS Application. I use and highly recommend topSTYLE pro: http://www.bradsoft.com/topstyle/index.asp
• Start “topSTYLE pro” and open the file created in Step 3.
• From the File menu go ahead and create 2 new CSS style sheets, One called “style_work” and the other called “style_master”
• The key is to find all the Tags: <div>, class and ID’s) and find out what area’s of the page they effect. The next few steps will allows us to link the 2 new style sheets created in 6 and view any changes to them on the smugmug.html” With the first one “style_work” being used for testing and messing around and the 2nd one, “style_master” being the final version, these are the changes we plan on adding to the (SmugMug > Control Panel> Customize> stylesheet HTML ) area. Note: the first tab in topSTYLE will show the smugmug.html page with no changes, that was you can see the default SmugMug style.
• In topSTYLE pro, click on one the new blank style sheets created in step 6 and find the “Select Preview File” icon above the preview pain and select the smugmug.html file created in step 3
• You can view screen shot from: http://mdifelice.smugmug.com/gallery/738509

Part 2 coming soon.