Menu Class Suffix
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Again, you're not writing the CSS correctly. The "box3" and "title3" are also class names - meaning they need a dot before their name - which is missing from your code. No CSS you put in the brackets there will do anything because the elements are not correctly indicated.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Thanks Cliff, following your indication about classes, I wrote this:
.rt-grid-4 .rt-omega .rt-block .box3 {
background: url('..images/patterns/myimage.png') !important;
}
I omitted title3 because that is no longer in my module class suffix; but, in spite of the dots, the new code doesn't work
Could you please show me an example of a correct coding to apply the background (image or color) to the module?
Thanks a lot !!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
In your image path, you need a slash after the two dots. That's why it's transparent - the code is working - but your image path is incorrect - nothing shows because there is no image at the URL you have specified.
You need to be using a web inspector to check for errors in the error console. This will come up as a 404 error. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Ok, now I added the slash in my image path and the background image is correctly displayed..but in all boxes!! (see image)
This image is hidden for guests.
Please log in or register to see it.
I want to add it only in the third one...the "LESS is More" box.
Using Firebug I can see that the properties for
.rt-grid-4 .rt-block
are inherited by my custom.css file, but those of box3 are inherited by the master.css of gantry
How can apply the background image ONLY to the last module on the right side of the page??
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, this is how CSS works. Think about your code - you're applying a style to all boxes that are in a grid-4 layout with the box3 suffix. All other modules in that configuration will have that style as well.
There are a couple ways to get around it. The easiest way is to change the module class suffix to something other than box3, then change your CSS code to use that class instead of box3. There are other ways, like using another parent identifier that is specific to that module only, but depending on the layout that may not be possible.
I posted this link earlier in this thread. I recommend you read it. I talk about all of this:
www.rockettheme.com/magazine/1406-basic-...-positioning#floats2 - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Thanks, Cliff; I've gone through your article about CSS, I tried again to write a rule about a new module class suffix, named "miostile", but I failed again: clearly this is far beyond my capabilities and I must give up
Thanks anyway!!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Go in to the module settings - change the suffix to miostile. Then in your css code, replace .box3 with .miostile - that's all you have to do.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Well, I went into joomla-module management- and in "Less is more"module - advanced options -"module class suffix" I wrote "miostile"
then in my custom.css I wrote:
.rt-grid-4 .rt-omega .rt-block .miostile {
background: url('../images/patterns/myimage.png') !important;
}
I cleaned the cache and...nothing!! I'm at a loss!!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Try this:It doesn't have to be anymore complicated than that. Since you've created a new suffix, the code will only be applied to modules that use it.
.miostile { background: url('../images/patterns/myimage.png') !important; }
Not sure why you added the .rt-omega - that wasn't in any of your code before - but you added it incorrectly. When you're using the web inspector looking at the classes, if an element has more than one class name usually only one of them is needed in most cases. If you need to use them both to specifically identify that element do not put a space between the names. So this code would also work:The rt-omega class is applied to the grid element, and module suffixes are added to rt-block - so there are only 2 elements. Your original code is looking for your suffix inside an rt-block that is inside an rt-omega that is inside a grid-4. In reality - there are only 2 elements that share 4 class names - not 4 separate ones. Make sense?.rt-grid-4.rt-omega .rt-block.miostile { background: url('../images/patterns/myimage.png') !important; } - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Thanks, Cliff
unfortunately none of the codes you gave me did the work; I copied/pasted them in my custom.css, not to mess with blank space, dots and so on, but in spite of this I can't have the background image.
I used rt-grid-4 rt-omega because according Firebug this is referred to the third module, while rt-grid-4 is for the second module and rt-grid-4 rt-alpha is for the first one, so I thought that adding rt-omega the rule was to be applied only to the third module, but...
The odd thing is I can't even change the color of the background, because I don't find the right place to apply this rule to the third module only!
-
Time to create page: 0.061 seconds