QuattroSimple - New custom CMSMS Theme

netfied · **Posted:** Mon May 30, 2011 8:49 pm

Goran

I had expressed interest of using the news slider effects of Quattro on BigBuzz. Unfortunately I can't find the post thats why im posting it here. but you had told me to study the Functions Scripts. I found the area controlling the news and replaced it with

Code:

// Split articles
$.fn.splitUp=function(splitBy,wrapper){
    $all= $(this).find('>*');
    var fragment=Math.ceil($all.length/splitBy);
    for (i=0;i<fragment;i++)
        $all.slice(splitBy*i,splitBy*(i+1)).wrapAll(wrapper);
    return $(this);
}

$('.sidebar-news')
    .splitUp(7,'<div/>') // you can change the number 3 to any number of news you want to scroll
    .cycle({ 
    fx:     'scrollUp', 
    speed:   600, 
    timeout: 12000
    });                            
}); 
  

from Quattro Functions.js

But Nothing happens the news are not even animating [url]aeromarine.co.ke[/url]

uniqu3 · **Posted:** Mon May 30, 2011 9:16 pm

You should also look at the markup/template of that news template, it is not animating as js targets for class .sidebar-news but i dont see any in your source code.

You should also look at number of jquery plugins you use, wow thats allot and you use jquery twice, remove the one from bottom.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

netfied · **Posted:** Tue May 31, 2011 8:09 am

Sorry about that I normally work on localhost before i put my work online. I have done as you asked.

removed <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Created a default newsSummary template

Code:

<ul class="sidebar-news">{foreach from=$items item=entry}
<li><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}<br /><span>Posted {if $entry->postdate}on {$entry->postdate|cms_date_format}{/if}</span></a>
</li>
{/foreach}
</ul>

but if I put the code in the functions.js still the news dnt animate and the pictures stop sliding.

DADOCTOR · **Posted:** Sun Jun 05, 2011 3:39 am

Hello,

I have almost finished working on the elements for my new home page,

I want to remove the "Home" page title that is displayed in the main content area.
I have titled my home page, "Home" which is want I want, but not displayed in the content area.

I have tried to do it but I think if I do it will remove the title display of all pages and I dont want that.

I only want this done on the home page?

Can I do this?

Regards
Ryan

uniqu3 · **Posted:** Sun Jun 05, 2011 5:11 pm

Where you have {title} (in template) or was it {$pagetitle} in quattro (dunno) simply do

Code:

{if $page_alias == 'home'}
{else}
  <h1>{title}</h1> {* or {$pagetitle} whatever is there in template *}
{/if}

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Hello,

Great template!

I've got it running locally while I try to understand both CMSMS and the template a bit more. I'm trying to make a basic modifcation but I'm having very little luck.

On the template I have removed pageTopBG.gif so the area surrounding the teaser is white. This has had the side effect of the text for the navigation menu blending into the background. I could chaneg the text colour, but I would prefer to have the nav button graphics (navLeft & navRight) show on all buttons all the time. At the moment they only show if the page is active or if I hover over the link.

I'm very new to this and can't quite get it to do what I want.

Thanks
John

uniqu3 · **Posted:** Thu Jun 09, 2011 4:54 pm

Search for this part in Stylsheet:

Code:

ul.sf-menu li a:link, ul.sf-menu li a:visited, ul.sf-menu li.sectionheader {
   display: block;
   padding-left: 10px;
   line-height: 68px;
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
}
ul.sf-menu li a:link span, ul.sf-menu li a:visited span, ul.sf-menu li.sectionheader span {
        padding: 40px 10px 0 0;
        line-height: 28px;
   display: block;
   float: left;
}
ul.sf-menu li a:hover, ul.sf-menu li a:active, ul.sf-menu li.sectionheader:hover, ul.sf-menu li a.current {
   background: url([[root_url]]/uploads/quattro/navLeft.png) no-repeat bottom left;
}
ul.sf-menu li a:hover span, ul.sf-menu li a:active span, ul.sf-menu li.sectionheader:hover span, ul.sf-menu li a.current span {
   background: url([[root_url]]/uploads/quattro/navRight.png) no-repeat bottom right;
}

