Menu Class Suffix
-
-
- John Rozzo
- Rocketeer
- Posts: 63
- Thanks: 1
-
Based on this similar post & thread:
www.rockettheme.com/forum/index.php?f=20...pic&p=873652#p864410
I had this same problem. The dilemma I/we face is that noone on the Gantry Framework site does it provide a reference or list of any menu class suffix for the Gantry Template. It would be nice to have specific info about the built-in, possible classes. Henning's link is to module Clarion - or are those standard in Gantry? or RokNavmenu? or theme-specific?
Furthermore, it's not a simple matter of editing the template.css file - in Gantry, RT has created a superior, but different, method for output/display.
If there is a built-in way to have a menu in one Gantry's footer module position display the way it might in another module position, then that would be a great timesaver; I just didn't find any reference to that, and "horizmenu" didn't generate a horizontal menu.
Thanks. - Last Edit: 12 years 1 month ago by John Rozzo.
- Products, services and sites for growing communities.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, the default Gantry template itself does not have much in the way of module class suffixes. It's built so you can add those yourself as you need them. Unlike our club releases which are fully featured with styling options, typography and all the bells and whistles we can fit in there.
Module class suffixes are just CSS styles. The suffix generates a div class name applied to the module, then styles are applied to the elements inside that div, and can be styled anyway you like. It is just a matter of editing CSS. template.css no longer exists, but instead you'll create your own LESS style sheet to override styles - which is better for a lot reasons. See this link, scroll all the way to the bottom for how to do that: www.gantry-framework.org/documentation/joomla/advanced/less-css
The thing to remember about the Gantry template is that is a bare bones template - very few styles and features are built into it. It's intended for custom template developers who want to start from scratch with nothing in the way and only put in what they need. It not intended to presume which styles or method you will use to do this. Everything that is possible in our club templates is possible there - but we leave all the work to you.
A good place to start if you're new to the process is to copy and paste codes and features from club templates to see how it all works together. If speedy development and built in styles is what you need, you might wish to start with a club template and customize it instead of starting from scratch. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- John Rozzo
- Rocketeer
- Posts: 63
- Thanks: 1
-
Thanks, Cliff - your answer is very helpful!
Although I see that there are limited module class suffixes in the default template, and which are documented in the Gantry demo site, I was wondering if there is any documentation for any the *menu* class suffix ....do you have any info about those? - Products, services and sites for growing communities.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, the menu class suffix is the same concept as the module class suffix, just applied to a menu. It allows you add another class name to or change the style of the menu and the items contained within it. None of our products really use that too much, there are enough class names and div id's in the positions, menus and menu items themselves that it's usually not required to have that.
Remember that in CSS - the C stands for Cascading. The concept of a suffix in Joomla is to create a "parent" class, then styles can be applied to the elements inside - the "children" elements. You only need one class name or div id to apply individual styles to the elements inside. All menus in Joomla have a class name of "menu" already - which can be used to style it inside a of a position as well. RokNavMenu also uses it's own class names for each level of the menu. And our module chroming adds additional class names around positions in the template that use menus.
The point of all of this is that there are many ways to add styles, the suffixes simply provide one more css hook to use. I wrote an article discussing some of these concepts a while back - you might want to check it out:
www.rockettheme.com/magazine/1406-basic-...-positioning#floats2
That link jumps you down into the article a bit, where I get into using class names and descendant selectors. That's what module and menu suffixes are all about. Let me know if you have more questions - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- John Rozzo
- Rocketeer
- Posts: 63
- Thanks: 1
- Thanks for the guidance & tips. I'll take a look and continue experimenting.
- Products, services and sites for growing communities.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
I too need to customize gantry default template; I'm trying to change the background of the module titled "LESS is more"; I used a box3 title3 in module class suffix, but as for the background...I got lost.
I tried to add this rule in my gantry-custom.css:
#rt-grid-4 .rt-block {
background: url('..images/patterns/myimage.png'); !important;
}
but it didn't work
Any idea??
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, you have an error in your code - the semi colon goes after the !important only, and you have one before it as well.
Other than that, I'd need to see a link to offer advice. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Hi Cliff and thanks for your fast reply. I'm on local, so no link to post, but here is a screenshot with the problem
http://www.rosariofiorito.com/images/stories/modulo.jpg
This image is hidden for guests.
Please log in or register to see it.
I'm trying to change the background of the module titled "Less is More", the last on right side of the page, in maintop-c position, which at present has this module class suffix: box3 title3
I'd like to have the same pattern I used as background of showcase module, but till now no luck in setting it.
Firebug tells me this about the "LESS is More" module:
<div class="rt-grid-4 rt-omega">
<div class="rt-block box3 title3 ">
Obviously I'm working on default Gantry template - preset3 -
THANKS!!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, one thing it could be is that you're using #rt-grid... - the # indicates an ID, the grid elements are all classes - it should be a dot instead of #. Any element on the page that can be repeated is a class, like .rt-block, .rt-grid-x ECT. Only elements that appear once use an id - like #rt-header or #rt-footer. Your code is targeting an element that doesn't exist so it's not going to work no matter what properties you put there.
That's two coding errors in one line of your code that we've found, you might want to brush up on CSS syntax. There is a lot to learn, but with coding, if it's not perfect it won't work. Typo's are the number one reason CSS doesn't work a lot of times. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Hi Cliff, coding is really terrible to me and your explanations are very useful; now I've clear the difference between # and . symbols.
I wrote this:
.rt-grid-4 .rt-block {
background: url('..images/patterns/myimage.png') !important;
}
and the background of the module is now transparent (see attached image)
This image is hidden for guests.
Please log in or register to see it.
if I write:
.rt-grid-4 .rt-block box3 title3 {
background: url('..images/patterns/myimage.png') !important;
}
I have the background of my first image, that is a pale grey color ...
it looks like I miss the right place where to specify the background properties
-
Time to create page: 0.066 seconds