Showtime2 & Template

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Post Reply
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Showtime2 & Template

Post by Barrowboy »

Hi
I have created a new template based on a bootstrap system and converted it to work on CMSMS version 2.2.15 everything is working ok and looks good apart from the Showtime2 Slider I cannot get that to work. It was work ok on the old template.

Would you know if I have missed anything from the template or could there be a conflict with something else.

We have other modules all working ok.
News.
CGCalendar.
Gallery.

But I am stuck with the Showtime2 Slider I have tried all the settings available to me but no success so far.

Do you have any pointers to what may be wrong.

Thanks.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1629
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Showtime2 & Template

Post by DIGI3 »

I think you'll need to give us more information than "not working" - what's in the console, is it a javascript issue? Are things in the wrong place, is it a css issue? Is the structure off, perhaps an html issue? Is no code generated at all, perhaps a php issue?
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Showtime2 & Template

Post by Barrowboy »

Hi
This is copy of the template code.
I am not aware of any external CSS with Showtime. Only a bootstrap which is shown below.

{strip}
{block name='top'}
{* Define the main content block, and header image. Three versions of the header image are requested, which allows for smaller versions to be served for mobile devices *}
{$content="{content}" scope=global}
{$header_large="{content_image block='header_large' tab='Images' label='Header Image (desktop: at least 1200px wide)' urlonly=1}" scope=global}
{$header_medium="{content_image block='header_medium' tab='Images' label='Header Image (tablet: 1024px wide)' urlonly=1}" scope=global}
{$header_small="{content_image block='header_small' tab='Images' label='Header Image (mobile: 640px wide)' urlonly=1}" scope=global}
{/block}

{process_pagedata}
{/strip}
<!doctype html>
<!--[if lt IE 7]> <__html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <__html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <__html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<!--<![endif]-->
<__html class="no-js" lang="{cms_get_language|truncate:2:"":true}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title} - {sitename}</title>
{metadata}
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />
{/if}
{* Feel free to replace the Google fonts, just remember to update the stylesheet as well *}
<link href="https://fonts.googleapis.com/css?family=Raleway|Sacramento" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<link rel="shortcut icon" href="https://www.barrowuponsoar.org.uk/favicon.ico" type="image/x-icon" />
{* These next 2 are required for CGCalendar for the fullcalendar to work *}
{cms_jquery}
{cgjs_render}
{cms_stylesheet}
<__script__ src="https://use.fontawesome.com/914ad24785.js"></__script>
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<__script__ src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></__script>
<![endif]-->
<__script__ src="../js/respond.min.js"></__script>

</head>
</__body>
<div class="gridContainer clearfix noprint">

<header id="header" class="fluid noprint"></header>
{* <header id="sub-header" class="fluid"> <h6>{sitename}</h6></header>*}

<nav id="nav" class="fluid noprint">
<div id="menu-toggle" data-responsive-toggle="top-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="top-menu"></button>
</div>
<div id="top-menu" class="top-bar-center","nav">
{Navigator number_of_levels=6 template='a-b-navigation'}
</div>
</nav>

<div id="search-bar" class="fluid"><div class="noprint">
<div class="column">
{* <div id="top-menu" class="top-bar-right">
<div id="google_translate_element" class=”noprint”>
{literal}
<__script__ type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</__script><__script__ type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></__script>
{/literal}
</div>
</div>*}

<div id="search" >
{Search}
</div>

</div>
</div>
</div>
<article id="content" class="fluid">
{nav_breadcrumbs}
{block name='content'}
<p></p>
<h6>{title}</h6>

{$content}

{*{if $page_alias != 'page-stats'}{HitCounter assign=foo}{/if}*}
{/block}

</article>
<article id="content" class="fluid">
<div class="update-page"> {cms_selflink dir="previous" label="Previous page: "}</br>
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
{cms_selflink dir="next"}
{global_content name='Latest_Update'}</div>
<div id="facebook" class="fluid text-left" >{global_content name='Facebook'}</div>
</article>
<div id="useful-links" class="fluid text-center noprint">{global_content name='FooterAds'}</div>
<footer id="footer" class="fluid">
<div id="copyright" class="row expanded text-center">
{global_content name='footer'}
</div></footer>
</div>
{block name='js'}
<__script__ src="https://code.jquery.com/jquery-3.2.1.min.js"></__script>
<__script__ src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></__script>
<__script__>
$(document).foundation();
</__script>
{/block}
<__body>
</__html>
---------------------------
[[assign 'secondary' '#000000']]

[[assign 'highlight' '#ff0000']]

/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/


/* =============================================================================
HTML5 display definitions
========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
Base
========================================================================== */

/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: serif; color: #222; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/

/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/

/* =============================================================================
Links
========================================================================== */

a { color:[[$secondary]];}
a:visited { color: #551a8b; }
a:hover { color:[[$highlight]]; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
Typography
========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
Lists
========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
Embedded content
========================================================================== */

/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
* Correct overflow not hidden in IE9
*/

svg:not(:root) { overflow: hidden; }


/* =============================================================================
Figures
========================================================================== */

figure { margin: 0; }


/* =============================================================================
Forms
========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/

button, input { line-height: normal; }

/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
* Re-set default cursor for disabled elements
*/

button[disabled], input[disabled] { cursor: default; }

/*
* Consistent box sizing and appearance
*/

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* =============================================================================
Chrome Frame Prompt
========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
Author:
========================================================================== */

/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */

@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1629
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Showtime2 & Template

Post by DIGI3 »

I'm still not really clear what the problem you're running into is. Can you describe what's not working? Maybe provide a url, and confirm you've checked the console and php error log? (also, that's not Bootstrap, that's Foundation)
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Showtime2 & Template

Post by Barrowboy »

Hi Again
You are right, I seem to have got myself totally confused.

Leave it with me I need to spend sometime and sort out what I am doing.

I will get back to you if needs be.

Thanks.
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: Showtime2 & Template

Post by Barrowboy »

Hi

All sorted the problem with the Showtime2 Slider not work is the JS script at the bottom of the template.
<__script__ src="https://code.jquery.com/jquery-3.2.1.min.js"></__script>

Changed to this but not sure why an older script works, it must mean the Showtime2 is not compatible with the newer JS.
<__script__ src="https://code.jquery.com/jquery-1.9.0.min.js"></__script>

Thanks for you help sorry for the confusion.
Post Reply

Return to “CMSMS Core”