Now add those background: ... to CSS above that has no background property.
This should do it.

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Hmm, the closest code I could find is:

Code:

ul.sf-menu li a:link, ul.sf-menu li a:visited, ul.sf-menu li.sectionheader {
   display: block;
   padding-left: 10px;
[[if ($color == 'orange') or ($color == 'black')]]
        line-height: 34px;
[[else]]
   line-height: 68px;
[[/if]]
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
}
ul.sf-menu li a:link span, ul.sf-menu li a:visited span, ul.sf-menu li.sectionheader span {
[[if ($color == 'orange') or ($color == 'black')]]
       padding: 4px 10px 0 0;
        line-height: 30px;
[[else]]
        padding: 40px 10px 0 0;
        line-height: 28px;
[[/if]]
   display: block;
   float: left;
}
ul.sf-menu li a:hover, ul.sf-menu li a:active, ul.sf-menu li.sectionheader:hover, ul.sf-menu li a.current {
[[if $color == 'green']]
        background: #175b0e;
        border-bottom: 2px solid #2b901e;
[[elseif $color == 'orange']]
        background: url(/site/uploads/theme/navLeft-orange.png) no-repeat bottom left;
[[elseif $color == 'black']]
        background: url(/site/uploads/theme/navLeft-black.png) no-repeat bottom left;
        color: #202020;
[[else]]
   background: url(/site/uploads/theme/navLeft.png) no-repeat bottom left;
[[/if]]
}
ul.sf-menu li a:hover span, ul.sf-menu li a:active span, ul.sf-menu li.sectionheader:hover span, ul.sf-menu li a.current span {
[[if $color == 'green']]
[[elseif $color == 'orange']]
        background: url(/site/uploads/theme/navRight-orange.png) no-repeat bottom right;
[[elseif $color == 'black']]
        background: url(/site/uploads/theme/navRight-black.png) no-repeat bottom right;
[[else]]
   background: url(/site/uploads/theme/navRight.png) no-repeat bottom right;
[[/if]]
}

I was unable to get it to work sadly, the menu just vanished all together.

Would it be possible to have nav buttons that are not currently selected or not currently being hovered over have another set of graphics (for example navLeftfaded & navRightfaded)?

Thanks
John

uniqu3 · **Posted:** Thu Jun 09, 2011 8:04 pm

As i don't know what color you are using i'll take blue as example:

Code:

ul.sf-menu li a:link, ul.sf-menu li a:visited, ul.sf-menu li.sectionheader {
   display: block;
   padding-left: 10px;
[[if ($color == 'orange') or ($color == 'black')]]
        line-height: 34px;
[[else]]
   line-height: 68px;
[[/if]]
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
  background: url(/site/uploads/theme/navLeft.png) no-repeat bottom left; /* <---- only part i changed is, added from ul.sf-menu li a:hover */
}

and

Code:

ul.sf-menu li a:link span, ul.sf-menu li a:visited span, ul.sf-menu li.sectionheader span {
[[if ($color == 'orange') or ($color == 'black')]]
       padding: 4px 10px 0 0;
        line-height: 30px;
[[else]]
        padding: 40px 10px 0 0;
        line-height: 28px;
[[/if]]
   display: block;
   float: left;
   background: url(/site/uploads/theme/navRight.png) no-repeat bottom right; /* <---- only part i changed is, added from ul.sf-menu li a:hover span */
}

That should work.
If you want different images, create it to your liking, cut it to same size as existing and change image name for background property.

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Hello,

Thank you for your help, I think i might be missing something though. I've attached an image of what i'm trying to do.

