Various problems converting Legacy to New design

mrhoni

There are several items I could use some help with. I'm trying to get my new customization to be similar to my current Legacy design. During the past year, I've added custom CSS/HTML from help in this forum and that is in my current Legacy design.

My new design is based upon the Sopie theme.

When designing the site, how can I see the new design as not being logged on?

If the below can be fixed then I can look for more subtle problems. Thanks

Homepage:
- My logo is off to the left. I don't see a choice to center it or adjust its position, such as it might be ok on the left but I might want to push it down from the top and then some towards the right.
- The dropdowns on the menu has "(Private) around items and subitems. These are pages I have in Unlisted galleries. I want to get rid of "(Private)".
- I want the footer to center. If I change the margin, then when the web page is resized the footer does not move along with the size and the footer and the "Photo sharing by Smugmug" are on the same line and when I moved the margin for the footer text it overlapped the Smumug text.
- There is a flashing between the fade out/fade in from one photo to the next in the slideshow
- In the social icons section. I added a custom URL to get to Mailchimp for signups. I have an icon I used on my Legacy site and can't tell how to overlay the icon that was used by default, which looks like a piece of chain.
- The menu has 2 items, Client login and Contact. When I click these, I get a page with Unknown Server. These 2 are probably tied to custom code I got from this forum, so don't know how to get these working again.

About page
- This is a an unlisted gallery, so this menu item displays About MrHoni (Private), which I want to get rid of the "(Private)"
- The gallery description has HTML to control the page, which is how the Legacy was setup. On the Legacy, the HTML is doing what I want, such as color, font, size, line breaks, but in the new design, the HTML is not doing these things, except for color. Could there be a disconnect between using default text style at the Site settings?

Investment and Product pages
- The background I am using zooms in much more than the galleries from my Portfolio AND it becomes pixilated.
- In my Legacy I was using the Old Journal for Gallery style and the page was controlled by all HTML within the gallery description. Now the HTML is not laying out the text as expected, the Photos are really large
- If I muck with the Gallery style, then the Legacy site gets messed up and no longer uses style Journal Old

Allen

Anything set to Private means only can see logged in. What you want is "Unlisted".

You probably used the gallery description on the legacy journal (old) style.
For NewSmug I'd suggest adding a page to the top level.
Add a html box to the new page and paste what you had in the legacy description. Leave off
the html tags. Might have to readjust some things. The html box has its own CSS tab.

mrhoni

Correction - On my Investment page, each photo's caption field is where I had put the HTML to control the text style, size, etc. The Products and FAQ pages have all HTML in the Gallery Description. All 3 use Journal Old for the gallery style .
All 3 have (Private) on the menu item drop down.
All 3 have the background image zoomed in.
Investment page has the photos displaying extra large, while the Products and FAQ pages have photos displaying smaller

mrhoni

Allen, gallery settings when viewing in the Legacy and New view shows as Unlisted, while the Menu shows (Private). Maybe it is the Category this galleries are in. Its called Private Galleries and somewhere I found, but can't find now, how to edit the category. I think when I played with changing the category from Private to Unlisted, something went wrong on my Legacy site. This is what I think I saw but can't remember exact details.

mrhoni

I figured out where to change the folder Private Galleries to Unlisted, but now on the menu displays About MrHoni (Unlisted)

mrhoni

Maybe I just need to go direct to Smugmug support to sort this mess out?

denisegoldberg

mrhoni wrote: »

I figured out where to change the folder Private Galleries to Unlisted, but now on the menu displays About MrHoni (Unlisted)

The (Unlisted) will only show for you when you are logged in.

--- Denise

mrhoni

I don't see the ability to view the new Website as not logged on to get a better visual of each page. Does this not exist?

thenickdude

mrhoni wrote: »

I don't see the ability to view the new Website as not logged on to get a better visual of each page. Does this not exist?

Nope, that doesn't exist. After unveiling, you can view your site in your browser's Incognito Mode to see what a logged-out user would see (since going into Incognito Mode gives you a logged out session).

ChancyRat

I'm not sure where you are now in terms of having sorted things out. If you will post one question to sort out first, maybe I can help.

