How to add a Home Button

Duck · July 1, 2015

I have a folder with subfolders, each subfolder has many galleries. I want to add a "Home" button at the end of the photos in each gallery to help the mobile user navigate to a page I set up as a directory to the many galleries set up under the master folder.

When I tried adding a navigation bar at the end of the gallery and set up a link to the home button (that I renamed to the page name), it posted that navigation bar on all the galleries on my website - which I can't have.

Can anyone help?

Allen · July 1, 2015

Are you wanting this button only on one tree? The galleries below a select top folder?
This could probably be done with CSS.
Post a link to one of the galleries and we can help.

Basically would be done with some CSS similar to this.

The top folder will have a class name like this.
.sm-page-node-XXXXX

/* hides link widget everywhere */
.sm-page-widget-XXXXXXX {display:none}
/* shows only on galleries below top folder */
.sm-page-parentnode-XXXXX .sm-page-gallery .sm-page-widget-XXXXXXX {display:block}

Duck · July 1, 2015

Thanks Al -

Here is a gallery in one of the sub folders in the tree.
http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-Dave/15-TRYPO-NY-Departure-Dave/n-gLsgsg

15-TRYPO-New-York is the top folder which contains a page with links to other sub folders with galleries (56 in all).

Here is the page I want to link.
http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf

The password is TRYPO - if you need it

I haven't worked with CSS in a few years and am not sure where to put it.

Thanks,
Dave

Allen · July 2, 2015

Duck wrote: »

Thanks Al -

Here is a gallery in one of the sub folders in the tree.
http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-Dave/15-TRYPO-NY-Departure-Dave/n-gLsgsg

15-TRYPO-New-York is the top folder which contains a page with links to other sub folders with galleries (56 in all).

Here is the page I want to link.
http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf

The password is TRYPO - if you need it

I haven't worked with CSS in a few years and am not sure where to put it.

Thanks,
Dave

The top folder "15-TRYPO-NY-Index", what does it contain? Galleries? Sub-folders? Pages?
Simplest is apply button to all children whether Galleries, Sub-folders or Pages.
Will start with only galleries

This is the class name that would be used in CSS to apply to all children of the folder.
.sm-page-parentnode-PRJJR ....

The widget/HTML box "button" will have to be added to the entire site otherwise you'd have to add it
to every page (gallery) and you have a lot. The CSS will hide it everywhere except from this one tree.
Using the specific widget (button code) class name. CSS hides everywhere and adds to specific pages.
Once the HTML block is added the class name number of it will have to be retrieved to add in the CSS.

/* hides everywhere */
.sm-page-widget-XXXXXXX {display:none}
/* display only for galleries this tree */
.sm-page-parentnode-PRJJR .sm-page-gallery .sm-page-widget-XXXXXXX {display:block}

Does this all make sense?

Go to the 15-TRYPO-NY-Index page and go to CUSTOMIZE > Content and Design.
Highlight "entire site" in right flyout.
At the very bottom of the flyout click to expand HTML & CSS and drag both a HTML & CSS box to
the bottom of the page just above the footer.

Click the wrench on each box to open it and paste in code. Click DONE to save. When both boxes
are finished click DONE in the upper right corner and then PUBLISH NOW. As soon as you do this
post back here so we can retrieve the widget number and modify the CSS.

Add this in the HTML box.

<div id="TRYPOhomePage">
<a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf">TRYPO Photo Home Page</a>
</div>

