How to match my blog with new SM

ko04 · July 30, 2013

Hey everyone,
So as must of you on there are probably trying to figure this new site SM has and whether or not you want to make the switch there is one thing that is stopping me. This is that fact that I have my blog site match to look just like my SM site. I am not good with code so a lot of it I learned from here and had Denise help me with by just telling me where to copy and paste things. Thats what I do a lot of times copy and paste code that I see and change it to look like what I want for my site (if its something that is very unique I usually ask the person if its okay just FYI). So with that being said lets say I decide to switch over and use one of SM's templets is there any way to have my blogger match it. I know everyone is still trying to figure this all out so people might not have the answer yet but I'd be very curious if there is a way. If there is I will more than likely make the leap.

Thanks in advance,
KO
www.k-ophotography.com
http://k-ophotography.blogspot.com/

jasonscottphoto · July 30, 2013

I'd like to do this too... I found a blogger template I like. I just want to be able to have my header (title and nav menu) from the smugmug site be the same or similar on the blogger site. If anybody figures out how to get that code extracted, let me know

ko04 · July 30, 2013

jasonscottphoto wrote: »

I'd like to do this too... I found a blogger template I like. I just want to be able to have my header (title and nav menu) from the smugmug site be the same or similar on the blogger site. If anybody figures out how to get that code extracted, let me know

I have sent this question to smugmug as well in hopes they might have a answer so if they do I will share it with you all.

paulbrock · July 30, 2013

I'd like to know too. Looks like the only way I can have a custom contact form is to host it somewhere else and try and match the style on both sites.

denisegoldberg · July 30, 2013

I was able to match my blog to the new smugmug but it was by trial and error.

My old site had a side-by-side header and nav. I used the old CSS and HTML in my blog but adjusted the font and size until it was pretty close to matching. For right now pretty close will do.

I ignored the blog until I was happy with the look of my smug site.