Regarding, can you see what the public sees, are you still modifying your new site, but you have not unveiled? You can work in both legacy and new site modes? (That's where I am, so I know more about that than I would if you have unveiled, which would mean switched to the new version with no way to go back to legacy.)

mrhoni

I have figured out most of my issues. Got some help direct from Smugmug support.

First thing I need help on is my Client Login. I got the code from this forum and it is in the Bottom Javascript. I thought I would create a new page for Client Login and then drop the code in HTML or CSS, but I don't think that is where it would go.

Here is the code that I found in my Bottom Javascript from Legacy advanced customization


///////////////////// Client Login Start ///////////////////////
function addCategoryTitleToBreadcrumb(description)
{
var breadCrumb = YD.get("breadcrumb");
if (breadCrumb)
{
var divTag = document.createElement("div");
divTag.className = "categoryDescription";
divTag.innerHTML = description;
breadCrumb.parentNode.insertBefore(divTag, breadCrumb.nextSibling);
}
}

function addCategoryTitleToThumbs(descriptionObject, boxObjectName)
{
var re = /\>([^\<]+)<\/a>/i; // pattern to find the category name between the <a> and </a> tags
var divTag = YD.get(boxObjectName);
if (divTag)
{
var divTags = YD.getElementsByClassName("albumTitle", "p", divTag);
for (var i = 0; i < divTags.length; i++)
{
var matches = re.exec(divTags.innerHTML); // get just the category name
if (matches && (matches.length > 1))
{
var nameWithUnderscores = matches[1].replace(/ |&/g, "_"); // replace spaces with underscores
// if we have this object in our array, then proceed
if (descriptionObject[nameWithUnderscores] != undefined)
{
var pTag = document.createElement("p");
pTag.className = "categoryDescription";
pTag.innerHTML = descriptionObject[nameWithUnderscores];
divTags.parentNode.insertBefore(pTag, divTags.nextSibling);
}
}
}
}
}




function addCategoryDescription(titleOnly)
{
var categoryDescription = {
"Clients" : "Please click Client Login above or <a href='/' onclick='return false;' class='customContactButton'>Contact Me</a> directly for your Gallery Name"
};

var re, matches, i; // various local variables

// now fix it so that it works automatically even if the category or sub-category name has spaces in it
// we replace those spaces with underscores (which is what the classname does) and add those to our object so we can match those too
for (i in categoryDescription)
{
var newName = i.replace(/ |&/g, "_");
categoryDescription[newName] = categoryDescription; // add a property to the object that has only underscores in the name
}
// on the homepage, we want to check for category names and add a description if a match found
// on a category page, we want to check to see if the category that the page is needs a description under the breadcrumb
// and, we need to see if any of the sub-category items on the page need us to add a description under the name
// on a sub-category page, we want to check to see if the sub-category that the page is needs a description under the breadcrumb
if (YD.hasClass(document.body, "category"))
{
// fetch the category name
re = /category_(\S+)/i;
matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
var categoryName = matches[1];
// now see if we have a subcategory too
if (YD.hasClass(document.body, "subcategory"))
{
re = /subcategory_(\S+)/i;
matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
var subcatName = matches[1];
// category and subcategory so we are on a subcategory page showing a list of galleries in this subcategory
// we need to just add a subcategory title to this page if the category-subcategory matches
var fullName = categoryName + "." + subcatName;
if (categoryDescription[fullName])
{
addCategoryTitleToBreadcrumb(categoryDescription[fullName]);
}
}
}
// here we're on a category page
// we need to add a category description for the category page
// and potentially add subcategory descriptions to the subcategory names displayed on this page
else
{
if (categoryDescription[categoryName])
{
addCategoryTitleToBreadcrumb(categoryDescription[categoryName]);
}
if (!titleOnly)
{
// now we need to build a temporary subcategoryDescription object that has only the subcategory names in it that are in this category
var subcatDescriptions = {};
re = new RegExp("^" + categoryName + "\\.(.+)$", "i");
for (i in categoryDescription)
{
matches = re.exec(i);
if (matches && (matches.length > 1))
{
subcatDescriptions[matches[1]] = categoryDescription;
}
}
addCategoryTitleToThumbs(subcatDescriptions, "subcategoriesBox");
}
}
}
}

// then see if we're on the homepage
if (!titleOnly && YD.hasClass(document.body, "homepage"))
{
addCategoryTitleToThumbs(categoryDescription, "categoriesBox");
}
}

function addCategoryDescriptionBoth()
{
addCategoryDescription(false);
}

YE.onDOMReady(addCategoryDescriptionBoth);


function TagThumbs()
{
// get current category and subcategory
var info = GetCategoryInfo();

// get list of miniBox divs in the "this" object
var miniBoxList = YD.getElementsByClassName('miniBox', 'div', this);

// for each miniBox, get the category or sub-category name from the albumTitle div
for (var i = 0; i < miniBoxList.length; i++)
{
// get the albumTitle p tag
var titleTags = YD.getElementsByClassName("albumTitle", "p", miniBoxList);
if (titleTags && (titleTags.length > 0))
{
// get the link in the albumTitle
var linkTags = titleTags[0].getElementsByTagName('a');
if (linkTags && (linkTags.length > 0))
{
// grab the name of the category/subcategory from the thumb
var thumbName = linkTags[0].innerHTML;
thumbName = thumbName.replace(/\s+|\&[a-z]+;|[^_a-zA-Z0-9-]/g, "_"); // replace illegal CSS chars with underscore
var newClassName = "thumbnail_";
if (info.cat)
{
newClassName += info.cat + "_";
}
if (info.subcat)
{
newClassName += info.subcat + "_";
}
newClassName += thumbName;
YD.addClass(miniBoxList, newClassName);
}
}

// get the photo div in each miniBox
var photoTags = YD.getElementsByClassName("photo", "div", miniBoxList);
if (!photoTags || (photoTags.length == 0))
{
photoTags = YD.getElementsByClassName("photoLarge", "div", miniBoxList);
}
if (photoTags && (photoTags.length > 0))
{
// get the link in the photo tag
var photoLinkTags = photoTags[0].getElementsByTagName('a');
if (photoLinkTags && (photoLinkTags.length > 0))
{
// grab the URL of the gallery
var link = photoLinkTags[0].href;
// href should be "/gallery/5608799_ZJ27n"
var matches = link.match(/\/gallery\/(\d+)_/);
if (matches && (matches.length > 1))
{
YD.addClass(miniBoxList, "thumbnail_gallery_" + matches[1]);
}

}

}
}
}

