Home page Theater "Enter" button question.

jackm · 2016-09-01 07:04:25

My CE4 home page is a Stage full screen slideshow. It has an "Enter" button on the lower right corner of the screen that takes me to the galleries page. That was configurable in Lightroom with Stage.

www.stuffbyjack.com.

In my Backlight test area, I am using a Theater full screen page with Vegas FS for my home page.

www.stuffbyjack.com/backlighttest

I would like to have an "Enter" button on the Backlight home page linked to the galleries page, like Stage did. Ideally matching the same 'look' (background color opacity, color, etc.) as the one on the Stage button.

I think it can be coded, but i do not know how to do that, assuming it can be done.

Any suggestions or help would be appreciated.

Thanks,

Jack

rod barbee · 2016-09-01 07:28:52

There's a menu "hamburger" icon at the top of the slide show (configurable left or right in the page template > Page Layout > Columns Layout). Visitors will need to use this unless Matt has some other suggestions.

rod barbee · 2016-09-01 07:32:18

Another option is to not use a full screen page template. Rather, use a one column page, full width, but include the navigation in the header.
Create a custom menu just for that page template and put one item on it: Enter. Set the target to your Galleries page.

Style the navigation colors to your liking. You may need to use custom css if you want the navigation background to be transparent.

rod barbee · 2016-09-01 07:35:16

In fact, I just created a custom menu for my index page: http://backlight-rb-test.barbeephoto.com/

jackm · 2016-09-01 08:05:24

Rod,

My home page is a one column template. I can't get the menu bar to show like yours and get rid of the hamburger icon.

Jack

rod barbee · 2016-09-01 08:33:28

What is your Display setting under Navigation, Header?
Mine is set to Display: Desktop

jackm · 2016-09-01 08:41:06

Rod,

In my many attempts to make this work I had that set to Desktop.

Just tried it again. Does not work. I followed Matt's guide too set up this page in the Theater docs.

Jack

rod barbee · 2016-09-01 08:52:49

Try changing the Breakpoint under Page Layout to something like 1024px. If you have it set to 2560px, the mobile navigation icon will always show

jackm · 2016-09-01 10:34:36

Rod,

That worked for the desktop. Thanks a bunch.

It raises another question. I guess on an iPhone I will always get the hamburger icon as the breakpoint minimum is still larger than the screen width. I noticed on my iPad I get the bar on landscape, but icon on portrait.

Is that correct?

I really hoping too have an on screen 'enter' button to show all the times on any device.

Thanks,

Jack

rod barbee · 2016-09-01 10:46:27

It depends on the breakpoint you set

jackm · 2016-09-01 10:58:23

Rod,

The minimum Backlight will let me set is 992. I set it at that.

I would think the iPhone 6 on landscape would display the nav bar. But it doesn't.

Unless I am missing something else.

Jack

Daniel Leu · 2016-09-01 11:02:58

If you create a custom css file for this page, you can hide the hamburger with

.page__toggle__trigger {
    display: none !important;
}

Again, you would need a custom css file for this page template because otherwise you would not have the mobile navigation on your other pages.

If you want to better style the masthead for your entry page (eg, more text etc), you can replace/augment the default masthead using phplugins.

jackm · 2016-09-01 11:14:52

Daniel,

I don't want to hide the hamburger icon per se.

I really want an 'enter' button that takes me from my full screen homepage to my galleries page. Like I had in Stage.

See www.stuffbyjack.com

The problem I have is I do not know CSS, PHP, etc.

I was able to the stuff I wanted with the CE4 plugins without having to know and coding stuff. Backlight is way better and I am trying to get the test website to look and function that way I want before I migrate.

Both you and Rod have helped me a lot in this effort and I really appreciate the help. Wish I understood CSS, etc.

Jack

Daniel Leu · 2016-09-01 11:48:09

Hmmm....

Good that you don't use an identity plate. Try pasting following code into the tagline of your front-page template:

<div  style="position: fixed; bottom: 20px; right: 20px;"><form action="http://stuffbyjack.com/backlighttest/galleries/">     <input type="submit" value="Enter" /> </form></div>

This uses a button form element.

But if you like to stay closer to what you have in CE4, this might be better:

<div  style="position: fixed; bottom: 20px; right: 20px; background-color:rgba(255,255,255,0.7); font-size:2em; border-color:white; border-width:4px; padding: 20px;border-style:solid; "><a style="color:black; " href="http://stuffbyjack.com/backlighttest/galleries/">ENTER</a></div>

*) I increased the font weight to 800 to make the 'enter' more stand out.
**) I did some simple testing, but haven't checked on mobile etc...

jackm · 2016-09-01 12:00:41

Daniel,

I assume you mean in the 'Album Copy' 'Main Copy' on my Theater template that is used for the home page.

If so, I tried your suggestion and it did nothing.

Jack

Daniel Leu · 2016-09-01 12:15:00

jackm wrote:

I assume you mean in the 'Album Copy' 'Main Copy' on my Theater template that is used for the home page.

Nope, tagline is where you have to place it. 'Album Copy' and 'Main Copy' are disabled for the fullscreen slideshow.

If you already use tagline, then we'll have to change the approach a bit.

jackm · 2016-09-01 12:24:50

Daniel,

Sorry but I don't know where tagline is

Jack.

Daniel Leu · 2016-09-01 12:50:39

Page Template: Masthead -> Identity -> Tagline

jackm · 2016-09-01 13:02:41

Daniel,

Again I am sorry, but I didn't see it the first time I looked for it.

I pasted it in and it is there and works!!!!! Fantastic.

Now on the desktop it is on the top right and almost off the top of the screen. Top border not showing. On iPad same as desktop. iPhone had the full box displayed but again upper right. How can move it to right bottom?

See www.stuffbyjack.com/backlightterst

Jack

jackm · 2016-09-01 13:03:47

BTW I am using the identity plate to have my "Photos By Jack" show up.

Jack

jackm · 2016-09-01 13:18:38

Daniel,

On, but I don't see them. The 'enter' link works, but the button is just way top right. It looks the same for me in Chrome and Safari.

Jack

Daniel Leu · 2016-09-01 13:42:35

Okay, the original hack didn't work for you. Let's go the clean route and use phplugins and css. The frontpage slideshow has its own phplugins and css files that are only used for this page!

Following code goes into your phplugins file that you select in your frontpage template. You set this under Advanced Customization. Let's call it phplugins_frontpate.php*:

function ttg_masthead_bottom ( $style, $path ) { 
	echo '
		<div id="enter-field" ><a href="http://stuffbyjack.com/backlighttest/galleries/">ENTER</a></div>	
	';
} // end ttg_masthead_bottom

And your css for the frontpage template (eg: custom_frontpage.css) is:

#enter-field {
   position: fixed; 
   bottom: 20px; 
   right: 20px; 
   background-color:rgba(255,255,255,0.7); 
   font-size:1em; 
   border-color: white;  
   border-width:4px;
   border-style:solid;
}

#enter-field:hover {
   border-color: black;  
}

#enter-field a {
   display: block;
   padding: 24px;
   color:black;
}

#enter-field a:hover {
   text-decoration: none;
}

*) To create the custom phplugins file, duplicate phplugins-sample.php and name it phplugins-frontpage.php

In case it doesn't work, please activate the "Display Slideshow Controls". Thank you!

Updated css to make entire field clickable

jackm · 2016-09-01 14:24:07

Daniel,

Button on bottom, but not clickable.

Text writing on top of screen.

Controls were activated and are now showing on left side, but I have them set for right side.

Jack

Daniel Leu · 2016-09-01 14:29:50

Please email me your phplugins file. Thanks.

jackm · 2016-09-01 14:41:50

Daniel,

Sent to your email on your web site.

Jack

Community @ The Turning Gate

#1 2016-09-01 07:04:25

Home page Theater "Enter" button question.

#2 2016-09-01 07:28:52

Re: Home page Theater "Enter" button question.

#3 2016-09-01 07:32:18

Re: Home page Theater "Enter" button question.

#4 2016-09-01 07:35:16

Re: Home page Theater "Enter" button question.

#5 2016-09-01 08:05:24

Re: Home page Theater "Enter" button question.

#6 2016-09-01 08:33:28

Re: Home page Theater "Enter" button question.

#7 2016-09-01 08:41:06

Re: Home page Theater "Enter" button question.

#8 2016-09-01 08:52:49

Re: Home page Theater "Enter" button question.

#9 2016-09-01 10:34:36

Re: Home page Theater "Enter" button question.

#10 2016-09-01 10:46:27

Re: Home page Theater "Enter" button question.

#11 2016-09-01 10:58:23

Re: Home page Theater "Enter" button question.

#12 2016-09-01 11:02:58

Re: Home page Theater "Enter" button question.

#13 2016-09-01 11:14:52

Re: Home page Theater "Enter" button question.

#14 2016-09-01 11:48:09

Re: Home page Theater "Enter" button question.

#15 2016-09-01 12:00:41

Re: Home page Theater "Enter" button question.

#16 2016-09-01 12:15:00

Re: Home page Theater "Enter" button question.

#17 2016-09-01 12:24:50

Re: Home page Theater "Enter" button question.

#18 2016-09-01 12:50:39

Re: Home page Theater "Enter" button question.

#19 2016-09-01 13:02:41

Re: Home page Theater "Enter" button question.

#20 2016-09-01 13:03:47

Re: Home page Theater "Enter" button question.

#21 2016-09-01 13:18:38

Re: Home page Theater "Enter" button question.

#22 2016-09-01 13:42:35

Re: Home page Theater "Enter" button question.

#23 2016-09-01 14:24:07

Re: Home page Theater "Enter" button question.

#24 2016-09-01 14:29:50

Re: Home page Theater "Enter" button question.

#25 2016-09-01 14:41:50

Re: Home page Theater "Enter" button question.

Board footer