HTML being changed, links now broken...

rich56k · August 22, 2013

On one of the sites I set up for a friend and am now trying to convert from legacy to new SmugMug I'm having some issues with links when I move to the new version...

HTML from footer in legacy version:

<div align="center">
<h4>All Content © 1977-2013: Site name deleted -
All Rights Reserved</h4><h4.5>Site Design & Images © 2008-2013: <a href="http://www.hooliganunderground.com"target="_new">HooliganUnderground.com</a></h4.5>
</div>

If I cut and paste this directly into new SmugMug footer html, save and publish - the HooliganUnderground.com link doesn't work, then if I go back into the html it has been changed to: :wow

<div style="text-align: center;;">
<h4>All Content © 1977-2013: Site name deleted -
All Rights Reserved</h4><h4>Site Design & Images © 2008-2013: HooliganUnderground.com</h4>
</div>

Any thoughts/suggestions? :help

Links in the gallery descriptions still seem to work...

Thanks,
rich56k

thenickdude · August 22, 2013

There is no such tag as h4.5, which won't be helping out SmugMug's HTML parser. The other bug you're running into is that SmugMug's HTML parser strips out links if they occur inside virtually any other tag, so since your is inside an

, it is removed. One tag you can contain links inside is , so you could replace that with , although you'll probably want to add style afterwards to change the font size.

The Mechanic · August 22, 2013

Hi Rich56k,

Are you adding this to a text or html block in the New SmugMug. You will need to add this to an HTML Block added to the Footer Area for the Entire Site.

Please post a link to this site if you need more help with how this is displaying once in place.

-Scott

The Mechanic · August 22, 2013

Hi Lamah,

Good catch on the I did not even see that in there. That is likely the root of your issue.

-Scott

rich56k · August 22, 2013

Lamah wrote: »

There is no such tag as h4.5, which won't be helping out SmugMug's HTML parser. The other bug you're running into is that SmugMug's HTML parser strips out links if they occur inside virtually any other tag, so since your <a> is inside an <h4>, it is removed. One tag you *can* contain links inside is <div>, so you could replace that <h4.5> with <div>, although you'll probably want to add style afterwards to change the font size.

Lamah,

You were right on the money!

