Help with increasing the number of color boxes

More
3 years 5 months ago #9008 by omojesu
omojesu created the topic: Help with increasing the number of color boxes
I am trying to add an extra color box to the default three on the home page. I looked into the css to determine which code controls the number of boxes (jm-content-top modules) in the .row-fluid class. While, I can reduce the width of the boxes (.span4 - 33.333%) to 25%, the extra color box I added stays on a new row and does not display on the same row as the default 3 even though there is more than enough space to accommodate it. All boxes are set to float left in the code

.row-fluid .span4 {
width: 25%;
}

Thanks

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #9013 by marcin
marcin replied the topic: Help with increasing the number of color boxes
Hello,

You do not need modify css styles. If you want to display 4 modules in a row, it is enough to change the Bootstrap size option from "4" to "3" for all modules that you want to display in one row on the same module position. More details in this article:
www.joomla-monster.com/blog/joomla-3-0/h...ootstrap-size-option

Regards,
Marcin

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #9015 by omojesu
omojesu replied the topic: Help with increasing the number of color boxes
Thank you a million times...

marcin wrote: Hello,

You do not need modify css styles. If you want to display 4 modules in a row, it is enough to change the Bootstrap size option from "4" to "3" for all modules that you want to display in one row on the same module position. More details in this article:
www.joomla-monster.com/blog/joomla-3-0/h...ootstrap-size-option

Regards,
Marcin

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #9292 by scuriza
scuriza replied the topic: Help with increasing the number of color boxes
Hi,
I'd like to increase the number of colour boxes including a 4th option of a colorbox.
I just copied the 3rd one to another style and rename it to color-box4, ok, it's easy until here.
But the variable to use another color in the new color-box (4) is not defined anywhere.
How I insert this variable in the colors configuration page? Example bellow...

...Color Box 3 [#f78145]
...Color Box 4 [#2dcc74] --> new entry.

Tks,
Alexandre Scuriza

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago - 3 years 1 month ago #9294 by marcin
marcin replied the topic: Help with increasing the number of color boxes
Hello,

In modules.less file you will find the part of styles that you need to copy and paste into the custom.less file:



1) You need to change the class.
2) You need to change the name of the less variable. For the new variable you can assign a new color in the template_variables.less, for example:
@JMcolorBox4Background: #ff0000;

3) You need to change the image path if you want to use a new image for the 4th box.

More about custom.less:
www.joomla-monster.com/blog/customizatio...sed-on-ef4-framework

Please remember to import the variables and mixins at the top of the custom.less file:
/* ====================
   VARIABLES import
   ==================== */
   
@import "template_variables.less";
@import "bootstrap_variables.less";
  
/* ====================
   MIXINS import
   ==================== */
  
@import "override/ltr/mixins.less";
@import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins
@import "template_mixins.less";
Attachments:
Last Edit: 3 years 1 month ago by marcin.

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #9545 by Jadzia
Jadzia replied the topic: Help with increasing the number of color boxes
Hi

Great instructions, thank you. When I hover over the newly created box the icon changes colour but the border disappears and doesn't load the box background colour as a border. All the code is changed as per your instructions with the variable stating the new colour.

Any suggestions?

Please Log in or Create an account to join the conversation.

Time to create page: 0.297 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2018 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.