0
Welcome Guest! Login
0 items Join Now

Create more Box module variations

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3218
    • Custom work done

    Create more Box module variations

    Posted 2 years 8 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

    • minig's Avatar
    • minig
    • Jr. Rocketeer
    • Posts: 36
    • Thanks: 0

    Re: Create more Box module variations

    Posted 2 years 8 months ago
    • Great DanG

      Many thanks for this.
  • Re: Create more Box module variations

    Posted 2 years 1 week 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
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 16996
    • Thanks: 872
    • Web Designer and Host

    Re: Create more Box module variations

    Posted 1 year 8 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 8)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.
    • Oksana's Avatar
    • Oksana
    • Newbie
    • Posts: 5
    • Thanks: 0

    Re: Create more Box module variations

    Posted 1 year 6 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?
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 16996
    • Thanks: 872
    • Web Designer and Host

    Re: Create more Box module variations

    Posted 1 year 6 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 8)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.
    • Oksana's Avatar
    • Oksana
    • Newbie
    • Posts: 5
    • Thanks: 0

    Re: Create more Box module variations

    Posted 1 year 6 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.
    • Nobs's Avatar
    • Nobs
    • Rocketeer
    • Posts: 80
    • Thanks: 0

    Re: Create more Box module variations

    Posted 1 year 5 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 8)

      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
    • ======> Hot STUFF!
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3218
    • Custom work done

    Re: Create more Box module variations

    Posted 1 year 5 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 8)

      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
  • Re: Create more Box module variations

    Posted 3 months 3 weeks 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 8). 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: 3 months 3 weeks ago by 1980Maximus.

Time to create page: 0.363 seconds