Re-used CSS names

cambler

I'm trying to get rid of the header text and links that show up inside of categories and galleries.

I accomplished this for one of the headers by adding a CSS override for .headmd to set the font-size to 0px.

The problem is that the other header, the one that has "account's home" as well as the breadcrumb navigation (account's home > Gallery) is styles with .headlg, but that CSS name is also used for the gallery names as well.

So if I set the font size to 0px to turn off the header and breadcrumbs, I'm also turning off the title of the gallery.

I've always found it to be good design methodology to never re-use CSS style names for just this reason.

Any way around this problem?

In essence, I woulnd't mind it so much if the "account's home" text were customizable. I find the posessive and "home" to be less than professional.

Guidance?

{JT}

I am working on some newer templates that will help with situations like this. The breadcrumb will be wrapped in an div that has an ID tag - so you can reach it by using something like: breadcrumb.headlg {font-size: 0px;} But for now, there is no easy way to do what you want.

cambler wrote:

I'm trying to get rid of the header text and links that show up inside of categories and galleries.

I accomplished this for one of the headers by adding a CSS override for .headmd to set the font-size to 0px.

The problem is that the other header, the one that has "account's home" as well as the breadcrumb navigation (account's home > Gallery) is styles with .headlg, but that CSS name is also used for the gallery names as well.

So if I set the font size to 0px to turn off the header and breadcrumbs, I'm also turning off the title of the gallery.

I've always found it to be good design methodology to never re-use CSS style names for just this reason.

Any way around this problem?

In essence, I woulnd't mind it so much if the "account's home" text were customizable. I find the posessive and "home" to be less than professional.

Guidance?

cambler

{JT} wrote:

I am working on some newer templates that will help with situations like this. The breadcrumb will be wrapped in an div that has an ID tag - so you can reach it by using something like: breadcrumb.headlg {font-size: 0px;} But for now, there is no easy way to do what you want.

That rocks.

Of course, what would be even better would be if all of the pages were replacement templates. That is, the breadcrumb showing up in the template as, for example, %%BREADCRUMB%% or some other tag, allowing customization of the div tag directly as well as the expected CSS names.

But that would be a huge feature on your part, so I'm not asking for it as much as waxing poetic on how cool it would be if all functional elements could be placed inside of custom HTML like that. :-)

winnjewett

To get rid of the line that says, "username's home >blah blah", put this code into the javascript section, and make sure that it runs onLoad:

		var atags = document.getElementsByTagName("a");
 		for(var i = 0; i < atags.length; i++) {
 			var tag = atags[i];
 			if (tag.href == "http://" + location.host + "/")
 		    	tag.parentNode.parentNode.style.visibility = "hidden";
 		}

-w

winnjewett

Here's an even better one:

 		var atags = document.getElementsByTagName("a");
 		for(var i = 0; i < atags.length; i++) {
 			var tag = atags[i];
 			if (tag.href == "http://" + location.host + "/"){
 		    	//tag.parentNode.parentNode.style.visibility = "hidden";
 				tag.innerHTML = "Home";
 				tag.href = "http://brilliantphoton.com/"
 			}
 		}

This code allows you to customize both the text that is displayed instead of "username's home", and the url that it points to. This is especially valuable for those of you that host your own home page for whatever reason.

-w

cambler

Alas, I spoke too soon - this seems to do nothing for me. No change.

On the home page, the "cheerphoto's home" isn't an "a" tag - it's a strong tag of class "offblue" inside of a TD tag of class headlg.

On a gallery page, it is an A tag, but the href is simply "/" and not the base location. This, inside of a strong tag of class "offblue"

lenscape

Hi W

winnjewett wrote:

Here's an even better one:

   		var atags = document.getElementsByTagName("a");
   		for(var i = 0; i < atags.length; i++) {
   			var tag = atags[i];
   			if (tag.href == "http://" + location.host + "/"){
 		 	//tag.parentNode.parentNode.style.visibility = "hidden";
   				tag.innerHTML = "Home";
 				tag.href = "http://brilliantphoton.com/"
   			}
   		}

This code allows you to customize both the text that is displayed instead of "username's home", and the url that it points to. This is especially valuable for those of you that host your own home page for whatever reason.

-w

I just put the code to the JavaScript section but it's not doing anything.
Can you please tell me how exactly and where I put this code to remove or change it to home from lenscapephoto's home.

clap

winnjewett

lenscape wrote:

I just put the code to the JavaScript section but it's not doing anything.
Can you please tell me how exactly and where I put this code to remove or change it to home from lenscapephoto's home.

<img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" >clap

Sorry, I should have been clearer.

Put this in the body field:

 <body onload="changeHeader(); return true;">

Put this in javascript field:

function changeHeader(){
	var atags = document.getElementsByTagName("a");
	for(var i = 0; i < atags.length; i++) {
		var tag = atags[i];
		if (tag.href == "http://" + location.host + "/"){
			//tag.parentNode.parentNode.style.visibility = "hidden";
			tag.innerHTML = "Home";
			tag.href = "http://brilliantphoton.com/"
		}
	}
}

If you want to simply remove the header, remove the two // marks before tag.parentNode

HTH,
-w
}

lenscape

winnjewett wrote:

Sorry, I should have been clearer.

Put this in the body field:

   <body onload="changeHeader(); return true;">

Put this in javascript field:

  function changeHeader(){
  	var atags = document.getElementsByTagName("a");
  	for(var i = 0; i < atags.length; i++) {
  		var tag = atags[i];
  		if (tag.href == "http://" + location.host + "/"){
 			//tag.parentNode.parentNode.style.visibility = "hidden";
  			tag.innerHTML = "Home";
  			tag.href = "http://brilliantphoton.com/"
  		}
  	}
  }

If you want to simply remove the header, remove the two // marks before tag.parentNode

HTH,
-w
}

