COMMUNITY FORUM

Keyword
  1. Forum
  3. Commercial Joomla Extensions & Templates
  5. Frontpage Slideshow
  7. Full width slideshow (working, but with one issue)
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Full width slideshow (working, but with one issue)

  • vpayne
  • vpayne's Avatar Topic Author
  • Offline
  • New Member
More
12 years 4 months ago - 12 years 4 months ago #49527 by vpayne
Full width slideshow (working, but with one issue) was created by vpayne
Hello,

New Edit - I now have the full-width slideshow working at this location - www.mainstreetwebdesigns.com/ - only have one remaining issue that autoplay is not working well. See my post below for file changes.  :)

Original post - I have modified the FPSS slideshow template to produce a full-width slideshow. She uses 1600px wide slides and displays well in most resolutions. But I have one problem -- the slides are left-justified, and I need them to be centered. That would make the graphic creation of each slide easier, and would also ensure an acceptable display even on the highest-resolution monitors.

I am adding below my modified css for the default template_css.php file, in case someone would like to have a play with it. I think it must be a css issue, but I have tried text-align:center and/or removing float:left and/or adding margin: 0 auto on every div possible and I cannot get her to center. I also tried making some changes to the module's default.php file, but I did not have any luck. So I think css will be the best place to look.

Here you go (I hope some adventurous soul will have a try!):
<?php
if(!isset($fpssTemplateIncluded)){
	header("Content-type: text/css; charset: UTF-8");
	$width = (int) $_GET['w'];
	$height = (int) $_GET['h'];
	$sidebarWidth = (int) $_GET['sw'];
}
?>
/**
 * @version		2.9.1
 * @package		Frontpage Slideshow
 * @author    JoomlaWorks - http://www.joomlaworks.gr
 * @copyright	Copyright (c) 2006 - 2011 JoomlaWorks, a business unit of Nuevvo Webware Ltd. All rights reserved.
 * @license		Commercial - This code cannot be redistributed without permission from Nuevvo Webware Ltd.
 */

/* --- Slideshow Containers --- */
#fpss-outer-container {padding:0;margin:0;overflow:hidden;border:0;} /* This element controls the slideshow spacing and border */
#fpss-container {position:relative;margin:0;padding:0;clear:both;width:100%;}
#fpss-slider {background:none;overflow:hidden;clear:both;text-align:left;width:100%; height:440px;} /* Add bg color if using bg image on #fpss-outer-container */
#slide-loading {background:#fff url(../images/loading.gif) no-repeat center;text-align:center;width:100%;height:440px;}
#slide-wrapper {display:none;width:100%;height:440px;}
#slide-wrapper #slide-outer {height:440px;}
#slide-wrapper #slide-outer .slide {position:absolute;overflow:hidden;right:0;width:100%;height:440px;}
#slide-wrapper #slide-outer .slide .slide-inner {margin:0;color:#fff;overflow:hidden;background:#3a3a3a;text-align:left;z-index:8;height:440px;}
#slide-wrapper #slide-outer .slide .slide-inner a.fpss_img span span span {background:none;}

/* --- Content --- */
.fpss-introtext {font-size:11px;margin:0;padding:0;position:absolute;top:0;bottom:0;right:57%;width:350px;height:100%;background:url(../images/transparent_bg.png);}
.fpss-introtext .slidetext {margin:0;padding:12px 30px;}

/* --- Navigation Buttons --- */
/* --- Navigation Buttons (NEW) --- */
#navi-outer {position:relative;top:0;left:center;width:980px;margin:0 auto;padding:0 100px 0 0;text-align:right;}
#navi-outer ul {position:relative;margin:-400px 8px 0 0;padding:0;/*clear:both;*/float:right;height:19px;}


