Quasar: Possibility to add extra icon class suffixes
-
-
- Renzo Lunenberg
- Newbie
- Posts: 5
- Thanks: 0
- Is it possible to add extra icons and icon class suffixes for modules? I like the look on the demo website, but I need more than 4 icons. Please help.
-
-
-
- Sean Habing
- Elite Rocketeer
- Posts: 1028
- Thanks: 1
-
Hello,
I dont see why you cant add more icons and classes to the site. I believe its just some css and such.
Cheers
-
-
-
- Scott Macleod
- Newbie
- Posts: 4
- Thanks: 0
-
Module Variations allow for the individual styling of each module within a position, without it being global. Code wise, this is achieved by adding a class into the module code which loads from the Module Class Suffix field in the Module Manager. The theme CSS adjusts accordingly.
Enter any available suffixes at Extensions ? Module Manager ? Module ? Module Class Suffix
There are 4 standard suffixes: icon1, icon2, icon3 & icon4; applicable to the maintop, mainbottom, content-top, content-bottom, footer and sidebar positions.
To extend the range of the Class Suffixes to enable another 4 icons making a total of 8 available, we can edit the png image file and add some extra css.
Note: This example is using the "Style3".
1. Download the module-icons.png file from /templates/rt_quasar_j15/images/body/style3/module-icons.png and open it in Fireworks. Create a new png file twice the height of the original with the icons from the original file in the same position (at the top) in the new file, then add your new icons and save, then upload the file replacing the original module-icons.png taking note of which theme variation you are using.
2. Edit the /templates/rt_quasar_j15/css/style3.css file and find:
/* Modules */
.icon1 .module-icon, .icon2 .module-icon, .icon3 .module-icon, .icon4 .module-icon {background-image: url(../images/body/style3/module-icons.png);background-repeat: no-repeat;}
Add the references for icon 5,6,7 and 8, the css should now look like this:
/* Modules */
.icon1 .module-icon, .icon2 .module-icon, .icon3 .module-icon, .icon4 .module-icon, .icon5 .module-icon, .icon6 .module-icon, .icon7 .module-icon, .icon8 .module-icon {background-image: url(../images/body/style3/module-icons.png);background-repeat: no-repeat;}
3. Edit the /templates/rt_quasar_j15/css/template.css file and find:
/* Modules */
.module-title {margin: 15px 0;}
h2.title {display: block;letter-spacing: normal;line-height: 1em;margin: 0;}
.flush .rt-block {padding: 0;}
.icon1 .module-surround, .icon2 .module-surround, .icon3 .module-surround,
.icon4 .module-surround {padding-left: 60px;position: relative;}
.module-icon {width: 45px;height: 41px;position: absolute;left: 0;top: 0;}
.icon1 .module-icon {background-position: 0 0;}
.icon2 .module-icon {background-position: 0 -44px;}
.icon3 .module-icon {background-position: 0 -87px;}
.icon4 .module-icon {background-position: 0 -129px;}
Add the references for icon 5,6,7 and 8, the css may now look something like this:
/* Modules */
.module-title {margin: 15px 0;}
h2.title {display: block;letter-spacing: normal;line-height: 1em;margin: 0;}
.flush .rt-block {padding: 0;}
.icon1 .module-surround, .icon2 .module-surround, .icon3 .module-surround, .icon4 .module-surround, .icon5 .module-surround, .icon6 .module-surround, .icon7 .module-surround, .icon8 .module-surround {padding-left: 60px;position: relative;}
.module-icon {width: 45px;height: 41px;position: absolute;left: 0;top: 0;}
.icon1 .module-icon {background-position: 0 0;}
.icon2 .module-icon {background-position: 0 -44px;}
.icon3 .module-icon {background-position: 0 -87px;}
.icon4 .module-icon {background-position: 0 -129px;}
.icon5 .module-icon {background-position: 0 -172px;}
.icon6 .module-icon {background-position: 0 -215px;}
.icon7 .module-icon {background-position: 0 -258px;}
.icon8 .module-icon {background-position: 0 -301px;}
May be mistaken so check please...
Hope that helps!
-
Time to create page: 0.054 seconds