It works but take out my home button at the top of my page.<img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" >

winnjewett

try adding

 return false;

after the line that starts tag.href

I think this should do the trick for you.

-w

lenscape

winnjewett wrote:

try adding

   return false;

after the line that starts tag.href

I think this should do the trick for you.

-w

No. Still same, but it works fine with the http://lenscapephoto.smugmug.com
won’t work with http://photos.lenscapephotography.com.

devbobo

try this code (needs to be added to the Footer HTML section)...
<script for="window" event="onload">
try
{
var sName = "lenscapephoto"; // CHANGE ME to your display name

var re1 = new RegExp(sName + "'s home<","g");
document.body.innerHTML=document.body.innerHTML.replace(re1, "Home<");

var re2 = new RegExp(sName + "'s[ ]+[^\f\n\r\t\v]+home","g");
document.body.innerHTML=document.body.innerHTML.replace(re2, "Home");
} catch(e) {}
</script>

Cheers,

David

lenscape

devbobo wrote:

try this code (needs to be added to the Footer HTML section)...
<script for="window" event="onload">
try
{
var sName = "lenscapephoto"; // CHANGE ME to your display name

var re1 = new RegExp(sName + "'s home<","g");
document.body.innerHTML=document.body.innerHTML.replace(re1, "Home<");

var re2 = new RegExp(sName + "'s[ ]+[^\f\n\r\t\v]+home","g");
document.body.innerHTML=document.body.innerHTML.replace(re2, "Home");
} catch(e) {}
</script>

Cheers,

David

Hi David,
Thanks for the code. Should I put the entire to the footer section?

devbobo

lenscape wrote:

Hi David,
Thanks for the code. Should I put the entire to the footer section?

yes

lenscape

devbobo wrote:

yes

Doesn’t work.

winnjewett

lenscape wrote:

Doesn’t work.

This stupid forum software puts spaces in odd places. You will have to go into the code and remove the space between re and place. It's one word, adn I'm sure that devbobo wrote it as such.

Devbobo, try putting code tags around your code next time. It seems to help, but not fix most of those kinds of problems.
-w

winnjewett

lenscape wrote:

No. Still same, but it works fine with the http://lenscapephoto.smugmug.com
won’t work with http://photos.lenscapephotography.com. <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

One problem with photos.lenscapephotography.com is that you have two <body> tags. I'd fix that problem before trying to debug javascript.

-w

cambler

winnjewett wrote:

try adding

  return false;

after the line that starts tag.href

I think this should do the trick for you.

-w

No, that's just going to kill the function after the first anchor tag is changed. In my case, it changes a graphic I have put in the upper-left corner that is anchored to the root of my site.

What would make scripts like this work better would be if SmugMug had a unique ID for each tag or division.

That, like avoiding re-using CSS names, is also good HTML :-)

{JT}

As I stated in my first reply to this, IDs are coming for the new templates, and will be everywhere ...

cambler wrote:

What would make scripts like this work better would be if SmugMug had a unique ID for each tag or division.

cambler

{JT} wrote:

As I stated in my first reply to this, IDs are coming for the new templates, and will be everywhere ...

You're right, I'd forgotten. My apologies.