PhpBB Random Quote

[Martin_K]

I'll send it to you as quality control. Happy to share if it gets the official Stoker seal of approval.

I am getting a blue background in the box as it loads, so maybe not ready for the prime time, yet.

[Martin_K]

Ok, it's nice to share, and someone may be able to improve on it.

1) Download and copy bxslider folders including js and css to the forum root, from http://bxslider.com

2) In overall_header put these lines in near the top where the other css is loaded:

Code: Select all

<!-- IF SCRIPT_NAME == S_INDEX_PAGE -->
<link href="{ROOT_PATH}bxslider/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<!-- ENDIF -->

Change the IF statement to include any other pages you want the slider on.

3) In overall_footer (I like to try to run all my js from the footer if possible - between last </div> and </body>, of course)

Code: Select all

<!-- IF SCRIPT_NAME == S_INDEX_PAGE -->
<script type="text/javascript" src="{ROOT_PATH}bxslider/jquery.bxslider.min.js"></script>

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  easing: 'swing',
});
});
// ]]>
</script>
<!-- ENDIF -->

Many examples on the bxslider site of different settings to use for different slide effects. Simple fade works ok for text.

Then in randomquote_body.html make the ul class bxslider<ul class="bxslider">. I also made the box collapsible.

Here's how my randomquote_body.html looks like:

Code: Select all

<div class="forabg forumlist">
		<div class="inner"><span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header">
				<dl>
					<dt><!-- IF S_QUOTESPAGE_ENABLED --><a href="{U_QUOTES}">{L_RANDOM_QUOTE}</a><!-- ELSE -->{L_RANDOM_QUOTE}<!-- ENDIF --></dt>
				</dl>
			</li>
		</ul>
<div class="trigger active"></div>
<div class="collapsethis">	
		<ul class="bxslider">
		<!-- BEGIN quotes -->
		<li>
			<div class="content quote_text" >
			<!-- IF quotes.QUOTES_TEXT --><p>&ldquo;{quotes.QUOTES_TEXT}&rdquo;</p><!-- ENDIF -->
			</div>
		</li>
		<!-- END quotes -->
		</ul></div>
	<span class="corners-bottom"><span></span></span></div>
</div>

Then four changes to bxslider.css:
to stop the content overlapping the box edges delete
border: solid #fff 5px;
left: -5px;
and moved the controls down, and added z-index a couple of times to have the controls visible.

Code: Select all

/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	background: #fff;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
	z-index: 999;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
	z-index: 999;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	margin-top: 17px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}

[Stoker]

Looks very nice Martin. I will see if I can get to implement it on the portal this weekend.
Would be nice to be able to place the navigation in the header like I have done it with top stats recent active on this site.

[Martin_K]

It does look a bit 'bottom heavy' and with the the adaptive height it would be better to have the controls at the top, as you say, so the buttons would not move every time you click forwards or backwards. There are plenty of other js sliders out there, all with their own features and options, so bxslider is not necessarily the best.

I want to do tabbed slider for a custom page elsewhere in my site so I have also been looking at Better Coda Slider and Liquid Slider. The Liquid Slider author has a nice page detailing how to customise the navigation of Liquid Slider here: Add Custom Controls To Your Responsive Slider.

Given that I am using Font Awesome Font Replacement Icons (and am considering IcoMoon), I may try this instead of bxslider.

[x8BiTw0LFx]

Hej Stoker.

Efter jeg har haft installeret Random Quote, slettet det igen får jeg denne fejl når jeg vil ind på mit site.

Code: Select all

Generel fejl
template->_tpl_load_file(): File ./styles/prosilver/template/randomquote_body.html does not exist or is empty

BACKTRACE

FILE: (not given by php)
LINE: (not given by php)
CALL: msg_handler()

FILE: [ROOT]/includes/functions_template.php
LINE: 63
CALL: trigger_error()

FILE: [ROOT]/includes/template.php
LINE: 437
CALL: template_compile->_tpl_load_file()

FILE: [ROOT]/includes/template.php
LINE: 657
CALL: template->_tpl_load()

FILE: [ROOT]/includes/functions_template.php
LINE: 227
CALL: template->_tpl_include()

FILE: [ROOT]/includes/functions_template.php
LINE: 66
CALL: template_compile->compile()

FILE: [ROOT]/includes/template.php
LINE: 437
CALL: template_compile->_tpl_load_file()

FILE: [ROOT]/includes/template.php
LINE: 224
CALL: template->_tpl_load()

FILE: [ROOT]/includes/functions.php
LINE: 4878
CALL: template->display()

FILE: [ROOT]/index.php
LINE: 157
CALL: page_footer()

Hvad skal jeg gøre? Er helt på bar bund lige nu.

Edit: Fixede det ved at lave en tom randomquote_body.html og smed den ind i prosilver styles

[Stoker]

Hejsa,

Jeg gætter på at du bruger en style der arver template fra prosilver?
Derfor skal alle template filer placeres i prosilver mappen.
Før det bliver helt korrekt, skal du uploade en kopi af omtalte fil til prosilver templates

[x8BiTw0LFx]

Hejsa,

Jeg gætter på at du bruger en style der arver template fra prosilver?
Derfor skal alle template filer placeres i prosilver mappen.
Før det bliver helt korrekt, skal du uploade en kopi af omtalte fil til prosilver templates

Tak for reply. Fandt ud af det Lækkert site i har kørende her - helt sikkert noget jeg vil benytte mig af i fremtiden