HTML and CSS Customizations for New SmugMug

hp_girl · August 13, 2013

I had a head tag, custom header and custom footer in the old SM and I've tried adding an HTML block to the new SM, but without the head tag code it does not translate my HTML correctly because it does not see my CSS links.

I have half my site on a GoDaddy server and half on SM so I use the same CSS files for both so I only have one file to make modifications to and it keeps both sites looking the same. It is ill advised to use link or meta data tags inside the body tag so I need some help as to how SM intended for users of the old Advanced Customization screen to transport the look and feel to the new SM. Please help me.

jwashburn · August 13, 2013

hp_girl wrote: »

I had a head tag, custom header and custom footer in the old SM and I've tried adding an HTML block to the new SM, but without the head tag code it does not translate my HTML correctly because it does not see my CSS links.

I have half my site on a GoDaddy server and half on SM so I use the same CSS files for both so I only have one file to make modifications to and it keeps both sites looking the same. It is ill advised to use link or meta data tags inside the body tag so I need some help as to how SM intended for users of the old Advanced Customization screen to transport the look and feel to the new SM. Please help me.

That is correct. You can no longer link to external CSS. I have submitted a request to have this changed, but have not heard back yet. For now you are going to need to copy your CSS from your GoDaddy site into the CSS on your new site

Hikin' Mike · August 13, 2013

jwashburn wrote: »

That is correct. You can no longer link to external CSS. I have submitted a request to have this changed, but have not heard back yet. For now you are going to need to copy your CSS from your GoDaddy site into the CSS on your new site

I haven't tried it, but you should be able to use the @import function on your custom CSS.

jwashburn · August 13, 2013

Hikin' Mike wrote: »

I haven't tried it, but you should be able to use the @import function on your custom CSS.

It doesnt work. Been there, tried that. They have that blocked as well. Maybe to prevent some sort of cross site scripting issues.

Here is a link to where I outlined how I did it. It might help

http://www.dgrin.com/showthread.php?t=238762

hp_girl · September 5, 2013

What do I do with the java that was in my head tag section (lines that called my Superfish java for my custom menus so they match the rest of my site)? Not an expert with java so not sure of where else I'm allowed to place that code.

Also, I had tags like "itemtype="http://schema.org/LocalBusiness" in my tag at the top. How do I incorporate that for my Google meta data in the new SM?

nario · September 5, 2013

hp_girl wrote: »

What do I do with the java that was in my head tag section (lines that called my Superfish java for my custom menus so they match the rest of my site)? Not an expert with java so not sure of where else I'm allowed to place that code.

Also, I had tags like "itemtype="http://schema.org/LocalBusiness" in my <html> tag at the top. How do I incorporate that for my Google meta data in the new SM?

Your site (and images) are outstanding!

thenickdude · September 5, 2013

You can't use Superfish, as JavaScript is not supported, you'll have to replace your menus with a SmugMug navigation block.

You can't add a custom meta tag to the header either.

hp_girl · September 9, 2013

They've got to give us some custom meta tags. If they want to make sure we don't overwrite theirs, just give us the ones they will allow on a settings screen or something. If I don't have my custom meta tags, the code in my footer will not get the SEO credit by Google.

hp_girl · September 9, 2013

jwashburn wrote: »

It doesnt work. Been there, tried that. They have that blocked as well. Maybe to prevent some sort of cross site scripting issues.

Here is a link to where I outlined how I did it. It might help

http://www.dgrin.com/showthread.php?t=238762

This was VERY helpful. I still need custom meta tags and Javascript.

thenickdude · September 9, 2013

Which meta tag are you trying to use? SmugMug can generate some tags from the account settings.

Allen · September 9, 2013

Label new Map button.
Added all galleries CSS.

.sm-button.sm-button-image-map:after {
   content:" Map This"
}

hp_girl · September 17, 2013

Lamah wrote: »

Which meta tag are you trying to use? SmugMug can generate some tags from the account settings.

So sorry. I had "meta tags" in my head, but that's not the broken link in the chain. This is the line I need (or so I think) for Google to recognize my structured data elements:

<html itemscope itemtype="http://schema.org/LocalBusiness">

Hikin' Mike · September 17, 2013

hp_girl wrote: »

So sorry. I had "meta tags" in my head, but that's not the broken link in the chain. This is the line I need (or so I think) for Google to recognize my structured data elements:

<html itemscope itemtype="http://schema.org/LocalBusiness">

You wouldn't want to use that particular itemtype site-wde anyway. I would think you would create a custom page showing where you are, hours etc and then use that itemtype. Just wrap that in a <div> instead of an <html> tag.

I'm using a custom Portfolio page (gallery) using the 'Breadcrumbs' and the 'ImageGallery'.

<ul id="myBreadcrumbs">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home"><a href="/" itemprop="url"><span itemprop="title">Home</span></a></li>
    <li class="sep">&#187;</li>
    <li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category current"><a href="/Yosemite/" itemprop="url"><span itemprop="title">Portfolio</span></a></li>
</ul>
<div class="portfolio" itemscope itemtype="http://schema.org/ImageGallery">
<h1>Portfolio</h1>
<p>This is my online photo gallery that showcases my landscape, nature, wildlife, black &amp; white, and inspirational pictures from throughout the Central Valley (Atwater, Merced, Los Banos, Turlock &amp; Modesto) of California. Some of my favorite locations would have to be Yosemite, Sequoia, Kings Canyon, the Merced NWR in Merced, San Luis NWR near Los Banos, and Yosemite Lake right here in Merced. For taking pictures of the songbirds or Hummingbirds, my own backyard here in Atwater!</p>
    <div itemscope itemtype="http://schema.org/ImageGallery" class="showcase">
        <h2 itemprop="name">Yosemite</h2>
        <a itemprop="url" href="/Yosemite/"><img src="http://www.imagesinthebackcountry.com/images/showcase/yosemite.jpg" alt="Yosemite Gallery" title="Yosemite Gallery" /></a>
        <p itemprop="description">My Yosemite gallery contains.photos of Yosemite Valley locations like Half Dome, El Capitan, and Bridalveil Falls. I also have photos from Glacier Point and locations from Tuolumne Meadows and Tioga Pass with high-country icons like Mammoth Peak, Mount Dana and Lembert Dome.</p>
    </div>

...

</div>

hp_girl · October 25, 2013

That worked! Thanks Hikin' Mike!
Thanks Hikin' Mike! Using DIV instead of HTML worked!

Hikin' Mike wrote: »

You wouldn't want to use that particular itemtype site-wde anyway. I would think you would create a custom page showing where you are, hours etc and then use that itemtype. Just wrap that in a <div> instead of an <html> tag.

I'm using a custom Portfolio page (gallery) using the 'Breadcrumbs' and the 'ImageGallery'.

<ul id="myBreadcrumbs">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home"><a href="/" itemprop="url"><span itemprop="title">Home</span></a></li>
    <li class="sep">»</li>
    <li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category current"><a href="/Yosemite/" itemprop="url"><span itemprop="title">Portfolio</span></a></li>
</ul>
<div class="portfolio" itemscope itemtype="http://schema.org/ImageGallery">
<h1>Portfolio</h1>
<p>This is my online photo gallery that showcases my landscape, nature, wildlife, black &amp; white, and inspirational pictures from throughout the Central Valley (Atwater, Merced, Los Banos, Turlock &amp; Modesto) of California. Some of my favorite locations would have to be Yosemite, Sequoia, Kings Canyon, the Merced NWR in Merced, San Luis NWR near Los Banos, and Yosemite Lake right here in Merced. For taking pictures of the songbirds or Hummingbirds, my own backyard here in Atwater!</p>
    <div itemscope itemtype="http://schema.org/ImageGallery" class="showcase">
        <h2 itemprop="name">Yosemite</h2>
        <a itemprop="url" href="/Yosemite/"><img src="http://www.imagesinthebackcountry.com/images/showcase/yosemite.jpg" alt="Yosemite Gallery" title="Yosemite Gallery" /></a>
        <p itemprop="description">My Yosemite gallery contains.photos of Yosemite Valley locations like Half Dome, El Capitan, and Bridalveil Falls. I also have photos from Glacier Point and locations from Tuolumne Meadows and Tioga Pass with high-country icons like Mammoth Peak, Mount Dana and Lembert Dome.</p>
    </div>

...

</div>

Hikin' Mike · October 25, 2013

hp_girl wrote: »

Thanks Hikin' Mike! Using DIV instead of HTML worked!

Glad it worked!

HTML and CSS Customizations for New SmugMug

Comments