• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization HOW TO match your blog to your smug site (blogger-specific)

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 86  of  93
Old Apr-25-2012, 07:10 PM
#1701
JodiCrandellPhotography is offline JodiCrandellPhotography
MarkCPhoto
JodiCrandellPhotography's Avatar
Thanks Denise, that's Awesome! It's clickable and looks great... now to tackle the background and a bit of positioning and it should look almost identical.

btw... I learned something about XML. It seems that Blogger is picky and doesn't accept "&nbsp", instead I've changed to "&#160"... with the same results as on smuggy! :)
Old Apr-26-2012, 12:11 AM
#1702
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by JodiCrandellPhotography View Post
Thanks Denise, that's Awesome! It's clickable and looks great... now to tackle the background and a bit of positioning and it should look almost identical.

btw... I learned something about XML. It seems that Blogger is picky and doesn't accept "&nbsp", instead I've changed to "&#160"... with the same results as on smuggy! :)
Very cool! Just wanted to let you know, I won't be available to experiment with this until sometime over the weekend. Please post back if you figure it out in the meantime.

Blogger is picky! Thanks for the heads up on the &nbsp.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-27-2012, 09:23 PM
#1703
lenapetersonphotography is offline lenapetersonphotography
Big grins
Help Please
So I was able to get my nav bar working and a header on my blogger but they wont center right.
If they would just center right it would look great! Any ideas on how to fix it so they center?

www.lenapetersonphotography.com

http://lenapetersonphotography.blogspot.com/


Also if you know of anyway to get the blog and side bar one piece and the same width as the html pages on my smugmug site that would be amazing as well!

thank you so much!
Old Apr-28-2012, 04:04 AM
#1704
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by lenapetersonphotography View Post
So I was able to get my nav bar working and a header on my blogger but they wont center right.
If they would just center right it would look great! Any ideas on how to fix it so they center?

www.lenapetersonphotography.com

http://lenapetersonphotography.blogspot.com/


Also if you know of anyway to get the blog and side bar one piece and the same width as the html pages on my smugmug site that would be amazing as well!
Start by using the same divs and sizes for your elements.
  • In your smug site, your header is in the div #customLogo with a width of 1178px and a height of 205px.
  • In your blog, your header shows as img #Header1_headerimg with a width of 869px and a height of 201px.
If you want to match the sites, start by using the same elements on both sites, same names, same sizes. That should give you the same placement on both sites.

You can adjust the width of your blog by changing the elements noted in the post
Stretchy blog format in this thread. You'll want to set the element #outer-wrapper to the width that you are after.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-28-2012, 04:15 AM
#1705
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by JodiCrandellPhotography View Post
...now to tackle the background and a bit of positioning and it should look almost identical.
It looks like there are still some blogger elements above your navbar, and it's those elements that are causing the navbar to drop a bit. Can you look again at the actual template and see if you can try another placement for the navbar?