Then I went to Google fonts (http://www.google.com/fonts/) and grabbed the two fonts I had selected in smug. I added the link just after the <head> tag in my blog html per the instructions on the Google fonts page. I copied the CSS from there as well and placed it in the appropriate entries for my header / nav. I played with the sizes of the fonts using percentages until the sites were pretty close. There is probably a better way to do this but I took the easy way out.

Take a look, http://www.denisegoldberg.com.

If you want to extract the code from your updated smug site you will need to use a tool like the Firefox Web Developer Extension or the tools in Firefox or Chrome to identify the pieces of code. I thought I had a good shot at just tweaking the code that was in my blog already; that worked well for me.

--- Denise

jasonscottphoto · July 30, 2013

denisegoldberg wrote: »

I copied the CSS from there as well and placed it in the appropriate entries for my header / nav.

---

If you want to extract the code from your updated smug site you will need to use a tool like the Firefox Web Developer Extension or the tools in Firefox or Chrome to identify the pieces of code. I thought I had a good shot at just tweaking the code that was in my blog already; that worked well for me.

--- Denise

What CSS from where?

I tried extracting the code using a tool like that but it was waaaaaay too complex and blogger didn't like it when I tried to cut and paste...

jasonscottphoto · July 30, 2013

OK, I figured out what CSS you mean... Hmm... I think I might be able to figure this out as you have described. Hmm hmm hmm...

Like you said, I am ignoring the blog right now because I have so many "pages" I need to create on the smugmug site... lots of rearranging, lots of links to fix... blah blah. I am excited about a new and improved site, just afraid I am going to miss something before I unveil...

AND, Blogger doesn't really allow me the same chance to play in a sandbox first

ko04 · July 30, 2013

Denise what I'm curious about is how to take a pre built templet from SM and customize your blogger site to look just like that is this at all possible. My thoughts are is that I very might just redo my whole website but by using the templets that SM has then from there intergrading maybe some advance things that I want to have done. I'm not sure if that makes sense.

denisegoldberg · July 30, 2013

ko04 wrote: »

Denise what I'm curious about is how to take a pre built templet from SM and customize your blogger site to look just like that is this at all possible. My thoughts are is that I very might just redo my whole website but by using the templets that SM has then from there intergrading maybe some advance things that I want to have done. I'm not sure if that makes sense.

You'll need to use whatever tools you are comfortable with the identify the CSS and HTML that makes up the pieces of the template that you will need to duplicate on your blog. Only you can determine what is too much work.

It took me very little time, just a bit of patience and tweaking, to adjust my blog to match my updated smug site. As I noted in my previous post I was able to use the CSS and HTML that was in my blog from my previous design with some relatively minor changes. The changes were the use of a Google Font, entering HTML for my new navbar entries, and playing with the size of the font.

--- Denise

bradpowellphoto · July 30, 2013

Why wouldnt they include something as basic as a blog in the new customization?

denisegoldberg · July 30, 2013

bradpowellphoto wrote: »

Why wouldnt they include something as basic as a blog in the new customization?

See my answer to your thread; Michael Bonocore is using pages in the new smug for his blog.

--- Denise

jasonscottphoto · July 31, 2013

New site online: http://www.jasonscottphoto.com

Blog (no drop downs, but otherwise I think it looks pretty good): http://www.jasonscottphotoblog.com

ko04 · July 31, 2013

jasonscottphoto wrote: »

I'd like to do this too... I found a blogger template I like. I just want to be able to have my header (title and nav menu) from the smugmug site be the same or similar on the blogger site. If anybody figures out how to get that code extracted, let me know

jasonscottphoto wrote: »

New site online: http://www.jasonscottphoto.com

Blog (no drop downs, but otherwise I think it looks pretty good): http://www.jasonscottphotoblog.com

Looks great! So that was one of the templets correct?

Thanks a lot Denise for answering my question that clears it up I think. So I will either start a new blog like Michaels or figure out how to see where all the Code is in the templet I decide to use. Its not about the amount of work I don't mind that so much its about the fact that I'm really not a good coder so we will see. Thanks a lot once again.

jasonscottphoto · July 31, 2013

ko04 wrote: »

Looks great! So that was one of the templets correct?

SmugMug "Zoe" template w/some color changes.

I already had my blog set up with Denise's original directions, so I just made a few tweaks

ko04 · July 31, 2013

jasonscottphoto wrote: »

SmugMug "Zoe" template w/some color changes.

I already had my blog set up with Denise's original directions, so I just made a few tweaks

Yeah I used Denise original directions as well on my current blog so I will just have to figure out how to do it with smugmugs templets instead of original CSS that I have

electrolyte · August 4, 2013

Hi, can anyone clever help me to work out what CSS & HTML I need to copy from the code of my site to make my blog the same format as my site please?

My blog is blog.simonbutlerphotogrphy.com.

PS it's just the code for the logo and nav bar that I need.

GuthriePhotography · August 4, 2013

ko04 wrote: »

Hey everyone,
So as must of you on there are probably trying to figure this new site SM has and whether or not you want to make the switch there is one thing that is stopping me. This is that fact that I have my blog site match to look just like my SM site. I am not good with code so a lot of it I learned from here and had Denise help me with by just telling me where to copy and paste things. Thats what I do a lot of times copy and paste code that I see and change it to look like what I want for my site (if its something that is very unique I usually ask the person if its okay just FYI). So with that being said lets say I decide to switch over and use one of SM's templets is there any way to have my blogger match it. I know everyone is still trying to figure this all out so people might not have the answer yet but I'd be very curious if there is a way. If there is I will more than likely make the leap.

Thanks in advance,
KO
www.k-ophotography.com
http://k-ophotography.blogspot.com/

How did you get the client login on your new smugmug
I have beend looing all over for this..

denisegoldberg · August 4, 2013

GuthriePhotography wrote: »

How did you get the client login on your new smugmug
I have beend looing all over for this..

His new site has not been unveiled yet; the site you see is legacy smugmug. The client login hack from legacy smugmug requires Javascript and that is not available in the new smug at this point in time.

--- Denise

ko04 · August 4, 2013

denisegoldberg wrote: »

His new site has not been unveiled yet; the site you see is legacy smugmug. The client login hack from legacy smugmug requires Javascript and that is not available in the new smug at this point in time.

--- Denise

Thanks Denise for replying to that persons question. Denise is right I'm still in legacy mode, though it's good to know that the client login isn't available since it was something I was going to try to figure out for my new sm website.

TBT · August 13, 2013

denisegoldberg wrote: »

I was able to match my blog to the new smugmug

Take a look, http://www.denisegoldberg.com.

If you want to extract the code from your updated smug site you will need to use a tool like the Firefox Web Developer Extension or the tools in Firefox or Chrome to identify the pieces of code. I thought I had a good shot at just tweaking the code that was in my blog already; that worked well for me.

--- Denise

oll
Denise

Thanks for the info. There is a bug (or feature?) in the blog integrtion. If I click on an image in your blog, I get the full screen image. great. Now if I hit the x in the upper right I would expect to be back where I left off browsing your blog? But instead I'm now in the smugmug gallery and have to clik on the blog menu and scroll back down to where I left off.

denisegoldberg · August 13, 2013

TBT wrote: »

There is a bug (or feature?) in the blog integrtion. If I click on an image in your blog, I get the full screen image. great. Now if I hit the x in the upper right I would expect to be back where I left off browsing your blog? But instead I'm now in the smugmug gallery and have to clik on the blog menu and scroll back down to where I left off.

That's not a bug; it's deliberate.

If you want to stay within the blog you could upload the photos to blogger's photo store. I want to drive traffic to my photo site.

--- Denise

electrolyte · August 13, 2013

I've had a play matching my blog with the modified Sierra template on my SM site. I've made an OK job so far but I haven't matched them particularly well. Please would someone who understands HTML and CSS better than me be willing to help me improve these 3 things please:

1. The navbar menu isn't centred underneath my logo on the blog and there is a bigger gap between the logo and the menu text on the blog than on my SM

2. The menu text isn't evenly spaced on my blog, it is all squashed to one side

You can see the problem in these two screen grabs:

Main SM site

main%20site-L.jpg

Blog

3. The last thing is that I can't work out how to make the blog main body text larger - it is too small, it looks like it is 12px and I want 13 or 14.

Can anyone help with these please?

Main website is: www.simonbutlerphotography.com

Blog is: blog.simonbutlerphotography.com

divamum · August 13, 2013

I'm actually THRILLED with how much better the new smug can match my blog... to the point that I'm probably going to redirect my domain name to start at smug now instead of at my wordpress site (all in due course - one thing at a time!)

http://divatography.com (vs divamum.smugmug.com)

They don't exactly match (navbars are slightly different, colour blocks are inverted etc), but I'm pretty happy at the continuity between them; the consistent logo helps, as does the matching colour scheme. No, they're not "the same", but I think they work well together and am super-happy. This was pretty much impossible with legacy Smug (and my skillset), so the new system has been a real bonus for me. I realise this may not be true for everybody, but fwiw....

My blog is wordpress.com, for what it's worth - just the free one, hosted by them. I have a wordpress.org site for my singing activities and, while I love it, it was a TOTAL PAIN to set up on my host, and I didn't want to go through that again, so I just took the path of least resistance. It's been fine for me so far............

PS I adjusted some things on the blog as well as some things on SM - I didn't only try to tweak one. It was easier to split the difference than try to force one or the other to match....

How to match my blog with new SM

Comments