Smugmug CSS and HTML Documentation

awgPhoto

There is much great work and help in customizing Smugmug on this forum. As a software engineer, I have been unable to locate a single source of documentation for CSS or HTML applicable to the Smugmug interface that customizers can refer to. This knowledge obviously exists out there but there needs to be one reference of the predefined classes, attributes and functions that are available. There is a link to the API but that is for external apps not for customizing ones own site. Without proper and open documentation users will struggle to get the best out of Smugmug.

jfriend

There is no documentation I'm aware of. Get yourself a good tool like the free Firebug for Firefox or the built-in DOM inspector in Safari, Chrome or IE and you can just look at the DOM on any page. I personally use Chrome. All the objects, hierarchy, classes and IDs are displayed for you. In a way, it's much better than any documentation could ever do as it's always up-to-date and live. That's how we all do it.

There are a few main features of the site such as identifying classes on the object which tell you what kind of page it is or what gallery number it is. Other than that, it's just all the content of each type of page with associated ids and classes all displayed for you to see how it works.

awgPhoto

Thank you for the steer JFriend. However, I have not been able to locate information on such things .NotLoggedIn or the various default Smugmug properties like Breadcrumbs, etc. Any ideas?

jfriend

awgPhoto wrote: »

Thank you for the steer JFriend. However, I have not been able to locate information on such things .NotLoggedIn or the various default Smugmug properties like Breadcrumbs, etc. Any ideas?

I'm not sure what info you're looking for besides what you can see in the page in any DOM inspector tool. The body tag will contain either a loggedIn or notLoggedIn class name. On most pages, there is an object with id="breadcrumb" and id="breadCrumbTrail" that indicates pieces of the navigation breadcrumbs. You just need to right click on an object in the page and choose Inspect Element in Chrome to get all the information you want about any object and once that window opens, you can browse around in the whole DOM to see what's available that you can target with CSS rules or with javascript functions.