Quattro Simple with Columns

[wlr2]

I have tried to figure out (without any luck) on how to add columns to the page using the quattro simple theme.
I would use a different theme altogether, but i need the banner at the top. I have tried to add the banner feature to a different theme, but that was a waste of three hours of my sanity.
I am by no means a php guru or even an advanced user for that matter. I can cut and paste with the best of them, but alas, I am Capt. Fail on this project.

I tried using the side bar of the theme, but the crappy code from a third party requires 600px of width or it breaks.

So, simple question. Can I add columns to this theme or widen the side bar to lets say, 600px? Or.... Can I add the banner to a different theme? Or should i just blow my brains out and get it over with?

Any help is greatly appreciated.

[uniqu3]

I tried using the side bar of the theme, but the crappy code from a third party requires 600px of width or it breaks.

So, simple question. Can I add columns to this theme or widen the side bar to lets say, 600px? Or.... Can I add the banner to a different theme? Or should i just blow my brains out and get it over with?

Any help is greatly appreciated.

Theme is using grid system means all styles that you would need for additional columns with different widths are already there.
What you need to do is go to "Layout -> Stylesheets -> open QuattroSimple Stlyesheet named Core" and study it.
After that you open the Template itself and study that to, you will see that i used class="grid_3" for Sidebar which has a width of 220px and class="grid_9" for Content which has a width of 700px (220+700=920 + margins 40 = total 960)
As you can see the site has total width of 960px (currently standard width for common devices, if not using fluid or elastic layout or you do not belong to the 1080px section)

Said by this a sidebar with 600px would just look awkward as for content you would be left with 320px, what i try to say, you should consider if you realy want to add something with 600px width in the Sidebar.

To use only header part you will need following in your other Template, please not that CSS Styling is up to you, Copy/Paste knowledge is as good as no knowledge.

Take this code from Template right somewhere on top (it's used to give you options to enable/disable Slider for each page and enter Gallery foldername:

Code: Select all

{content block="headerteaser" description="Show Slideshow in Header" oneline="true" size="1" default="-" assign="teaser" page_tab="Header Options"}{if empty($teaser)}{assign var="teaser" value="+"}{/if}
{content block="galleryfolder" oneline="true" label="Enter Gallery Module foldername for Header Slideshow" page_tab="Header Options" assign="gfolder"}

This is the part that makes Slider work in your Template:

Code: Select all

{if $teaser == "+"}
        <!-- start pageTeaser -->
        <div class="grid_12 pageTeaserOuter"> 
          <div class="pageTeaserInner"> 
          {if isset($gfolder)}{Gallery template="cycleTeaser" dir=$gfolder number="6"}{else}<p style="color:#f00; font-size: 1.4em;"><strong>Ups! Please enter Gallery folder name in the appropriate field or deactivate Slideshow.</strong></p>{/if}
          <span id="prev">Previous</span><span id="next">Next</span>
          </div>
          <!-- end pageTeaser -->
        </div>
        {/if}

Now you need Gallery module and Template for Slider (Name it cycleTeaser as mentioned in README.txt or look Gallery code above):

Code: Select all

<div class="teaser">
{foreach from=$images item=image}
{if $image->isdir}<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" width="926" heighet="246" alt="{$image->titlename}" {if !empty($image->comment)}title="{$image->comment}"{/if} />
	{else}
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" width="926" heighet="246" alt="{$image->titlename}" {if !empty($image->comment)}title="{$image->comment}"{/if} />
	{/if}
{/foreach}
</div>
<div class="description">
{foreach from=$images item=image}
<div>
<h3>{$image->titlename}</h3>
{if !empty($image->comment)}<p>{$image->comment}</p>{/if}
</div>
{/foreach}
 </div>

At the bottom of the Template you will find JavaScript files to, you will need the jQuery and cycle plugin:

Code: Select all

<__script__ type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></__script> 
{* cycle plugin for teaser slide and news scroller *}
<__script__ type="text/javascript" src="uploads/quattro/js/jquery.cycle.all.min.js"></__script> 
<__script__ type="text/javascript">
{* jquery cycle plugin functions, get loaded only if header slider/teaser is activated, see http://malsup.com/jquery for more parameters *}
{literal}
jQuery(function(){
$('.teaser').cycle({ 
    fx:     'scrollRight', 
    speed:   600, 
     cleartype:  0, 
    timeout: 8000, 
    next:   '#next', 
    prev:   '#prev'
    }); 

$('.description').cycle({ 
    fx:     'fade', 
    speed:   600,
    cleartype:  0,  
    timeout: 8000, 
    next:   '#next', 
    prev:   '#prev'
    }); 
}); 
{/literal} 
</__script> 

Now you need Stylesheet part (should be actually commented enought to find the right part) to or all of the above code will just look

Code: Select all

/* SLIDER / TEASER */

/* pageTeaserOuter is used for the shadow below the image */
.pageTeaserOuter {
	height: 290px;
	background: transparent url([[root_url]]/uploads/quattro/pageTeaserBG.png) no-repeat bottom;
}
.pageTeaserInner {
	width: 936px;
	height: 256px;
	background: #ebeaea url([[root_url]]/uploads/quattro/teaserLoader.gif) no-repeat 50% 50%; /* we add a background image as preloader */
	border: 2px solid #fff;
        position:relative;
}

.teaser {
       width:926px; 
       height: 246px;
       margin:5px;
       overflow:hidden; /* hide content that exceeds this area if js is turned off */
}

/* description is used for image title and comment in teaser on the left side */
.description {
       position:absolute;
       bottom:0;
       left:0;
       width: 280px;
       height:226px;
	background: #233a58;
       opacity: 0.7;
       filter: alpha(opacity = 70);
       z-index:120;
       margin:5px;
       padding:10px;
       overflow: hidden;
       }

.description h3 {
       font-size: 1.8em;
       color:#ebeaea;
       padding:10px;
 }

.description p {
      padding:10px;
      color: #fff;
}

/* arrows for teaser */
span#next, span#prev {
      text-indent: -9999em;
}

span#next {
      width:22px;
      height:24px;
      background: url([[root_url]]/uploads/quattro/sliderRight.png) no-repeat;
      position:absolute;
      right: -50px;
      top:118px
}

span#prev {
      width:22px;
      height:24px;
      background: url([[root_url]]/uploads/quattro/sliderLeft.png) no-repeat;
      position:absolute;
      left: -50px;
      top:118px;}

Thats it all parts that you need to get this thing working in some other template are pasted above.

I have tried to figure out (without any luck) on how to add columns to the page using the quattro simple theme.
I would use a different theme altogether, but i need the banner at the top. I have tried to add the banner feature to a different theme, but that was a waste of three hours of my sanity.
I am by no means a php guru or even an advanced user for that matter. I can cut and paste with the best of them, but alas, I am Capt. Fail on this project.

To be honest, if you have no xhtml/css knowledge you should either look for a professional or use ready made templates without screwing up the code, at the end you have wasted 100 hours of your life but the website itself probably wont work yet and you will need a professional anyway.

[Tanzbär]

@uniqu3: That was a very thorough, considered and friendly post. Thank you very much.

That's the kind of answers I hope for in a functional community

I have learned a lot about the Quattro theme here, thanks again.

[wlr2]

Uniqu3,

To echo Tanzbär's post, Dankeschön!

Your explination has helped greatly.

Wayne

[M@rtijn]

~Cleaned up the thread

I"m happy that your problem got solved.