Ocean Theme

Post links to sites running CMS in all its glory.
Deak

Re: Ocean Theme _ picture layout

Post by Deak »

cmsmadesimplerookie wrote: I have uploaded the theme (i love the clean look) and have been playing around with the picture area on the homepage. For some reason I can not figure out how to move all text "right sub content" &" left sub content" to fall below the picture? When I look at the code everything appears correct but the sub content areas "hide" behind the picture?
I definitely need a link (or the HTML markup and a screenshot) to help with this. At a guess you may have lost a clearing DIV under the slideshow.... not sure.  ???
Deak

Re: Ocean Theme

Post by Deak »

@Adomas

Adding images to the slideshow is really easy, you don't need to change any template code.

Create a page for your website which uses the homepage template. When editing this page, find the content block named Content. In here you should create a regular bullet list, with each list item being an image. Remember, the alt text is used for the text part of the slide show.

Screenshot:

Image
smo6
New Member
New Member
Posts: 5
Joined: Fri Jan 08, 2010 1:32 am

Re: Ocean Theme

Post by smo6 »

Deak wrote:
smo6 wrote: ok got the first issue fixed :) just inserted the tag {cms_module module="News"} in the news block.
But I still don't know how to disable those flashing text fields.
Smo6, I'm not sure what you mean here and your screenshot link is dead. If you mean you want to disable the text that is displayed over the top of the image, then I'm afraid I can't help you. The slideshow works "as is" without recoding the JavaScript, however if you Google "jQuery carousel" you will find lots of different implementations and something might suit you better.
Sry for my vague description. That's exactly what I meant. To get rid of these captures I had to set typo to false in the ocean template.
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Hi I am trying to add the slideshow, somehow its not working, I know it is close and I have been staring at the code and reading your posts but I cant see what I have done wrong, also it is throwing up this error:

string(121) "Smarty error: [in tpl_head:26 line 5]: syntax error: unrecognized tag 'JQueryTools' (Smarty_Compiler.class.php, line 590)"

here is my code:

Code: Select all