#navi-outer li {padding:2px 0;margin:0;border:none;list-style:none;background:none;float:left;line-height:17px;text-align:center;}
#navi-outer li a {display:block;font-size:1px;font-family:Tahoma, Arial, sans-serif;text-align:center;text-decoration:none;color:#5CC528;padding:1px 9px;margin:0 3px;background:url(../images/g_dot.png)0 0 no-repeat;}
#navi-outer li a:hover,
#navi-outer li a.navi-active {font-size:1px;font-family:Tahoma, Arial, sans-serif;text-align:center;text-decoration:none;color:#fff;border:0;padding:1px 9px;margin:0 3px;background:url(../images/w_dot.png)0 0 no-repeat;}
#navi-outer li a span.navbar-img {display:none;}
#navi-outer li a span.navbar-key {padding:2px;}
#navi-outer li a span.navbar-title {display:none;}
#navi-outer li a span.navbar-tagline {display:none;}
#navi-outer li a span.navbar-clr {display:none;}
#navi-outer li.noimages a,
#navi-outer li.noimages a.navi-active,
#navi-outer li.noimages a:hover {border:none;padding:1px;}
#navi-outer li.noimages a#fpss-container_next, #navi-outer li.noimages a#fpss-container_playButton, #navi-outer li.noimages a#fpss-container_prev {display:none;}

