Widget "Custom Variations"
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, widget variations are basically CSS class names. You could insert any name you choose then use it to apply different styling to widgets that use that variation.
Usually our club themes will use variations like nomargintop - which removes the top margin from the widget, or other things along those lines. It's basically just a CSS hook. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, in the basic Gantry theme there are no widget variations that exist, so you would need to create them by adding new codes. Just as long as the codes are in one of the CSS files that the theme loads - the files in the css folder of the theme - style1.css for example, it will be applied. Since there is no existing CSS, there is nothing to interfere with new styles you create - so it doesn't really matter where you put them, just as long as they load on the page.
For example, in the Visage theme, the variations are used in different ways. The header text on the front page uses a variation of intro, then that name becomes a hook (or class name identifier) that is placed in the class of a containing div. The class is used to target the text inside with a descendant selector to apply a different style to it. See attached screenshot.
I wrote this article that covers using descendant selectors and some other basic CSS techniques, check it out if you need more info about how what I'm describing works.
www.rockettheme.com/magazine/1406-basic-...tion-and-positioning - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- WiltshireChilli
- Jr. Rocketeer
- Posts: 30
- Thanks: 0
-
Hi Cliff,
I've been trying to create a custom variation to a RokSproket Mosaic on my front page. Basically I want to adjust
.sprocket-mosaic-item .sprocket-mosaic-image {width: 100%;position: relative;z-index: -1;}
to
.sprocket-mosaic-item .sprocket-mosaic-image {width: 60%;position: relative;z-index: -1;}
but only on the Mosaic on the front page.. Am I barking up the wrong tree with Custom Variations?
Many thanks
Jamie
-
-
-
- John Rozzo
- Rocketeer
- Posts: 63
- Thanks: 1
- @WiltshireChilli: Although I'm not sure what you can use for Joomla, perhaps you can use the Widget Logic plugin for Wordpress, which offers parameters including per-page publication of a widget/module.
- Products, services and sites for growing communities.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
You use CSS in the same way, just with the home page body class. For example:
.home .sprocket-mosaic-item .sprocket-mosaic-image {width: 60%;position: relative;z-index: -1;}
That code will work in most cases, but it depends on how your site is set up. Use a web inspector to find a body class for the page.
Also, Widget Logic is not a good choice for Gantry, since we have the page override system built in it is unnecessary and causes conflicts in some cases. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- John Rozzo
- Rocketeer
- Posts: 63
- Thanks: 1
- Good to know about Widget Logic. Thanks.
- Products, services and sites for growing communities.
-
Time to create page: 0.041 seconds