Workshop

Posted by: admin on Oct 31, 2011 Print PDF

Tagged in: Untagged 

Installed Joomla 1.7

  • install akeeba backup core https://www.akeebabackup.com
  • install akeeba admin tools core https://www.akeebabackup.com
  • install k2 v2.51 getk2.org
  • install gantry framework bundle (framework and template) http://www.gantry-framework.org/download#joomla17
  • install roknavmenu http://www.rockettheme.com/extensions-joomla/roknavmenu
  • install articles anywhere http://www.nonumber.nl
  • install mod html http://www.dart-creations.com
  • install easyheader http://blackdale.com/extensions/easyheader
  • install jquery installer http://tushev.org/products/jqueryintegrator

admin->template-> make rt-gantry default template

Now you will probably get file/directory permission errors on some servers - looking at why and what to do - forum is not helpful !

Temporarily set all directory to 777 (use admin tools) then run the gantry template, BUT MUST SET BACK TO 755 immediately afterwards - I'm not sure why this works, must be some file creation on first run.

Edit gantry template:

  • Advanced Tab -> turn off Gantry Cache
  • Features Tab - Turn off Logo, Copyright and 'to-top' features
  • Enable custom css in Gantry - do not modify template or library files!- see http://www.rockettheme.com/forum/index.php?f=337&t=106162&rb_v=viewtopic

Plug-in Manager: System - jQuery++ Integrator - enable jquery, UI and tools.

K2 Parameters - switch off CSS and Jquery for front end.

Use Admin Tools to set /media/k2.... to writable

Now to work In Gantry, move menu to position 'navigation'

  • Components->K2->Categories
  • Create Category System Docs
  • Create Category Header Docs with System Docs as parent
  • Create K2 Item Header Logo in Header Docs, upload logo
  • Create Module K2 Content, single article (header logo) in position header-a.
  • Go to Gantry Template and set up header in Layout (3-6-3)
  • Create K2 Item Header Text in Header Docs
  • Create Module K2 Content, single article (header text) in position header-b.
  • Create K2 Item Header Contact in Header Docs
  • Create Module K2 Content, single article (header contact) in position header-b.
  • add into mycustomcss.css: div.head_contact {font-size:16px; text-align:right}

Create new custom html module for addthis.com with code copied from addthis.com - Module Position header-c

Create K2 Item "About Us"

Create Menu Item "About Us" with this as target

Create K2 Category "About Us Slideshow" and create several items with images in the category

Copy Template Gantry Default and name copy Gantry About Us

Adjust About Us Template to 50:50 main content and sidebar a, assign this template to the About Us page

Create Module K2 Content using all docs in K2 Category "About Us Slideshow" - adjust the parameters, use template 'slideshow' assign to page "About Us"

Slideshow is created with jquery tools - http://flowplayer.org/tools/ see k2 module template "slideshow"

note that Jquery is running in "no conflict" mode

Social Create K2 Category "Social"

Set smallest image size to 50px

upload images and links to articles

Create Module K2 Content - Social

Use just smallest image

Set Gantry footer display to 3 positions, for positions

Update CSS /* social footer */ div#rt-footer div.system_docs a img { display:inline; float:left; margin:5px 10px }

Gallery Upload cloud carousel(http://www.professorcloud.com/mainsite/carousel.htm) and fancybox (http://fancybox.net/) to template js directory

Create K2 Category "Gallery One", setting images sizes as appropriate for gallery, eg 150 & 400 and "Leading Count" as 100.

Create items in this category, only need images.

Create menu item "Gallery" as K2->Categories, select Gallery One

Create HTML module in position "feature-a" only on gallery page with contents:

<script src="/templates/rt_gantry/js/cloud/cloud-carousel.1.0.5.min.js" type="text/javascript"></script>
<script src="/templates/rt_gantry/js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#carousel").CloudCarousel({       
xPos:280,
yPos:80,
buttonLeft: jQuery('#but3'),
buttonRight: jQuery('#but4'),               
FPS:30,
autoRotate: 'left',
autoRotateDelay: 2400,
speed:0.1,
mouseWheel:true,
bringToFront:true
});

jQuery("a.grouped_elements").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'        :    600,
'speedOut'        :    200,
'overlayShow'    :    false,
cyclic : true
});   

});
// ]]></script>

Note: This means js only loads on the relevant page.

Unconventional use of js files within body, but passes WC3 tests.

However, import styles inside creates a WC3 warning.

It works, but could be improved by moving css into mycustomcss.css


[ Back ]