Not sure why I used <h4.5>, as it was about 5 years ago when I did that, I believe I had thought it would make the text slightly smaller then the <h4> line above it (!!??). Now that I applied your solution it actually looks better (and I've not added any thing even the <div> </div>).

here's what is in the HTML block now:

<div style="text-align: center">
<h4>All Content © 1977-2013: American Turbo Power -
All Rights Reserved</h4>Site Design & Images © 2008-2013: <a href="http://www.hooliganunderground.com" target="_new">Hooligan Underground</a>
</div><br />

Note: I added <br> at the end to raise it up a bit otherwise it was directly over the 'Photo Sharing by Smugmug' in the footer...yet when I checked the html after 'publishing it changed that to: <br />

However, as shown in the attached image it's working - including the link.

Only other tweek I would hope for is to underline the Hooligan Underground so it 'looks' like a clickable link (it did that already in the legacy version)...in fact the new smug gallery links (when placed in the gallery description) need the same tweek if there's any feedback on that would be greatly appreciated

Thanks again Lamah! <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif" border="0" alt="" >

Rich

The resulting progression from top line thru to the smugmug footer getting smaller text with each line is exactly my intended

thenickdude · August 22, 2013

The Mechanic wrote: »

Hi Lamah,

Good catch on the <h4.5> I did not even see that in there. That is likely the root of your issue.

-Scott

Nope, it's the fact that SmugMug's broken HTML parser doesn't allow <a> tags to be contained inside <h4> tags. Try adding this as an HTML block on your page:

<h4>Testing <a href="http://www.smugmug.com/">this out!</a></h4>

SmugMug immediately changes the code to:

<h4>Testing this out!</h4>

The root cause seems to be that SmugMug's HTML-tidier thinks that <a> elements are block-level elements, so it decides that they cannot be contained inside tags that only allow phrasing content. This also causes <a> elements to break out of their containing paragraphs.

If you could get the product team's attention on that, I could stop having to use <div> instead of <p> tags to include links inside paragraphs.

rich56k · August 22, 2013

The Mechanic wrote: »

Hi Rich56k,

Are you adding this to a text or html block in the New SmugMug. You will need to add this to an HTML Block added to the Footer Area for the Entire Site.

Please post a link to this site if you need more help with how this is displaying once in place.

-Scott

Hi Scott,

Thanks for the suggestion, yes I did use the 'entire site' HTML block for this so that's OK.

For what it's worth the site is:
http://atp-hd.com

Note that it's still in legacy mode as both our unveilings will be contingent on the (hopefully) available PayPal / self-fulfillment JS option it seems that Smug is looking at/working on...

Rich

To have both you and Lamah reply is a real treat as both of you have been leading the way with excellent information and help here at Dgrin for the new sites, thanks again

Foot in mouth...I missed the fact you're a support hero, however, you still came to my aid and I'm appreciative for what you're doing here - especially the smugocity site!

thenickdude · August 22, 2013

will be contingent on the (hopefully) available PayPal / self-fulfillment JS option it seems that Smug is looking at/working on...

Have you really seen anyone from SmugMug suggesting that PayPal self-fulfillment will be coming? Because their plans for custom JavaScript seem to be so far in the future that they don't yet have a clear idea of what JavaScript features will be available or who will be able to use them.

snakeey11 · August 22, 2013

The issue with tags that Lamah refers to should be fixed soon.

-Mike

thenickdude · August 22, 2013

snakeey11 wrote: »

The issue with <a> tags that Lamah refers to should be fixed soon.

-Mike

Great, thanks!

rich56k · August 23, 2013

Lamah wrote: »

Have you really seen anyone from SmugMug suggesting that PayPal self-fulfillment will be coming? Because their plans for custom JavaScript seem to be so far in the future that they don't yet have a clear idea of what JavaScript features will be available or who will be able to use them.

It's not a case of yes it coming and will be here on Sept 4 @ 4pm...however, it's a lot of replies from Baldy about JS in general, and referring specifically to the PayPal scenario (after all they DO have it at Zenfolio right now)...enough that I'm not jumping ship until more is revealed, I try to stay upbeat about things here as I've been a customer since '05 and for the most part things go pretty well...

PayPal feature request:
http://dgrin.com/showthread.php?t=237470
and from that thread:
http://dgrin.com/showpost.php?p=1890272&postcount=13

Smug Update from Baldy:
http://dgrin.com/showpost.php?p=1891967&postcount=334

same thread:
http://dgrin.com/showpost.php?p=1900728&postcount=474

Sorry it took so long, I scanned thru the entire 500+ posts in the 'Update' thread, I'm sure there are more in other threads but these were the most direct I recall...if it was totally out of the question I don't see these replies being made ...

Rich

In one post he says JS will prob. only be available on custom domains - my personal outlook on that is the JS (Adsense, PayPal, etc) being more business oriented then just photo sharing per se is that many already do or wouldn't mind using a custom domain as it appears more business like and professional, just my .02

snakeey11 · August 23, 2013

Lamah wrote: »

Great, thanks!

I pushed a fix for this last night, please let me know if you are still seeing issues.

Mike

rich56k · August 23, 2013

Fixed here, just one question...

snakeey11 wrote: »

I pushed a fix for this last night, please let me know if you are still seeing issues.

Mike

In my case it's now working, and my testing of variants raises just one question...

I've added the <h#>, </h#> back inside the <a>, </a> tags to affect the font size of the second line of text in my footer.

The only thing is (see attached) my top line of text is <h4> in each example; of the 3 screen shots shown the top example is 1st line: <h4>, 2nd line: <h4>; the middle example is, 1st line: <h4>, 2nd line <h5>; and the bottom example is, 1st line <h4>, 2nd line: <h6>.

Why is the middle example showing the 2nd line as all caps??

Thanks again for getting this fixed!

rich56k

Hikin' Mike · August 23, 2013

rich56k wrote: »

In my case it's now working, and my testing of variants raises just one question...

I've added the <h#>, </h#> back inside the <a>, </a> tags to affect the font size of the second line of text in my footer.

The only thing is (see attached) my top line of text is <h4> in each example; of the 3 screen shots shown the top example is 1st line: <h4>, 2nd line: <h4>; the middle example is, 1st line: <h4>, 2nd line <h5>; and the bottom example is, 1st line <h4>, 2nd line: <h6>.

Why is the middle example showing the 2nd line as all caps??

Thanks again for getting this fixed!

rich56k

Maybe your <h5> includes 'text-transform:uppercase;'. Try adding this:

.sm-user-ui h5 {
    text-transform:normal;
    }

rich56k · August 23, 2013

Hikin' Mike wrote: »
Maybe your <h5> includes 'text-transform:uppercase;'. Try adding this:
.sm-user-ui h5 {
    text-transform:normal;
    }

Thanks Mike,

I appreciate the suggestion, I added the css, but to no avail...

Not sure if the "<h5> includes 'text-transform:uppercase" would mean I added additional code or not, but I didn't, all I did was change the<h4>'s to <h5>'s.

On a semi-related note, a bigger concern for me (and possibly for others) is that the clickable link doesn't appear as a clickable link; re: the same exact code in the legacy version of the same site shows the link underlined at all times; the 'new smug' version no underline or even nothing when hovered over...what would have caused the underline in legacy not to show in new smug?

Even in gallery descriptions the links offer no clue ...hmmm...could this be a bug or by design?

Here's link to legacy version: http://atp-hd.com

For what it's worth in legacy version the smug footer isn't underlined until you hover over it...

EDIT: In new smug the smugmug footer link does nothing when hovered/clicked...the plot thickens!!

brandofamily · August 23, 2013

rich56k wrote: »

On a semi-related note, a bigger concern for me (and possibly for others) is that the clickable link doesn't appear as a clickable link; re: the same exact code in the legacy version of the same site shows the link underlined at all times; the 'new smug' version no underline or even nothing when hovered over...what would have caused the underline in legacy not to show in new smug?

I had to add code to get the underline on a links. Why? It NEVER worked like that before... buggie code... so sick of buggie code...

rich56k · August 23, 2013

brandofamily wrote: »

I had to add code to get the underline on a links. Why? It NEVER worked like that before... buggie code... so sick of buggie code...

WOW... it looks/works great on your main site!

Hovering over causes both underline AND color change

Even more amazing is that you've added it to the smugmug portion also, send them a bill!

So any chance you'd be willing to post the code you pioneered?

Re: buggy code - you and me both

Hikin' Mike · August 23, 2013

rich56k wrote: »

Thanks Mike,

I appreciate the suggestion, I added the css, but to no avail...

Not sure if the "<h5> includes 'text-transform:uppercase" would mean I added additional code or not, but I didn't, all I did was change the<h4>'s to <h5>'s.

Looks like you're still using the Legacy site, so I can't see what's happening with your <h5> tag. I'm going to guess that your theme adds the uppercase or small-caps to only your <h5> tag.

rich56k · August 23, 2013

Hikin' Mike wrote: »

Looks like you're still using the Legacy site, so I can't see what's happening with your <h5> tag. I'm going to guess that your theme adds the uppercase or small-caps to only your <h5> tag.

Yes it's still legacy until (hopefully) PayPal integration so additional features can be built in...same with my site. <img src="https://us.v-cdn.net/6029383/emoji/rolleyes1.gif" border="0" alt="" >

That theme scenario could very well be it, thanks again Mike

aschendel · August 24, 2013

The Themes SM provided each contain CSS which affects all sorts of things that you do like, so calling one or two of their Theme specific elements (h5 being uppercased and links (anchors) not being "different enough") not being exactly to your liking "buggy" does seem a little superfluous. Like many of the other Theme things that you decided to alter, you can adjust these with CSS to better suit your tastes. I have some of these in my Theme's Advanced CSS:

h5 {
  text-transform: none !important;
}

A {
  text-decoration:underline;
}

A:link    {
}    

A:visited    {    
}    
        
A:active    {    
}    
        
A:hover    {    
  color: #34af38 !important;
}

Andy

rich56k · August 24, 2013

aschendel wrote: »
The Themes SM provided each contain CSS which affects all sorts of things that you do like, so calling one or two of their Theme specific elements (h5 being uppercased and links (anchors) not being "different enough") not being exactly to your liking "buggy" does seem a little superfluous. Like many of the other Theme things that you decided to alter, you can adjust these with CSS to better suit your tastes. I have some of these in my Theme's Advanced CSS:
h5 {
  text-transform: none !important;
}

A {
  text-decoration:underline;
}

A:link    {
}    

A:visited    {    
}    
        
A:active    {    
}    
        
A:hover    {    
  color: #34af38 !important;
}
Andy

Andy,

Call it superfluous I certainly won't argue...

It's just me from my NON-coder perspective ... I can cut and paste code and logically make some alterations noting the results, which I always do before requesting help from you and the other fine folks here on Dgrin that have the knowledge and ability to sort things out for the rest of us.

I added your code (thank you !) and it had mixed results: the <h5> didn't change - I'm at this point figuring I'll just stick with <h4>'s on both lines as it's uniform and not a deal breaker. Again this was code copied straight from the legacy site that worked fine (both link underline AND <h5>) so I did nothing to alter <h5> other than move it into the new smug version.

On the other hand the links do change colors (to green with your current code) but no underline. This is only on the home page, for a different reason... see below

At this point I'll again offer my thanks !

Please don't take this personal ... I really appreciate the help you're offering.

Now I will call this new/strange/frustrating behavior and it's documented in other threads here in the last 30 hours or so... when I tried to add your css site/theme wide - I encounter the attached scenario...the ONLY place I was able to click the 'wrench' in theme mode to add 'custon css in the advanced area was my home page...see entire site (upper portion of screenshot) it shows the theme to be "sierra" yet the top of page shows" copy of copy of .....,...sierra. However when I click on that 'wrench' to access the custom csss advanced area NOTHING happens!!!

The same exact thing for ALL my galleries AND folders...

That said - at this point I'm just incredibly frustrated with this and damn glad I didn't unveil yet - at this rate if it takes days, weeks , months I'm OK as the last (and most unprofessional) scenario for me would be to deal with all these issues while my site was live -

I don't exactly know what or how it happened but some one at smugmugs end changed the internal format and each time you previewed/published changes they didn't show and had to go back and redo the whole thing - now it's back to where I started but copy of, copy of, copy of...these I believe indicate how many times I was stuck in an endless loop of [insert descriptive word/phrase]

So whatever you would call it...obviously this was done by me - however, I had been doing a LOT of 'playing' in the sandbox since day one and nothing like this ever happened, until yesterday and my style of 'playing' hadn't changed one bit...

I know myself well enough to realize when things start going in this direction - I just need to step away and return with a fresh set of eyes and perspective.

Lastly I apologize for dumpimg this all in reply to your help I do appreciate it

rich56k

Note for any support heros here's the site in question:
http://atp-hd.com

as it's not unveiled it will only be viewable to you

brandofamily · August 24, 2013

rich56k wrote: »

WOW... it looks/works great on your main site! <img src="https://us.v-cdn.net/6029383/emoji/bowdown.gif" border="0" alt="" >

Hovering over causes both underline AND color change <img src="https://us.v-cdn.net/6029383/emoji/wings.gif" border="0" alt="" >

Even more amazing is that you've added it to the smugmug portion also, send them a bill!

So any chance you'd be willing to post the code you pioneered?

Re: buggy code - you and me both

This makes the smooth transition from states on all "a" links

/*Adds Hover Transition Effect to Nav Bar*/
a { 
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}

Here is my footer code... my secret... I hid the SM footer and made my own long ago on legacy...
I left the Smugmug label on the other sites as they are non-profit groups and SM provides free hosting for life to them. Now they offer only a reduced rate... at least they used to, I'm not sure any more. I left it on mine so I have a login link and if viewers link thru my site to SM and sign up I get the referral (my code is built into the link

)