CSS (Yellow XXXXXXX's will have to be change to widget number)
Add this to CSS box.

  /* hides TRYPO Photo Home Page LINK everywhere */
.sm-page-widget-[COLOR=Yellow]XXXXXXX[/COLOR] {display:none}

/* display only for galleries this tree */ 
.sm-page-parentnode-PRJJR .sm-page-gallery .sm-page-widget-[COLOR=Yellow]XXXXXXX[/COLOR]
   {display:block[COLOR="Yellow"] !important[/COLOR]}

Might need the yellow !important.

Duck · July 2, 2015

I am missing something. The button works and takes me to the Index Page, but it puts a button on every gallery on my site, not just the tree.

To answer your first question:
The top folder is http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/n-7hqZj4
It contains 4 sub folders and the Index Page.
The Index Page provides a list with links to every gallery under the 4 sub folders.

When I added the HTML box to the page, it had both HTML and CSS tabs inside it. I did not add a separate CSS place holder and duplicate the CSS code above.
How do I point to the top of the tree?

Dave

Allen · July 2, 2015

Duck wrote: »

I am missing something. The button works and takes me to the Index Page, but it puts a button on every gallery on my site, not just the tree.

To answer your first question:
The top folder is http://www.davegreb.com/Friends/TRYPO/15-TRYPO-New-York/n-7hqZj4
It contains 4 sub folders and the Index Page.
The Index Page provides a list with links to every gallery under the 4 sub folders.

When I added the HTML box to the page, it had both HTML and CSS tabs inside it. I did not add a separate CSS place holder and duplicate the CSS code above.
How do I point to the top of the tree?

Dave

I would add a separate "entire site" CSS box or put the CSS in an existing "entire site" CSS box.
CSS in the html box tab not always affects entire site only html inside the box.

This is the class name of the link html box. Did you change the XXXXXXX's to this number?
.sm-page-widget-11293980

/* hides TRYPO Photo Home Page LINK everywhere */
.sm-page-widget-[COLOR="Red"]11293980[/COLOR] {display:none}

/* display only for galleries this tree */ 
.sm-page-parentnode-PRJJR.sm-page-gallery .sm-page-widget-[COLOR="Red"]11293980[/COLOR] {display:block}

Edit: remove space between these. These two class names are both in the gallery body tag
therefore requires no space.
.sm-page-parentnode-PRJJR.sm-page-gallery

Duck · July 2, 2015

I deleted the previous HTML/CSS box on Entire Site and Created a new one with the code you suggested. Above that box I created a CSS only box on Entire Site with the same CSS code - and using the number you provided. (I had previously used 1234567).

Same result. The button shows up on every gallery, not just in the tree. Hmmmm

Allen · July 2, 2015

The new widget number is .sm-page-widget-11302375
Any new widget created will have a new number.

  /* hides TRYPO Photo Home Page LINK everywhere */ 
.sm-page-widget-[COLOR=Red]11302375[/COLOR]{display:none}
  /* display only for galleries this tree */  
.sm-page-parentnode-PRJJR.sm-page-gallery .sm-page-widget-[COLOR=Red]11302375[/COLOR]{display:block}

Duck · July 2, 2015

1. I then had one button on every gallery on my site, and two buttons on the galleries in the tree. I am using the 11301798 widget number.
2. I deleted both HTML and CSS blocks from the index page and ended up with one button on all galleries.
3. I went to the top folder and found a box with the CSS code in the top folder. I deleted that and all buttons went away.
4. I went to the index page and re-created both blocks, not putting CSS code in the HTML/CSS box but in the separate CSS block.
I am back to having the button at the end of every folder and gallery on the site (as I put the blocks below the Site Content block), not just in the tree. It is not hiding outside the tree.

Duck · July 2, 2015

Where are we defining the tree?

Duck · July 3, 2015

I need to go to sleep - and look forward to any other thoughts you have - Thanks a bunch!

Allen · July 3, 2015

I do not see the link? Did you remove it again? If you did this number 11302375 below in CSS will have
to changed to a new one when another HTML box is added.

Add the HTML box and I'll get the new number for the CSS.

HTML (This is already on your site or will be re-added soon I hope

)

<div id="TRYPOhomePage">
<a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf">TRYPO Photo Home Page</a>
</div>

CSS (change the current CSS to this)

  /* hides TRYPO Photo Home Page LINK everywhere */  
.sm-page-widget-[COLOR=Red]11302375[/COLOR]{display:none}
   /* display only for galleries this tree */   
.sm-page-parentnode-PRJJR.sm-page-gallery .sm-page-widget-[COLOR=Red]11302375[/COLOR]{display:block}

Duck · July 3, 2015

Okay, I saw this after I checked email and put them back on. I don't know where you are getting the new widget number, but I am using 11302375 and the button is on all folders and galleries, not just in the tree.

Duck · July 3, 2015

Here is what the Content and Design looks like.

Allen · July 3, 2015

Here is the new widget number. Change the number in the CSS to this.
sm-page-widget-11302574

Allen · July 3, 2015

Duck wrote: »

Okay, I saw this after I checked email and put them back on. I don't know where you are getting the new widget number, but I am using 11302375 and the button is on all folders and galleries, not just in the tree.

I use "Inspect Element" with Firefox. Right click on page element and box pops up with the page html.
In this case the yellow is highlighted for what I clicked on. Looking up 4 to 6 lines and the widget No. is found.

...
<div id="sm-page-widget-86c88VXh" class="sm-page-widget 
          sm-page-widget-html [COLOR=Red]sm-page-widget-11302574[/COLOR]" data-typeid="11302574">
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-dTKrN9r5" class="sm-page-widget-body">
            <div id="TRYPOhomePage">
                [COLOR=Yellow]<a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf"></a>[/COLOR]
            </div>
...

Duck · July 3, 2015

So I changed the number, inspected the element and saw the number changed again, so I changed the widget number to that one and it changed again. Currently, I have the 11302574 in the CSS

Duck · July 3, 2015

Sorry - but I am seriously dragging right now. Look to try something tomorrow - Cheers for tonight!

Allen · July 3, 2015

Duck wrote: »

So I changed the number, inspected the element and saw the number changed again, so I changed the widget number to that one and it changed again. Currently, I have the 11302574 in the CSS

A common mistake, 2 links where added. Reason, it's important that the correct area is highlighted on
the right flyout. Looks like the top link of 2 on the galleries pages was added with "all galleries"
highlighted.

On index page edit the link text to this ...>GOOD TRYPO Photo Home Page</a>.
This will help finding what box of 2 to remove on the gallery.

Go to gallery and highlight "all galleries". Then remove html box that does not have GOOD in it.
There is probably an extra CSS box added to "all galleries" to be removed.

Go to CSS on index page and change numbers to 11302746
Finally remove GOOD from the link text.

Index page (same as bottom one on gallery page - good)

<div id="sm-page-widget-8J8DMkfv" class="sm-page-widget sm-page-widget-html 
      sm-page-widget-11302746" data-typeid="[COLOR=Red]11302746[/COLOR]">

    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-t5MJbL98" class="sm-page-widget-body">
            <div id="TRYPOhomePage">
                <a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf"></a>

gallery page top one (this is extra html box from somewhere) Looks like it was added to "all galleries".

<div id="sm-page-widget-VNwgRxvC" class="sm-page-widget 
       sm-page-widget-html sm-page-widget-[COLOR=Red]11302574[/COLOR]" data-typeid="11302574">
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-zdgXvJZk" class="sm-page-widget-body">
            <div id="TRYPOhomePage">
                <a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf"></a>

gallery page bottom one (same as index page - good). This red number is used in CSS.

<div id="sm-page-widget-jnRhpTbD" class="sm-page-widget 
           sm-page-widget-html sm-page-widget-[COLOR=Red]11302746[/COLOR]" data-typeid="11302746">
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-8H2KRQF5" class="sm-page-widget-body">
            <div id="TRYPOhomePage">
                <a href="/Friends/TRYPO/15-TRYPO-New-York/15-TRYPO-NY-Index/n-PvpJvf"></a>

Duck · July 5, 2015

Back to it.

Same issue.

Using the GOOD method, I found the extra HTML in All Galleries from one of the Galleries and deleted it.

Back to the Index Page, I selected "Entire Site", removed "GOOD" and replaced the CSS as last suggested, using 11302746.

I still have the button on all pages and folders; not just TRYPO folders and galleries. It works, but I don't want it anywhere other than the 15 TRYPO New York tree. Should I start from scratch?

Allen · July 5, 2015

Ok, we're ahead, it's the same .sm-page-widget-11302746 everywhere. So it's probably in
the CSS something not working.

Be back after looking.

Allen · July 5, 2015

I can not find 11302746 anywhere in your CSS after searching. So it looks like you have
to add it back in "entire site". I had found the CSS using 11302746 as search term Friday.

/* hides TRYPO Photo Home Page LINK everywhere */  
.sm-page-widget-11302746 {display:none}
   /* display only for galleries this tree */   
.sm-page-parentnode-PRJJR.sm-page-gallery .sm-page-widget-11302746 {display:block}

Allen · July 5, 2015

I use the Web Developer tool in Firefox and go into edit CSS. In the edit box tabs all the CSS shows.
I searched every tab with no luck.

BTW, I pasted in the CSS edit box and the link stayed on the gallery but disappeared from the index page.
This is a virtual edit, does not change anything except what's loaded in memory going to your page.

How to add a Home Button

Comments