Guide: Convert existing SmugMug site into new format -match old layout
jwashburn
Registered Users Posts: 476 Major grins
I thought I would share how I converted a customized SmugMug site to the new platform and kept the look and feel of the WordPress site. It’s a work in progress, so there are a few things that don’t quite line up exactly, but this should help get you started. This is also not a detailed, step by step manual, but more of a brief overview to point you in the right direction.
Here is the existing WordPress site we are matching
Here is the SmugMug homepage on the old platform that I had matched to the WordPress site.
The first step is to go into your Advanced Customizer on the old site and email yourself all of your customizations or copy and paste them out to a text file. We are going to need the CSS, Header and possibly the Footer HTML sections.
On your new site, pick a layout, it doesn’t really matter too much because we are going to strip out what we don’t need. Go ahead and take all the blocks off the new layout.
Grab an HTML code block and drag it up into the header. Make sure you are on Entire Site. This is where we are going to put our first code from our old site.
Click the little wrench in the HTML block and paste the code from your old header into this section. Your site is going to look a little funny because you don’t have the CSS for it yet. Don’t worry, we will get to that part next.
You could switch over to CSS tab for the HTML block, but I like to put sitewide CSS into the theme. It works better for me organizationally. Switch from your Content tab to the Theme tab.
Edit your active theme and go into Advanced. This is where you are going to paste in your CSS.
You should take this opportunity to clean out your CSS. If you have code in there from previous customizations like Jfriends slideshow now would be a good time to clean it out. If you need some help, go ahead and ask on this forum. I am sure some of us can help pull out some older code.
This is also a good time to set some colors and fonts in your theme. Go through the Basic and Background tabs and set your fonts and colors. This may allow you to pull some more CSS code out since it’s controlled with the SmugMug UI. Every site is going to be a little different.
If you have a custom footer, then drag and HTML block into the footer section of your site and drop your code in the same way. The CSS should already be there and your footer should look pretty close.
The last step is to put in a code block for the images you want to show on your page, it could be a slideshow, a single photo, a block of folders. Drag that into the correct location your "Home Page” Not entire site.
At this point your site should look pretty close to your old site. Here is the first pass at the site I was working on, notice a border missing around the main black section of the site.
Using your preferred developer tools (I am a fan of Firebug in Firefox) you can start fine tuning by looking for the new css classes and IDs and applying borders, margins, etc. as needed. In this screenshot I have added the border and moved some menus in towards the center a bit to get it closer to the WordPress site. I have also chosen a folder layout that works better.
When you are ready click Done and Publish now to see all of your changes. Remember if you haven’t done the Unveil, your changes are still not live for the public yet.
I hope this helps a few people. Good luck everyone.
Here is the existing WordPress site we are matching
Here is the SmugMug homepage on the old platform that I had matched to the WordPress site.
The first step is to go into your Advanced Customizer on the old site and email yourself all of your customizations or copy and paste them out to a text file. We are going to need the CSS, Header and possibly the Footer HTML sections.
On your new site, pick a layout, it doesn’t really matter too much because we are going to strip out what we don’t need. Go ahead and take all the blocks off the new layout.
Grab an HTML code block and drag it up into the header. Make sure you are on Entire Site. This is where we are going to put our first code from our old site.
Click the little wrench in the HTML block and paste the code from your old header into this section. Your site is going to look a little funny because you don’t have the CSS for it yet. Don’t worry, we will get to that part next.
You could switch over to CSS tab for the HTML block, but I like to put sitewide CSS into the theme. It works better for me organizationally. Switch from your Content tab to the Theme tab.
Edit your active theme and go into Advanced. This is where you are going to paste in your CSS.
You should take this opportunity to clean out your CSS. If you have code in there from previous customizations like Jfriends slideshow now would be a good time to clean it out. If you need some help, go ahead and ask on this forum. I am sure some of us can help pull out some older code.
This is also a good time to set some colors and fonts in your theme. Go through the Basic and Background tabs and set your fonts and colors. This may allow you to pull some more CSS code out since it’s controlled with the SmugMug UI. Every site is going to be a little different.
If you have a custom footer, then drag and HTML block into the footer section of your site and drop your code in the same way. The CSS should already be there and your footer should look pretty close.
The last step is to put in a code block for the images you want to show on your page, it could be a slideshow, a single photo, a block of folders. Drag that into the correct location your "Home Page” Not entire site.
At this point your site should look pretty close to your old site. Here is the first pass at the site I was working on, notice a border missing around the main black section of the site.
Using your preferred developer tools (I am a fan of Firebug in Firefox) you can start fine tuning by looking for the new css classes and IDs and applying borders, margins, etc. as needed. In this screenshot I have added the border and moved some menus in towards the center a bit to get it closer to the WordPress site. I have also chosen a folder layout that works better.
When you are ready click Done and Publish now to see all of your changes. Remember if you haven’t done the Unveil, your changes are still not live for the public yet.
I hope this helps a few people. Good luck everyone.
Joey Washburn
www.joeywashburn.com
www.joeywashburn.com
0
Comments
Herrington Photography
www.herringtonphotography.com
Its currently not possible.
www.joeywashburn.com
Herrington Photography
www.herringtonphotography.com