In the image, Home would be the page being browsed at the moment and Support just has the mouse hovering over it. The other tabs just use another set of images with other filenames.

Any ideas?

Thanks
John

uniqu3 · **Posted:** Thu Jun 09, 2011 8:59 pm

Did you read my reply?
In the pasted code above in my reply you change images to those you want to use in the css background property.

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Hello,

Indeed, I used the code and it does seem to work but it seemed to override one set of images. In the photoshoped image I posted, the following would be happening:

Home Tab: Current page being browsed (uses navright and navleft)
Support Tab: Mouseover (uses navright and navleft)
Other Tabs: Not being browsed and no mouse over (uses navrightFade and navleftFade)

Sorry if i'm being slow, i'm still learning a lot of this stuff

Is it possible to make it act as described and as show in the image?

Thanks again for your help

uniqu3 · **Posted:** Fri Jun 10, 2011 11:17 am

uniqu3 wrote:

As i don't know what color you are using i'll take blue as example:

Code:

ul.sf-menu li a:link, ul.sf-menu li a:visited, ul.sf-menu li.sectionheader {
   display: block;
   padding-left: 10px;
[[if ($color == 'orange') or ($color == 'black')]]
        line-height: 34px;
[[else]]
   line-height: 68px;
[[/if]]
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
  background: url(/site/uploads/theme/navLeft.png !!!!!!! <-----CHANGE THIS IMAGE TO YOUR NEW IMAGE!!!!) no-repeat bottom left; /* <---- only part i changed is, added from ul.sf-menu li a:hover */
}

and

Code:

ul.sf-menu li a:link span, ul.sf-menu li a:visited span, ul.sf-menu li.sectionheader span {
[[if ($color == 'orange') or ($color == 'black')]]
       padding: 4px 10px 0 0;
        line-height: 30px;
[[else]]
        padding: 40px 10px 0 0;
        line-height: 28px;
[[/if]]
   display: block;
   float: left;
   background: url(/site/uploads/theme/navRight.png !!!!!!! <-----CHANGE THIS IMAGE TO YOUR NEW IMAGE!!!!) no-repeat bottom right; /* <---- only part i changed is, added from ul.sf-menu li a:hover span */
}

That should work.
If you want different images, create it to your liking, cut it to same size as existing and change image name for background property.

http://www.w3.org/Style/CSS/learning

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Sorry, guess its just to early for me to understand at this stage

I'm only just starting out with this really. I might not even be explaining it clearly.

The code you posted, is that an addition or replacement to existing code?

Thanks for helping

jwaiv · **Joined:** Mon May 16, 2011 1:21 pm **Posts:** 10

Not sure if this is the right way to do it, but the following made it do what I wanted.

Code:

ul.sf-menu li a:link, ul.sf-menu li a:visited, ul.sf-menu li.sectionheader {
   display: block;
   padding-left: 10px;
   line-height: 68px;
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
  background: url(/site/uploads/theme/navLeftfade.png) no-repeat bottom left;
}

ul.sf-menu li a:link span, ul.sf-menu li a:visited span {
   padding: 40px 10px 0 0;
   line-height: 28px;
   display: block;
   float: left;
   background: url(/site/uploads/theme/navRightfade.png) no-repeat bottom right;
}

ul.sf-menu li a.current, ul.sf-menu li a:hover {
   display: block;
   padding-left: 10px;
   line-height: 68px;
   text-transform: uppercase;
   color: #ebeaea;
   font-weight: bold;
   float: left;
  background: url(/site/uploads/theme/navLeft.png) no-repeat bottom left;
}

ul.sf-menu li a.current span, ul.sf-menu li a:hover span {
   padding: 40px 10px 0 0;
   line-height: 28px;
   display: block;
   float: left;
   background: url(/site/uploads/theme/navRight.png) no-repeat bottom right;
}

Thanks again

QuattroSimple - New custom CMSMS Theme

Who is online