mdifelice
Aug-17-2005, 12:22 PM
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: , 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.
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: , 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.