I put an html box in my footer area on my site...

In the html box

<div style="text-align: center; color:#e3cfb5;">
  Photo Hosting by <a href="http://www.smugmug.com/?referrer=8jDMwxj6yp4f2">Smugmug</a> • All Images © Anthony Brandolino - Brandolino Imaging • <a href="http://www.brandolinoimaging.com/Info-Pages/All-Rights-Reserved/n-STVHb">All Rights Reserved</a>
</div>


In the CSS box

a:link {
  text-decoration: underline;
}

a:hover {
  color: #8f7b62;
  text-decoration: none;
}

This removes the SM footer. You have to convert to the smaller version 1st.

/*Removing SM Footer*/
.sm-page-powered-by A
{
  display: none;
}

aschendel · August 25, 2013

rich56k, my link underlining CSS had a mistake in it, see below.

I should apologize if you heard me suggesting that the new SM isn't buggy in general, I personally haven't seen that it is but clearly many people have had specific and significant issues. I've also been playing a lot since day one of the rollout without issue, IE9, IE10, FF, and Chrome on various versions of Windows have all worked very well. The only ones that affected me (mildly) were the comments being stripped from CSS blocks (other than the Theme's) and the nesting anchors (links) in paragraphs. I incorrectly interpreted your comment about it being buggy directly with respect to the 2 items you had listed, the H5's and the underlined links, both of which are style/theme/preference issues rather than bugs.

I use Sierra (although I have 6 or so other designs also saved as I've worked on other people's questions), and adding CSS **similar** to what I had posted (corrected below), to the Theme | Advanced CSS area, immediately affected / corrected both of the items you were wanting to change. The !important tags appear to be required or the rules didn't have any affect.

I am sorry that in the CSS posted earlier didn't work. I thought I tested/confirmed it but I just redid it to pull a screenshot and noticed it didn't! Sorry!! I also added the underline rule to the Hover selector, but feel free to customize each of these sections as needed.

h5
{
  text-transform: none !important;
}
 
A 
{
 /* color:#FFF !important; */
  text-decoration:underline !important;
}

A:link {
} 
 
A:visited { 
} 
  
A:active { 
} 
  
A:hover { 
 /* background-color: #69b4ff;*/
  color: #34af38 !important;
  text-decoration:underline !important;
}

Andy

HTML being changed, links now broken...

Comments

, it is removed. One tag you *can* contain links inside is , so you could replace that with , although you'll probably want to add style afterwards to change the font size.

, it is removed. One tag you can contain links inside is , so you could replace that with , although you'll probably want to add style afterwards to change the font size.