YE.onContentReady('categoriesBox', TagThumbs);
YE.onContentReady('subcategoriesBox', TagThumbs);
YE.onContentReady('galleriesBox', TagThumbs);

//====End of TagThumbs====


//====GetCategoryInfo====
// Retrieves category and subcategory names from the body tag classes
// returns an object
function GetCategoryInfo()
{
var info = new Object;
info.cat = "";
info.subcat = "";

if (YD.hasClass(document.body, "category"))
{
var re = /category_(\S+)/i;
var matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
info.cat = matches[1];
}
if (YD.hasClass(document.body, "subcategory"))
{
re = /subcategory_(\S+)/i;
matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
info.subcat = matches[1];
}
}
}
return(info);
}



YE.onDOMReady(function(){clientLogin(Sizzle('a[href=/Clients]')[0],'Clients')});function clientLogin(trigger,category){var clDialog=new YAHOO.widget.Panel("clDialog",{width:"325px",fixedcenter:true,zIndex:100,constraintovikrport:true,underlay:"shadow",modal:true,close:true,visible:false,draggable:false,effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:.7}});clDialog.setHeader("<h1>Login</h1><p>Please enter your Gallery Name to continue.</p>");clDialog.setBody('<label>Gallery Name: </label><input id="clUsername" type="text" />');clDialog.setFooter('<input id="clLoginButton" type="button" value="submit" />');clDialog.render(document.body);YE.addListener(trigger,'click',function(e){YE.preventDefault(e);clDialog.show()});YE.addListener('clLoginButton','click',function(e){var value=YD.get('clUsername').value;if(value!=''){var url='/'+category+'/'+value;window.location.href=url}else{alert('Please enter your Gallery Name to continue')}})};



YE.onDOMReady(InitMyContactButton);

function InitMyContactButton()
{
InitMyContactButton.extraContactUsButtons = new Array;
var contacts = Sizzle(".customContactButton");
// look in Easy Customizer navbar too
var navEntries = Sizzle("#customNav li a");
for (var j = 0; j < navEntries.length; j++)
{
var str = navEntries[j].href;
if (str.search(/\/customcontact/i) != -1)
{
navEntries[j].onclick = function () {return false;};
contacts.push(navEntries[j]);
break;
}
}
var nick, o, matches;

// see if the nickname is already defined in the page
try {
nick = NickName || SM.hostConfig.nickname ; // get standard nickname
} catch (e) {}

// see if the nickname is in the URL
if (!nick)
{
try {
matches = window.location.host.match(/^(www.)?(.*)\.smugmug\.com$/i);
nick = matches[2];
} catch (e) {}
}

// see if we can get the nickname from one of the built-in contact links on the page
if (!nick)
{
// hack - NickName doesn't exist on some pages so we try to pull it from the password prompt or the standard footer
o = YD.get("contactUsButtonWrapper") || YD.get("contactUsButtonWrapperFooter");
matches = o.onmouseover.toString().match(/ownerNickName:\s*'([^']+)'/)
if (matches && matches.length > 1)
{
nick = matches[1];
}
}
for (var i = 0; i < contacts.length; i++)
{
InitMyContactButton.extraContactUsButtons.push(new SM.buttons.contactUs
(
contacts.parentNode,
contacts,
{
buttonText: 'Contact',
panelTitle: 'Contact the gallery owner',
currentPage: window.location.toString(),
currentPageOverride: '',
referringPage: '',
pro: '',
modal: 'true',
popupName: 'contactOwner',
uniqueID: 'myContactPanel' + InitMyContactButton.extraContactUsButtons.length,
ownerNickName: nick,
width: '755px',
albumID: '',
additionalParams: 'FooterContact'
}
));
}
}
///////////////////// Client Login End ///////////////////////

thenickdude

JavaScript is not supported in New SmugMug. One option for a client login system is the one from the customisation gallery in my signature.