You have my_header_background and my_banner_logo defined in your CSS as ids (with a #) but referenced in html as a class (with a .). If you change them to a class in the css the background will show, like this:
Code:
.my_header_background{
height: 50px;
padding: 0;
background: url(http://www.jodicrandellphotography.com/photos/i-DnGxG5k/2/Th/i-DnGxG5k-Th.png) repeat-x;
}
.my_banner_logo {
width: 400px;
height: 128px;
margin: 0;
background: url(http://www.jodicrandellphotography.com/photos/i-LTVHFw7/2/S/i-LTVHFw7-S.png) no-repeat;
}
You will also need to change the HTML placement from this:
Code:
<div class="my_header_background"></div>
<div class="my_banner_logo">
<a href="http://www.jodicrandellphotography.com">
<img src="http://www.jodicrandellphotography.c...-LTVHFw7-S.png">
</a>
</div>
to this:
Code:
<div class="my_header_background">
<div class="my_banner_logo">
<a href="http://www.jodicrandellphotography.com">
<img src="http://www.jodicrandellphotography.c...-LTVHFw7-S.png">
</a>
</div></div>
--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-28-2012, 10:49 AM
#1706
lenapetersonphotography is offline lenapetersonphotography
Big grins
Now my drop down menu doesn't work any suggestions?!
Old Apr-28-2012, 02:05 PM
#1707
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by lenapetersonphotography View Post
Now my drop down menu doesn't work any suggestions?!
I suspect the problem is due to where you've placed the code in your blog - it looks like it is inside of some of the blogger divs. Your banner and navbar HTML should be placed before any of bloggers divs.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-28-2012, 02:55 PM
#1708
lenapetersonphotography is offline lenapetersonphotography
Big grins
The only way I could get the nav bar HTML to work was to select a html widget to put the html code in when I try to put it in directly in the edit HTML code option it says my template could not be parsed as it is not well formed-

I am using this html code and tried putting it before
</b:template-skin>
</head>

here is the html code I am using that wont work.

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a class="drop" href="http://www.lenapetersonphotography.com" title="Lena Peterson Photography">Home<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/Contact/" title="Contact Me!">Get In Touch</a></li>
<li><a href="mailto:lenapetersonphotography@yahoo.com" title="Send Lena Email">Email Me</a></li>
<li><a href="http://www.facebook.com/lenapetersonphotography" title="Facebook">Facebook</a></li>
<li><a href="http://lenapetersonphotography.blogspot.com" title="Blog">Blog</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="http://www.lenapetersonphotography.com/portfolio" title="Portfolio">Portfolio<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/portfolio/babies" title="Newborns & babies">Babies</a></li>
<li><a href="http://www.lenapetersonphotography.com/Portfolio/Bellies" title="Maternity">Bellies</a></li>
<li><a href="http://www.lenapetersonphotography.com/portfolio/Families" title="Family">The Fam</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="" title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/About" title="The Photographer">Lena Peterson</a></li>
<li><a href="http://www.lenapetersonphotography.com/Other/Prices" title="Prices & Investment">Investment</a></li>
<li><a href="http://www.lenapetersonphotography.com/Other/Payment" title="How To Pay">Payment</a></li>
<li><a href="http://pinterest.com/lenapeterson/what-to-wear/" title="Some Style!">What To Wear</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.lenapetersonphotography.com/Other/Calendar" title="Lets Book It!">Calendar<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.lenapetersonphotography.com/Other/Prints" title="Order Art">Prints For Sale<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="" title="Order Your prints!">Client Galleries<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.lenapetersonphotography.com/Other/Clients" title="Order Your Prints!">Client Galleries</a></li>
<li><a href="http://pinterest.com/lenapeterson/what-to-do-with-prints/" title="Get Creative!">What To Do With Prints</a></li>
<li><a class="drop" href="" title="Product Info">Products»<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->


<ul>
<li><a href="http://www.smugmug.com/prints/whcc-standouts">Standouts</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-gallery-wraps">Gallery Wraps</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-mounted-prints">Mounted Prints</a></li>
<li><a href="http://www.smugmug.com/prints/whcc-float-wraps">Float Wraps</a></li>

<li><a href="http://help.smugmug.com/customer/portal/articles/93268">Cropping</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</div>
</div>
<!-- End Navbar Code -->

and it wont work

I put the CSS code for it under the
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

I just need the navbar to work and I'm all done. Thank you so much for your responses and help and i really appreciate it!
Old Apr-28-2012, 02:59 PM
#1709
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by lenapetersonphotography View Post
The only way I could get the nav bar HTML to work was to select a html widget to put the html code in when I try to put it in directly in the edit HTML code option it says my template could not be parsed as it is not well formed
It doesn't matter where the CSS is located within the blog's CSS, but it does matter where you place the HTML.

I don't know if you can put your navbar into an HTML widget and have the same functionality as you do in your smug site. I guess it should work; I haven't seen a drop-down nav bar done that way.

If you can't save the code in your template that means there is an error in your code. You will need to review your HTML and make sure that the syntax is exactly correct. Every starting tag must be matched with an ending tag. (Smug lets you get away with HTML that isn't quite right; Blogger does not.)

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+

Last edited by denisegoldberg; Apr-28-2012 at 05:09 PM.
Old Apr-28-2012, 03:24 PM
#1710
lenapetersonphotography is offline lenapetersonphotography
Big grins
oh jeez I can't figure out if there is anything wrong with it thats a little too over my head I guess I'll just leave it unable to drop down for now.
Old Apr-28-2012, 08:19 PM
#1711
Pono Photo is offline Pono Photo
Big grins
Pono Photo's Avatar
Yowza! So 6 ours later, and I finally figured out how to do this with one of the advanced templates. It was driving me nuts previewing fine but not saving at all. Then I realized I needed to change over to the old interface as it won't let you mess with the HTML in the new interface I guess.

So here is the issue now though. I want to get rid of the blogger navbar at the top. I followed the instructions from the first post in this giant thread and inserted that code. It removed the nav bar, but left the space at the top where it used to be. So the challenge is how to remove the bar AND close up the gap at the top.

Oh and one more thing. I have a custom java script contact me page. But I don't think I can use it on the blogger site. I can't figure out where to put the java script, if I even can. So for the moment, I have the Contact button on my blogger page take people back to the home page of my web site. It's better than nothing until I can figure out what I am missing here...

Any help you may have out there will be greatly appreciated!

www.ponophoto.com
__________________
"The key to immortality is to first live a life worth remembering." ~Bruce Lee~
"Everyone has a photographic Memory, some just don't have film." ~Steven Wright~

Pono Photo
Old Apr-29-2012, 04:02 AM
#1712
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by Pono Photo View Post
Oh and one more thing. I have a custom java script contact me page. But I don't think I can use it on the blogger site. I can't figure out where to put the java script, if I even can. So for the moment, I have the Contact button on my blogger page take people back to the home page of my web site. It's better than nothing until I can figure out what I am missing here...
I don't believe you can use Smug's pro contact form outside of smug - and jfriend's code requires smug's form. You will need to implement a different form from the link on your blog.

Quote:
Originally Posted by Pono Photo View Post
I want to get rid of the blogger navbar at the top. I followed the instructions from the first post in this giant thread and inserted that code. It removed the nav bar, but left the space at the top where it used to be. So the challenge is how to remove the bar AND close up the gap at the top.
Add this to your CSS:
Code:
#navbar-iframe,
#navbar { 
    display:none; 
}
--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+

Last edited by denisegoldberg; Apr-29-2012 at 04:38 AM.
Old Apr-29-2012, 04:58 AM
#1713
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by lenapetersonphotography View Post
oh jeez I can't figure out if there is anything wrong with it thats a little too over my head I guess I'll just leave it unable to drop down for now.
It's quite possible that using an HTML widget for your drop-down navbar is fine, but whatever errors stopped you from saving your template is also causing the HTML to not behave properly in the widget. Blogger requires that the HTML be correct from a syntax standpoint. Either way, you need to fix the HTML or go without the dropdowns.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-29-2012, 12:35 PM
#1714
Pono Photo is offline Pono Photo
Big grins
Pono Photo's Avatar
Yeah, I was just talking with jfriend and he told me it was based around the smugmug framework. So now I have to go back to a wufoo based contact page. I guess that will work just as well, just not as cool looking.

Oh and thanks for reminding me to drop that extra code into the CSS. totally forgot!

www.ponophoto.com
__________________
"The key to immortality is to first live a life worth remembering." ~Bruce Lee~
"Everyone has a photographic Memory, some just don't have film." ~Steven Wright~

Pono Photo
Old Apr-29-2012, 12:42 PM
#1715
Pono Photo is offline Pono Photo
Big grins
Pono Photo's Avatar
So that was interesting. I went back to the first post you made about this and went to the link about removing the navbar. I put in the code he said to use there and it removed it, but it also left the space there. So there was just an open nothing at the top of the page. I then deleted that code, and replaced it with what you just said to use, and it worked fine. Everything is where it should be. Thanks for that one! If it had not moved everything up like your code did, I was just going to leave the navbar there since the gap looked weird. Thanks again! You are a rock star!
__________________
"The key to immortality is to first live a life worth remembering." ~Bruce Lee~
"Everyone has a photographic Memory, some just don't have film." ~Steven Wright~

Pono Photo
Old May-03-2012, 01:10 PM
#1716
marcusrichphoto is offline marcusrichphoto
Major grins
marcusrichphoto's Avatar
I must be so dim, cause I just aint getting this at all, I'm just not clear what CSS & HTML to grab and where to put it, I've been banging my head against a brick wall all night
__________________
Marcus.

He's not the Messiah. He's a very naughty boy!

My website: http://www.marcusrichphotography.com

Last edited by marcusrichphoto; May-03-2012 at 01:55 PM.
Old May-03-2012, 02:38 PM
#1717
marcusrichphoto is offline marcusrichphoto
Major grins
marcusrichphoto's Avatar
Quote:
Originally Posted by marcusrichphoto View Post
I must be so dim, cause I just aint getting this at all, I'm just not clear what CSS & HTML to grab and where to put it, I've been banging my head against a brick wall all night
I've tried putting the following HTML in the header, but it just wont work

<div id="customHeaderContainer"><div id="customLogo"><img src="http://www.marcusrichphotography.com/photos/i-Lm7R8x2/0/O/i-Lm7R8x2.jpg" style="visibility: hidden;" border="0"></div><div id="customNavContainer"><ul id="customNav"><li><a href="http://www.marcusrichphotography.com/">Home </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/Other/Bio/20460842_XwgLBx"> Bio </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/galleries"> Galleries </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/Other/Services/20913933_8Vbx85"> Services </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/Other/Guest-Book/20078949_9dzDv8"> Guest Book </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/Other/Desktop-Wallpapers/21724788_tvdvdR"> Wallpapers </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://www.marcusrichphotography.com/Other/Links/20986940_9pc8VW"> Links </a></li><li>&nbsp;•&nbsp;</li><li><a href="http://marcusrichphoto.wufoo.com/forms/z7x3k1/"> Contact</a></li></ul></div></div><div id="my_banner"> </div>

__________________
Marcus.

He's not the Messiah. He's a very naughty boy!

My website: http://www.marcusrichphotography.com
Old May-03-2012, 03:06 PM
#1718
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by marcusrichphoto View Post
I've tried putting the following HTML in the header, but it just wont work
I suspect you have one of two problems:
  • Blogger doesn't like the special characters in your HTML. Remove them, then try to save again.
  • Blogger does not tolerate HTML that is not syntactically correct, while smug sometimes lets some small errors through. Every tag must have a corresponding end tag.
--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old May-04-2012, 03:56 AM
#1719
marcusrichphoto is offline marcusrichphoto
Major grins
marcusrichphoto's Avatar
Quote:
Originally Posted by denisegoldberg View Post
I suspect you have one of two problems:
  • Blogger doesn't like the special characters in your HTML. Remove them, then try to save again.
  • Blogger does not tolerate HTML that is not syntactically correct, while smug sometimes lets some small errors through. Every tag must have a corresponding end tag.
--- Denise
Hi Denise, I'm affraid I am not an HTML expert, so I have no idea what is a special character is. Blogger did mention the image needed a img tag at the end, but I still couldn't work out the correct way to show the tag.

Is there someone I can pay to set it up for me?

Marcus.
__________________
Marcus.

He's not the Messiah. He's a very naughty boy!

My website: http://www.marcusrichphotography.com
Old May-04-2012, 04:09 AM
#1720
denisegoldberg is offline denisegoldberg OP
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by marcusrichphoto View Post
Blogger did mention the image needed a img tag at the end, but I still couldn't work out the correct way to show the tag.
Ah, that's likely the problem then. Your <img tag doesn't end properly.
Change this:
<img src="http://www.marcusrichphotography.com/photos/i-Lm7R8x2/0/O/i-Lm7R8x2.jpg" style="visibility: hidden;" border="0">
to this:
<img src="http://www.marcusrichphotography.com/photos/i-Lm7R8x2/0/O/i-Lm7R8x2.jpg" style="visibility: hidden;" border="0" />
Note the addition of the / before the end of the statement.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Page 86  of  93
Tell The World!  

Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump