Having fun with Alyeska full-screen slider Home page…

[mharpen]

Here’s how to show a large full-screen image slider landing page (home page) with an “Enter Site” link, as in this photo:
http://picturestack.com/456/600/catthemesuggbtVV.jpg

When the user clicks “Enter Site”, the rest of the Alyeska home page content will fade in. It’s a nice option to use when you have a site that promotes artwork, real estate, travel, etc. Especially with beautiful images.

Here’s the custom CSS:

/*if using background slider then remove TB backgrd*/
#wrapper {background-image: none}
/*hide all content on home page, and display 'Enter Site' link*/
#enter-site {display:none; margin-left:45%; font-size:26px} /*this element is created in custom function*/
.home #enter-site {display:inline}  /*show link on home page only*/
/*hide all content on home page. use visibility:hidden not display:none, or else TB sliders act quirky when displayed*/
/*may need to hide other elements too depending what's on home page*/
.home #menu-wrapper, .home #main, .home #bottom,
   .home #after-footer, .home #featured {visibility:hidden} 
.fwb_fromthis {display:none}  /*hide full-width background plugin logo*/

Here’s the custom function (put into your Child theme functions.php):

/**
 * add 'Enter Site' link centered below header. Requires custom CSS also.
 */
function my_custom_header(){
		?>
		Enter Site
		<?php
		//note: must start with hidden in CSS (rather than display:none), or else TB slider gets quirky
}
add_action( 'themeblvd_header_content', 'my_custom_header', 10, 2 );

Enjoy.

Jason… Please consider an option like this in the next update. It would be a option to have in Alyeska.
Before I click submit, I just know all the symbols inside my pre tags are going to get messed up. I don’t know how else to paste in code. It looks fine before I hit submit. If you know a better let me know.

Topic

[mharpen]

Aargh!!
Every time I try to paste in code in this forum inside pre tags, it always messes it up. this time it removed a block of code from the function in my previous post above.

So here’s an image of the code. Not sure why it does this when i submit something with code. And then usually when I try to edit the post I get an error “Forum ID is missing”.

Image of code that I tried to paste into previous post above: http://picturestack.com/459/12/btXthemesuggb2EB.jpg

[mharpen]

Here’s an updated version. With this version the page displays normally if javascript is disabled. Also, this does Not require adding CSS to the custom CSS. So, all you need to do to have a full-screen background slider on your home page, is: 1) Install the Full Width Background Slider plugin. and 2) Add this function below to your child theme functions.php. Here’s another example of what your home page will look like with the background image changing every 5 seconds: http://picturestack.com/861/899/0qDthemesuggb3fo.jpg

I’m posting the code as an image, since everytime I post php code in this forum, it strips out stuff. Jason, is there anything you can do to prevent that? Whether I use pre tags or not, it always does that with php code.

Code image: http://picturestack.com/862/248/qcvthemesuggbkrl.jpg

[Jason Bobich]

If you’re wanting to paste in code that’s not formatting right, just throw it in a pastie or something 😉 — http://pastie.org

[mharpen]

Cool. I didn’t know about pastie.org. Thanks. Maybe add a link to it below the comment area. 🙂

Here’s the code if anyone’s interested: http://pastie.org/5549242

[mharpen]

Oops, Updated code here: http://pastie.org/5549562

This one hides the TB background on all pages, not just the front page.

[Author]

Replies