Phase 2 Customization

{JT}{JT} Code MonkeyPosts: 1,016Registered Users Major grins
edited August 17, 2005 in SmugMug Support
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.

Comments

  • Mike LaneMike Lane I � Unicode Posts: 7,106Registered Users Major grins
    edited August 15, 2005
    {JT} wrote:
    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:D

    Nice!
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • onethumbonethumb SmugMug CEO & Chief Geek Posts: 1,269Administrators Major grins
    edited August 15, 2005
    Mike Lane wrote:
    I knew that when my page's customization got messed up this morning that new customization options were on the way:D

    Nice!

    Um, no.

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

    Try again. :)

    Don
  • Mike LaneMike Lane I � Unicode Posts: 7,106Registered Users Major grins
    edited August 15, 2005
    onethumb wrote:
    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.
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • cjohncjohn pristine-light.com Posts: 23Registered Users Big grins
    edited August 15, 2005
    {JT} wrote:
    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! :)
    Cheers

    Cédric

    View my work at Pristine Light Photography
  • onethumbonethumb SmugMug CEO & Chief Geek Posts: 1,269Administrators Major grins
    edited August 15, 2005
    {JT} wrote:
    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 LaneMike Lane I � Unicode Posts: 7,106Registered Users Major grins
    edited August 15, 2005
    cjohn wrote:
    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).
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • cjohncjohn pristine-light.com Posts: 23Registered Users Big grins
    edited August 15, 2005
    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!!!!
    Cheers

    Cédric

    View my work at Pristine Light Photography
  • cjohncjohn pristine-light.com Posts: 23Registered Users Big grins
    edited August 15, 2005
    Mike Lane wrote:
    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. rolleyes1.gif
    Cheers

    Cédric

    View my work at Pristine Light Photography
  • mbradymbrady Major grins Posts: 321Registered Users Major grins
    edited August 15, 2005
    cjohn wrote:
    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. rolleyes1.gif
    There are links to some good CSS reference sites listed here too http://www.sitepronews.com/archives/2005/july/20.html

    Matt
  • acapernacapern Amanda Posts: 2Registered Users Beginner grinner
    edited August 15, 2005
    Still Don't Get It...
    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
  • BenVBenV Big grins Posts: 28Registered Users Big grins
    edited August 15, 2005
    {JT} wrote:
    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
  • arthillarthill Art Hill Posts: 62Registered Users Big grins
    edited August 15, 2005
    Agree, some sort of document would help
    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.
    In theory, there is no difference between theory and practice. In practice, however, there is.
    In order to understand recursion, you first have to understand recursion.
    Art Hill
  • {JT}{JT} Code Monkey Posts: 1,016Registered Users Major grins
    edited August 16, 2005
    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 :)


    arthill wrote:
    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.
  • lidaflidaf sensory sponge Posts: 12Registered Users Big grins
    edited August 16, 2005
    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
  • mdifelicemdifelice Beginner grinner Posts: 7Registered Users Beginner grinner
    edited August 17, 2005
    CSS flexibility is GREAT!
    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
    [font=&quot]Part 2 coming soon.[/font]
Sign In or Register to comment.