RocketTheme - TOPIC: Create more Box module variations

Welcome Guest! Login

0 items Join Now

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Create more Box module variations

Posted 8 years 10 months ago

So it seems some users to need more than the Box1-4 that most of our templates come with.

I used Vermilion but this works on any template. So lets start:

1) Go to [JOOMLA-ROOT]\templates\rt_templateName\less and create a new custom LESS file called "template-custom.less"
2) Paste this code inside that file:

/**
 * @version   $Id: template-custom.less DanG $
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2015 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */

// Custom Box Variations
	.box5 {
		color: @white;
		background: #F2550F;
		&.title1 {
			.module-title {
				.tintBackground(@accent-color1, 25%);
				.textColor(@accent-color1);
			}
		}
		a:not([class^="readon"]) {
			.textColor(@accent-color1);
			&:hover {
				color: inherit;
			}
		}
		.readon {
			.buttonStyleFlat(inherit, transparent, 3px);
			border: 2px solid;
		}
	}
	.box6 {
		color: @white;
		background: #D38506;
		&.title2 {
			.module-title {
				.tintBackground(@accent-color2, 25%);
				.textColor(@accent-color2);
			}
		}
		a:not([class^="readon"]) {
			.textColor(@accent-color2);
			&:hover {
				color: inherit;
			}
		}
		.readon2 {
			.buttonStyleFlat(inherit, transparent, 3px);
			border: 2px solid;
		}
	}
	.box7 {
		color: @white;
		background: #38D5C5;
		&.title3 {
			.module-title {
				.tintBackground(@accent-color3, 25%);
				.textColor(@accent-color3);
			}
		}
		a:not([class^="readon"]) {
			.textColor(@accent-color3);
			&:hover {
				color: inherit;
			}
		}
		.readon3 {
			.buttonStyleFlat(inherit, transparent, 3px);
			border: 2px solid;
		}
	}
	.box8 {
		color: @white;
		background: #113D68;
		&.title4 {
			.module-title {
				.shadeBackground(@header-background, 25%);
				.textColor(@header-background);
			}
		}
		a:not([class^="readon"]) {
			.textColor(@header-background);
			&:hover {
				color: inherit;
			}
		}
	}

For convenience I still using the mixin variables like " @white". If you need to change any of these than just replace it with a fixed value like "#FFFFFF". Uses your new Boxes just as you did with the originals.

If you need more than four new Box classes just follow the format in the "template-custom.less" file.

So here are our new Box5-8 variations:

This image is hidden for guests.
Please log in or register to see it.

The following users have thanked you: minig, Klemen Gersak

#1211779

- minig
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
Re: Create more Box module variations

Posted 8 years 10 months ago
- Great DanG
  
  Many thanks for this.
#1211841
- Xochipala Maes Valdez
- Newbie
- Posts: 10
- Thanks: 0
Re: Create more Box module variations

Posted 8 years 2 months ago
- Greetings,
  Should this work for Gantry 5? I followed the instructions, but I do not see the choices for the new boxes when I am making changes to the particle in layout section of Gantry.
  Thanks,
  Xochi
#1271544
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: Create more Box module variations

Posted 7 years 10 months ago
- Hi there,
  
  This will not work for Gantry 5 templates as they are completely different.
  
  If you need assistance with Gantry 5 issues then please start a new thread in the appropriate board
  
  Thanks for your patience
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
#1295714
- Oksana
- Newbie
- Posts: 7
- Thanks: 0
Re: Create more Box module variations

Posted 7 years 8 months ago
- Hello,
  Somehow it doesnt work on chimera template. I create a file and copy the code. Than i save the file and get the message
  
  You should compile /less/chimera-test_2-custom.less to generate a CSS file.
  File successfully saved.
  
  but when i press "compile less" it says
  
  Error
  
  variable @accent-color1 is undefined: failed at `.tintBackground(@accent-color1, 25%); ` /var/www/html/site/templates/chimera-test_2//less/chimera-test_2-custom.less on line 15
  An error occurred. Failed to compile.
  
  Without compiling it doesnt work anyway. What could be the reason?
#1308896
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: Create more Box module variations

Posted 7 years 8 months ago
- Hi there,
  
  You have to use the correct path name. You cannot call your file chimera-test_2-custom.less as there is no template called chimera-test_2.
  
  You MUST name the file template-custom.less and save it to the directory templates/rt_chimera/less/
  
  Hope this helps
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
#1308899
- Oksana
- Newbie
- Posts: 7
- Thanks: 0
Re: Create more Box module variations

Posted 7 years 8 months ago
- You cannot call your file chimera-test_2-custom.less as there is no template called chimera-test_2.
  
  Well, when i started work i copied the whole template under the name chimera-test_2 and assined to the site that copy. I make all changes there. It may look strange, but i knew nothing about site-making (and still cutting my way through it)), so i wanted to have the oginal near as a backup in case i do something wrong (which actually happend a couple of times).
  
  What worked for me now regarding custom boxes, is to add .box5 in original less file under the .box4.
#1308903
- Norbert Graup
- Rocketeer
- Posts: 82
- Thanks: 0
Re: Create more Box module variations

Posted 7 years 7 months ago
- David Goode wrote:
  Hi there,
  
  This will not work for Gantry 5 templates as they are completely different.
  
  If you need assistance with Gantry 5 issues then please start a new thread in the appropriate board
  
  Thanks for your patience
  
  I haven´t found another thread for Gantry 5 but I would be glad if there would be some assistance available to create more box variations with Gantry 5.
  
  Thanks!
  
  Nobs
#1313304
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Create more Box module variations

Posted 7 years 7 months ago
- Nobs wrote:
  David Goode wrote:
  Hi there,
  
  This will not work for Gantry 5 templates as they are completely different.
  
  If you need assistance with Gantry 5 issues then please start a new thread in the appropriate board
  
  Thanks for your patience
  
  I haven´t found another thread for Gantry 5 but I would be glad if there would be some assistance available to create more box variations with Gantry 5.
  
  Thanks!
  
  Nobs
  
  For some insights on creating your own "Box Block Variations" please see the guide
  G5 - Block Variations versus G4 Module Variations
#1313653
- 1980Maximus
- Jr. Rocketeer
- Posts: 30
- Thanks: 0
Re: Create more Box module variations

Posted 6 years 5 months ago
- Hello Dan,
  
  I was very happy finding this thread. I created a new custom LESS file called "template-custom.less and copied your code and put in the LESS folder.
  
  I am a very happy user of the the Ionosphere template. As ionosphere has 1-8, I replaced your 5-8 with 8-11 (as I don't use the currenr . I tried all of them, but non of them provides the colors / stlyes like in your example. Obviously I make a mistake somewhere/somehow
  
  Error: .tintBackground is undefined: failed at `.tintBackground( #FFFFF , 25% );` /home2/domain/public_html/templates/rt_ionosphere_responsive//less/template-custom.less on line 14
  An error occurred. Failed to compile.
  
  Would you be so kind to provide me with an indication where to look or what to change? At request I can of course provide you with my login details so you can look over my shoulder, which would be very much apprciated. I am more than willng to learn
  
  Best regards, Mark
- Last Edit: 6 years 5 months ago by 1980Maximus.
#1365987