{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
	<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{JQueryTools action=incjs}
<__script__ src="uploads/leroc/jquery.slideViewerPro.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/jquery.timers-1.1.3.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/cufon-yui.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/Aurulent_Sans_700.font.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/css-replace.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/jquery-1.3.2.min.js" type="text/javascript"></__script>


{literal}
<__script__ type="text/javascript"> 
$(window).bind("load", function() { 
    $("div#featuredContent").slideViewerPro({ 
        thumbs: 6,  
        autoslide: true,  
        asTimer: 4000,  // Adjust timer to your taste
        typo: true, 
        galBorderWidth: 0, 
        shuffle: false,
        thumbsVis: false 
    }); 
}); 
</__script>
{/literal}

{* IE6 png fix *}
{literal}
<!--[if IE 6]>
<__script__ type="text/javascript"  src="uploads/leroc/ie6fix.js"></__script>
<__script__ type="text/javascript">
 // argument is a CSS selector
 DD_belatedPNG.fix('#branding h1 a, #wrapper #branding');
</__script>
<style type="text/css">
/* enable background image caching in IE6 */
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
</style>
<![endif]-->
{/literal}





{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
</head>
</__body>
        <div id ="wrapper" class="container_12">
      <div id="branding" class=" grid_12 alpha omega ">
<h1><a href="#" title="Leroc Scotland">Leroc Scotland</a></h1>
<a href="#content-main" class="skip">skip to content |</a>  <a href="#nav-main" class="skip">skip to main menu |</a>

<div id="navMain" class="grid_7 alpha omega">
		{menu template='Ocean : simple-nav'  start_level='1' number_of_levels='1'}


      <!--main nav end-->
      </div> 
</div>
<!--branding end-->
<div class="clear"></div>

  <div id="content">

<div id="featuredContent" class="boxFeaturedContentMain svwp">  {content}
</div> 
<!--end of content-banner-->
<div id="content-sub">
<ul>
<li id="colA" class="grid_4">
  <h2>up and coming events</h2>
<br/>
</li>

<li id="colB" class="grid_4">
  <h2>workshops</h2>
<br/>
<p>Improve your dancing skills with 5 hours
of new steps</p>
</li>

<li id="colC" class="grid_4">
<h2>party nights</h2>
<br/>
<p>Dance the night away with guest DJ's and dancers</p>
</li>
</ul>

</div>

  

	</div>
<!--content end-->
<div class="clear"></div>
<div id="site_info" class="grid_12">

 <p class="contact grid_4">
 
 LEROC Ltd and LEROC (Scotland) Ltd<br />  
193 Bath Street  
  <br />
  Glasgow  
  <br />
  G2 4HU  

  <br />
  Tel:  0141 331 0608  
  <br />
  Email: <a href="mailto:leroc@leroc-scptland.co.uk">leroc@leroc-scotland.co.uk</a></p>

<div class="vcard grid_4 alpha omega">
<ul class="site_links grid_4 alpha omega">
<li><a href="#" class="top_line">home</a></li> 
<li><a href="#">events</a></li>
<li><a href="#" title="Validate my XHTML" class="valid">party nights</a></li>
<li><a href="#" title="Validate my CSS" class="valid">workshops</a></li>
<li><a href="#" class="top_line">about us</a></li> 
<li><a href="#">shop</a></li>
<li><a href="#" title="Validate my XHTML" class="valid">contact</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate my CSS" class="valid">workshops</a></li>
</ul>
 </div>

<div class="socialmedia grid_3 alpha omega">
  <p>We are on Facebook, and Youtube.
    Download music, view videos and join our 
    group,  keep up to date with everything 
    thats happening at LEROC Scotland! </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>  </p>
</div>
 
 


</div>
<p class="copy_info grid_7 float-right alpha omega" >© LEROC Scotland 2010. All rights reserved. <a href="#">XHTML Strict</a> | <a href="#">CSS </a>| <a href="http://www.louisespence.co.uk">Website LS Design</a></p>

<div class="clear"></div></div>

<__body>
</__html>

Thanks Lou
Deak

Re: Ocean Theme

Post by Deak »

Hi Lou,

I think the problem is that you've got two lots of jQuery included:

Code: Select all

{JQueryTools action=incjs}
<__script__ src="uploads/leroc/jquery.slideViewerPro.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/jquery.timers-1.1.3.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/cufon-yui.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/Aurulent_Sans_700.font.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/css-replace.js" type="text/javascript"></__script>
<__script__ src="uploads/leroc/jquery-1.3.2.min.js" type="text/javascript"></__script>
Try deleting the last script include.
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Hi
Tried that still doesnt work, here is the link I forgot to post the last time with the same error.
http://www.leroc-scotland.co.uk/2010/


thanks

Lou
Deak

Re: Ocean Theme

Post by Deak »

Doh! I should read the actual error rather than skipping to the code. :)

If you look in the readme.txt file included with the download, you will see:
4. ERRORS
------------------------------------------------------------

If you get the following error (or similar):

string(121) "Smarty error: [in tpl_head:25 line 6]: syntax error: unrecognized tag 'JQueryTools' (Smarty_Compiler.class.php, line 590)"

You have not got the JQueryTools module installed! See section 2.
Which would be genius of me, except that section 2 has nothing to say on this error. Haha! All you need to do is install the jQueryTools module using CMS Made Simple's regular module installer.
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Thanks I have done that.

It has changed it but still not working I think it may have something to do with the css now


http://www.leroc-scotland.co.uk/2010/
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Hey Deak

Thanks I am getting there, I need to faff around with the css but the slideshow is now functioning, thankyou so much, your help has been great, am just lovin cmsms  ;D
Deak

Re: Ocean Theme

Post by Deak »

No worries. The site is looking great by the way!
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Thanks its good to hear feedback,  I dont think design is my strong point, but starting to design with the grid 960 in mind and hopefully the whole process will eventually be a lot quicker and slicker once I get over the initial learning curve.
drew
Forum Members
Forum Members
Posts: 72
Joined: Wed Jan 02, 2008 5:37 pm
Location: Mass. USA

Re: Ocean Theme

Post by drew »

Ocean has some nice features that I was looking for - thank you for the fine work.

I'm quite new to jquery and have poked around jQuery.fn.slideViewerPro.js to see if it has a "fade transition"
option.  Is this an available feature or would I have to implement a new method using the jquery API?

Drew
loulou
Forum Members
Forum Members
Posts: 20
Joined: Tue Nov 10, 2009 1:32 pm

Re: Ocean Theme

Post by loulou »

Hi

A few wee things I need to tidy up, when I click on the main menu at the top then click on a sub menu within the page my 'current' styling to the main menu disappears.  ie click on dance nights then monday and the tab disappears from dance nights.

http://www.leroc-scotland.co.uk/2010/index.php?page=dance-nights

Also I would prefer my dancenights page to go straight to the Monday page instead of a generic page which isnt going to hold much content. Does this make sense?  Hope someone can help.

Thanks
Lou
Deak

Re: Ocean Theme

Post by Deak »

Morning Mike,

Thanks for the kind comments.

The demo has:

Code: Select all

{news detailpage="News" number="3"}
Obviously, you need to have a page in your site named News for it to send people to when they click on a story.
nicmare
Power Poster
Power Poster
Posts: 1150
Joined: Sat Aug 25, 2007 9:55 am
Location: Berlin

Re: Ocean Theme

Post by nicmare »

does your demo site run on cmsms 1.7?
thanks
Post Reply

Return to “CMS Show Off”