QuattroSimple - New custom CMSMS Theme

[jwaiv]

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]

Search for this part in Stylsheet:

Code: Select all

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]

Hmm, the closest code I could find is:

Code: Select all

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]

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

Code: Select all

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: Select all

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]

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]

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]

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]

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

Code: Select all

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: Select all

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]

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]

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

Code: Select all

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

[IMNB]

Hi and thanks for a great template!

My problem is that the sidbar navigation doesn't show at all.
The $page_alias is there in the tpl.

This is my error msg

Code: Select all

 string(84) "Smarty error: unable to read resource: "module_db_tpl:MenuManager;sidebarNavigation""

This is the section in my tpl

Code: Select all

        <div class="grid_3 pageSidebar"> 
{* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}
          <div id="search" class="core-float-right"> 
            {search searchtext=" " search_method="post"}  
          </div> 
{* End Search *} 
<div class="grid_3 pageSidebar">
         {* show submenu of current page if there is one *}
 {menu template="sidebarNavigation" childrenof=$page_alias} 

         {* show latest news *}
         {if $snews == "+"}
         {news summarytemplate="sidebarNews" number="9"}
         {/if}
         {* Custom sidebar content *}
         {if isset($scontent)}
         {$scontent}
         {/if}
        </div>
        {else}
        <div class="grid_12">
          <h2>{$pagetitle}</h2>
            {$capturedcontent} 
        </div>
      {/if}
      </div>

This is where the test site is http://www.batmanstorpet.se Advanced Content is active. The site map (webbkarta) is from your BizBuz template.

I know some html and CSS, but no javascript.

Very greateful for help because when asking visitors they seem to need the sidebar sub page navigation.
/Inga

[uniqu3]

Did you read README file?

Error says:

Code: Select all

string(84) "Smarty error: unable to read resource: "module_db_tpl:MenuManager;sidebarNavigation""

That means that MenuManager Module is unable to find Menu template named sidebarNavigation.
In one of the files there is a code for this Template, copy that go to MenuManager module, create new Menu template named sidebarNavigation and paste that code, or look at available Template in MenuManager, maybe there is already something like theme: sidebarNavigation then all you need to do is change {menu template="sidebarNavigation" childrenof=$page_alias} to {menu template="theme: sidebarNavigation" childrenof=$page_alias}

[IMNB]

Hi there

Thanks for a very quick and cogent reply. I did as you wrote and the Navigation appears as it should. (You have mentioned the missing

Code: Select all

"theme: 

" in this thread. I should have tested it.)

Added a bit of CSS to get the sub pages indented like you have for the footer menu on your demo site.

/Inga

[IMNB]

Hi again

The sidebar menu title "Navigation" is in English and I need to translate it into a swedish word, but cannot find where to change it. I've looked in the Quattro Simple template, the two CSS, the sidebarNavigation and three .js files.

Looking at the page code doesn't help me.


Help please.
/Inga

[uniqu3]

could be MenuManager template.