/* --- Notice: Add custom text styling here to overwrite your template's CSS styles! --- */
.fpss-introtext .slidetext h1 {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;line-height:32px;margin:0 0 25px 0;color:#fff;border-bottom:1px solid #e6e6e6;padding: 25px 0;}
.fpss-introtext .slidetext h1 a {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;margin:0;padding:0;color:#fff;}
.fpss-introtext .slidetext h1 a:hover {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;margin:0;padding:0;color:#00F000;}
.fpss-introtext .slidetext h2 {font-size:11px;margin:0;padding:0;color:#999;font-weight:normal;}
.fpss-introtext .slidetext h3 {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:22px;line-height:22px;margin:0 0 10px 0;color:#00F000;padding:5px 0;}
/*.fpss-introtext .slidetext h3:hover {color:#fff;}*/
.fpss-introtext .slidetext p {margin:10px 0 15px 0;padding:10px 0 15px 0;color:#fff;font-size:20px;line-height:30px;}
.fpss-introtext .slidetext a.readon {margin:0 0 0 230px;padding:1px 8px;background:#333;color:#00F000;line-height:20px;border:1px solid #fff;text-decoration:none;display:inline;font-style:italic;font-weight:bold;}
.fpss-introtext .slidetext a.readon:hover {margin:0 0 0 230px;padding:1px 8px;color:#fff;line-height:20px;text-decoration:none;display:inline;}

/* --- Generic Styling (highly recommended) --- */
#fpss-outer-container a:active,
#fpss-outer-container a:focus {outline:0;}
#fpss-container img {border:none;}
.fpss-introtext .slidetext img,
.fpss-introtext .slidetext p img {display:none;} /* this will hide images inside the introtext */
.fpss-clr {clear:both;height:0;line-height:0;}

/* --- End of stylesheet --- */

Please Log in or Create an account to join the conversation.

  • Yiota
  • Yiota's Avatar
  • Visitor
12 years 4 months ago - 12 years 4 months ago #49528 by Yiota
Replied by Yiota on topic Re: Full width slideshow (working, but with one issue)
Try replacing these two statements

#slide-wrapper #slide-outer .slide {position:absolute;overflow:hidden;right:0;width:100%;height:440px;}
#slide-wrapper #slide-outer .slide .slide-inner {margin:0;color:#fff;overflow:hidden;background:#3a3a3a;text-align:left;z-index:8;height:440px;}

with the following two

#slide-wrapper #slide-outer .slide {position:absolute;overflow:hidden;right:0;width:100%;height:440px;background:#3a3a3a;}
#slide-wrapper #slide-outer .slide .slide-inner {margin:0 auto;color:#fff;overflow:hidden;text-align:left;z-index:8;height:440px;width:<?php echo $width; ?>px;}

Please Log in or Create an account to join the conversation.

  • vpayne
  • vpayne's Avatar Topic Author
  • Offline
  • New Member
More
12 years 4 months ago #49529 by vpayne
Replied by vpayne on topic Re: Full width slideshow (working, but with one issue)
Hi, Yiota -

I tried your suggestion but unfortunately it didn't work. The slide's width was then very narrow. Incidentally, besides the css changes I've posted, I also needed to set the width in the FPSS module to 100% -- so I think that complicates things.

If you're still interested in helping find a solution, another site I know of that has a full-width slideshow in the same dimensions, but centered, is www.nashvillerescuemission.org (It is not using FPSS, but I wonder if the css for that site might provide some clues.) It seems to be using absolute positioning for the slideshow div, but with some negative values... (?)

Thanks for helping!

Vicki

Please Log in or Create an account to join the conversation.

  • vpayne
  • vpayne's Avatar Topic Author
  • Offline
  • New Member
More
12 years 4 months ago - 12 years 4 months ago #49530 by vpayne
Replied by vpayne on topic Re: Full width slideshow (working, but with one issue)
Update - I have been able to fix the centering problems by turning the slideshow into an unordered list! It wasn't all that difficult, once I realized that was probably the only way to do it. I'm posting the two fpss template files I changed, so others can try it if they'd like.

PLEASE NOTE - I am using FPSS 2.9.1 (an older version) and haven't attempted this in 3.0 version yet. Also, my slide sizes are 1600px x 440px. You can use different sizes if you want, but I've hard-coded these sizes in a few places in the css files, so you will need to change those. Also, I entered the 1600px width in my fpss category (in the component) and 100% in the width input box in the fpss module. I made my changes using the default template - I also changed the nav to show green and white buttons in the upper right instead of numbers, etc. so you will need to upload similar images to the module's images folder.

The only small problem I'm seeing is that Autoplay seems to no longer work (however when you click the nav to start the slideshow, the slides start playing normally). If someone has an idea how to get Autoplay back, that would be great!

Here is the modules/mod_fpss/tmpl/Default/default.php code (just a few lines were added, which I've marked -- remember this is for FPSS 2.9.1):
<?php
/**
 * @version		2.9.1
 * @package		Frontpage Slideshow
 * @author    JoomlaWorks - http://www.joomlaworks.gr
 * @copyright	Copyright (c) 2006 - 2011 JoomlaWorks, a business unit of Nuevvo Webware Ltd. All rights reserved.
 * @license		Commercial - This code cannot be redistributed without permission from Nuevvo Webware Ltd.
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

?>

<div id="fpss-outer-container">
	<div id="fpss-container">

		<div id="fpss-slider">
			<div id="slide-loading"></div>

			<div id="slide-wrapper">
				<div id="slide-outer">

                                <!-- BWD ADDED -->
                                <ul>

				<?php foreach($output as $slide): ?>

                                <!-- BWD ADDED -->                                     
                                <li>

                                
				<div class="slide">
					<div class="slide-inner">
						<a<?php echo $slide->target; ?> href="<?php echo $slide->link; ?>" class="fpss_img">
							<span>
								<span style="background:url(<?php echo $slide->mainImage; ?>) no-repeat;">
									<span>
										<img src="<?php echo $slide->mainImage; ?>" alt="<?php echo $slide->altname; ?>" />
									</span>
								</span>
							</span>
						</a>
						<?php if($slide->content): ?>
						<div class="fpss-introtext">
							<div class="slidetext">

								<?php if($slide->name): ?>
								<h1><a<?php echo $slide->target; ?> href="<?php echo $slide->link; ?>"><?php echo $slide->name; ?></a></h1>
								<?php endif; ?>

								<?php if($slide->secCatPath): ?>
								<h2><?php echo $slide->secCatPath; ?></h2>
								<?php endif; ?>

								<?php if($slide->tagline): ?>
								<h3><?php echo $slide->tagline; ?></h3>
								<?php endif; ?>

								<?php if($slide->text): ?>
								<p><?php echo $slide->text; ?></p>
								<?php endif; ?>

								<?php if($slide->link && $slide->readMore): ?>
								<a<?php echo $slide->target; ?> href="<?php echo $slide->link; ?>" title="<?php echo JText::_('Read more about'); ?> <?php echo $slide->altname; ?>" class="readon"><?php echo JText::_('More...'); ?></a>
								<?php endif; ?>
							</div>
						</div>
						<?php endif; ?>
					</div>
				</div>

                                <!-- BWD ADDED -->
                                </li>


				<?php endforeach; ?>

                                <!-- BWD ADDED -->
                                </ul>


				</div>

			</div>

		</div>

		<div id="navi-outer">
			<div id="pseudobox"></div>
				<div class="ul_container">
					<ul>
						<li class="noimages"><a id="fpss-container_prev" href="javascript:void(0);" onclick="showPrev();clearSlide();" title="<?php echo JText::_('Previous'); ?>">&laquo;</a></li>
						<?php foreach($output as $slide): ?>
						<li>
							<a class="navbutton off navi" href="javascript:void(0);"<?php echo $slide->rotateAction; ?> title="<?php echo $slide->name; ?>">
								<span class="navbar-img">
									<img src="<?php echo $slide->thumbImage; ?>" alt="<?php echo JText::_('Navigate to'); ?> <?php echo $slide->name; ?>" />
								</span>
								<span class="navbar-key"><?php echo $slide->counter; ?></span>
								<span class="navbar-title"><?php echo $slide->name; ?></span>
								<span class="navbar-tagline"><?php echo $slide->tagline; ?></span>
								<span class="navbar-clr"></span>
							</a>
						</li>
						<?php endforeach; ?>
						<li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="<?php echo JText::_('Next'); ?>">&raquo;</a></li>
						<li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="ppButtonClicked();return false;" title="<?php echo JText::_('Play/Pause Slide'); ?>"><?php echo JText::_('Pause'); ?></a></li>
					</ul>
				</div>
			</div>
		<div class="fpss-clr"></div>
	</div>
	<div class="fpss-clr"></div>
</div>

And here is that same module template's template_css.php file:
<?php
if(!isset($fpssTemplateIncluded)){
    header("Content-type: text/css; charset: UTF-8");
    $width = (int) $_GET['w'];
    $height = (int) $_GET['h'];
    $sidebarWidth = (int) $_GET['sw'];
}
?>
/**
 * @version		2.9.1
 * @package		Frontpage Slideshow
 * @author    JoomlaWorks - http://www.joomlaworks.gr
 * @copyright	Copyright (c) 2006 - 2011 JoomlaWorks, a business unit of Nuevvo Webware Ltd. All rights reserved.
 * @license		Commercial - This code cannot be redistributed without permission from Nuevvo Webware Ltd.
 */

/* --- Slideshow Containers --- */
#fpss-outer-container {padding:0;margin:0;overflow:hidden;border:0;} 
#fpss-container {position:relative;margin:0;padding:0;clear:both;width:100%;}
#fpss-slider {background:none;overflow:hidden;clear:both;text-align:left;width:100%;height:440px;} 
#slide-loading {background:#fff url(../images/loading.gif) no-repeat center;text-align:center;width:100%;height:440px;}
#slide-wrapper {display:none;width:100%;height:440px;}
/*#slide-wrapper #slide-outer {height:440px;}*/

/* --- NEW --- */
#slide-wrapper #slide-outer {margin: 0 auto; overflow:visible; position: relative; width:996px;}


#slide-wrapper #slide-outer .slide {position:absolute;overflow:hidden;right:0;width:100%;height:440px;}
#slide-wrapper #slide-outer .slide .slide-inner {margin:0;color:#fff;overflow:hidden;background:#3a3a3a;text-align:left;z-index:8;height:440px;}

#slide-wrapper #slide-outer .slide .slide-inner a.fpss_img span span span {background:none;}

/* --- NEW --- */
#slide-wrapper #slide-outer ul {left:-320px; list-style:none; margin: 0 auto; height:445px; overflow-y:hidden; padding: 0; position: absolute; top:0; width:1600px;}
#slide-wrapper #slide-outer ul li {height: 440px; left: 0; position: absolute; top: 0; width: 1600px;}


/* --- Content --- */
.fpss-introtext {font-size:11px;margin:0;padding:0;position:absolute;top:0;bottom:0;right:55%;width:350px;height:100%;background:url(../images/transparent_bg.png);}
.fpss-introtext .slidetext {margin:0;padding:12px 30px;}

/* --- Navigation Buttons --- */
/* --- Navigation Buttons (NEW) --- */
#navi-outer {position:relative;top:0;left:center;width:980px;margin:0 auto;padding:0 100px 0 0;text-align:right;}
#navi-outer ul {position:relative;margin:-400px 8px 0 0;padding:0;/*clear:both;*/float:right;height:19px;}


#navi-outer li {padding:2px 0;margin:0;border:none;list-style:none;background:none;float:left;line-height:17px;text-align:center;}
#navi-outer li a {display:block;font-size:1px;font-family:Tahoma, Arial, sans-serif;text-align:center;text-decoration:none;color:#5CC528;padding:1px 9px;margin:0 3px;background:url(../images/g_dot.png)0 0 no-repeat;}
#navi-outer li a:hover,
#navi-outer li a.navi-active {font-size:1px;font-family:Tahoma, Arial, sans-serif;text-align:center;text-decoration:none;color:#fff;border:0;padding:1px 9px;margin:0 3px;background:url(../images/w_dot.png)0 0 no-repeat;}
#navi-outer li a span.navbar-img {display:none;}
#navi-outer li a span.navbar-key {padding:2px;}
#navi-outer li a span.navbar-title {display:none;}
#navi-outer li a span.navbar-tagline {display:none;}
#navi-outer li a span.navbar-clr {display:none;}
#navi-outer li.noimages a,
#navi-outer li.noimages a.navi-active,
#navi-outer li.noimages a:hover {border:none;padding:1px;}
#navi-outer li.noimages a#fpss-container_next, #navi-outer li.noimages a#fpss-container_playButton, #navi-outer li.noimages a#fpss-container_prev {display:none;}

/* --- Notice: Add custom text styling here to overwrite your template's CSS styles! --- */
.fpss-introtext .slidetext h1 {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;line-height:32px;margin:0 0 25px 0;color:#fff;border-bottom:1px solid #e6e6e6;padding: 25px 0;}
.fpss-introtext .slidetext h1 a {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;margin:0;padding:0;color:#fff;}
.fpss-introtext .slidetext h1 a:hover {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:32px;margin:0;padding:0;color:#00F000;}
.fpss-introtext .slidetext h2 {font-size:11px;margin:0;padding:0;color:#999;font-weight:normal;}
.fpss-introtext .slidetext h3 {font-family:Arial, Helvetica, Verdana, sans-serif;font-size:22px;line-height:22px;margin:0 0 10px 0;color:#00F000;padding:5px 0;}
/*.fpss-introtext .slidetext h3:hover {color:#fff;}*/
.fpss-introtext .slidetext p {margin:10px 0 15px 0;padding:10px 0 15px 0;color:#fff;font-size:20px;line-height:30px;}
.fpss-introtext .slidetext a.readon {margin:0 0 0 230px;padding:1px 8px;background:#333;color:#00F000;line-height:20px;border:1px solid #fff;text-decoration:none;display:inline;font-style:italic;font-weight:bold;}
.fpss-introtext .slidetext a.readon:hover {margin:0 0 0 230px;padding:1px 8px;color:#fff;line-height:20px;text-decoration:none;display:inline;}

/* --- Generic Styling (highly recommended) --- */
#fpss-outer-container a:active,
#fpss-outer-container a:focus {outline:0;}
#fpss-container img {border:none;}
.fpss-introtext .slidetext img,
.fpss-introtext .slidetext p img {display:none;} /* this will hide images inside the introtext */
.fpss-clr {clear:both;height:0;line-height:0;}

/* --- End of stylesheet --- */

Hope someone else can use this -- I rattled my brain (and others') for many hours before we got this to work!

Vicki Payne
Bear Web Design

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #49531 by Katia
Replied by Katia on topic Re: Full width slideshow (working, but with one issue)
Nevertheless, you should use the latest FPSS version...
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
12 years 2 months ago #49532 by theodormachnich
Replied by theodormachnich on topic Re: Full width slideshow (working, but with one issue)
Hi Katia,

can you tell me, how I can now realize the 100% width with ffpss.
I am not able to change bigger things in the css files.
In other slideshows I can write in the width field instead of px % so this make live more easy.
Unfortunately this slideshows are not so nice as yours.

Greatings Theo

Please Log in or Create an account to join the conversation.

More
12 years 2 months ago #49533 by Katia
Replied by Katia on topic Re: Full width slideshow (working, but with one issue)
The width of the slideshow can be controlled by the FPSS module parameters.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  1. Forum
  3. Commercial Joomla Extensions & Templates
  5. Frontpage Slideshow
  7. Full width slideshow (working, but with one issue)

Powered by Kunena Forum