Problem adding an option to the template back-end
-
-
- Boradan
- Jr. Rocketeer
- Posts: 42
- Thanks: 0
-
Im trying to add another option to the template back end to basically set box-shadows around the modules.
I have got the back-end part set up, but cant for the life of me figure out how to call the parameters.
The back-end code in the template-options.xml is as follows:<fields name="block" type="chain" label="MODULE_STYLE"> <field name="shadow" type="selectbox" default="" label="SHADOW_STYLE" setinsession="true" setbysession="true" setincookie="true" setbycookie="true"> <option value="">Standard</option> <option value="inset">Inset</option> </field> <field name="shadowX" type="text" default="0" label="X_OFFSET" class="text-short"/> <field name="shadowY" type="text" default="0" label="Y_OFFSET" class="text-short"/> <field name="shadowblur" type="text" default="0" label="SHADOW_BLUR" class="text-short"/> <field name="shadowspread" type="text" default="0" label="SHADOW_SPREAD" class="text-short"/> <field name="shadowcolor" type="colorchooser" default="#090D10" label="SHADOW_COLOR" setinsession="true" setbysession="true" setincookie="true" setbycookie="true"/> <field name="shadowopacity" type="text" default="1" label="SHADOW_OPACITY" class="text-short"/> ***** a lot more options here regarding setting border size/color, background color etc**** </fields>
This works fine in the back-end and it all looks as it should:
This image is hidden for guests.
Please log in or register to see it.
(I still have SHADOW_BLUR etc because I havent defined them in the language ini file yet)
The problem that I am running into is that I have NO idea how to call the multiple options in styledeclaration.php
Unfortunately, unlike most other paramaters, the box-shadow doesnt have longhand, so I cannot call the inputs individually, I need to call them all in a group - actually, I probably need to call them 3 times for box-shadow, -webkit-box-shadow and moz-box-shadow.
I have no notion of how to string the inputs together to create a single output, so ANY assistance would be greatly appreciated
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- I have posted an example in the attachment hope this will help.
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Boradan
- Jr. Rocketeer
- Posts: 42
- Thanks: 0
-
I have done it slightly differently as the offsets, blur and spread all need to have 'px' after them, so I used a select box instead in the template-options.xml
Here is the code in the options:<fields name="boxshadow" type="chain" label="BOX_SHADOW"> <field name="shadowX" type="selectbox" default="0px" label="X_OFFSET" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true"> <option value="0px">None</option> <option value="1px">1 Pixel</option> <option value="2px">2 Pixels</option> <option value="3px">3 Pixels</option> <option value="4px">4 Pixels</option> <option value="5px">5 Pixels</option> <option value="6px">6 Pixel</option> <option value="7px">7 Pixels</option> <option value="8px">8 Pixels</option> <option value="9px">9 Pixels</option> <option value="10px">10 Pixels</option> </field> <field name="shadowY" type="selectbox" default="0px" label="Y_OFFSET" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true"> <option value="0px">None</option> <option value="1px">1 Pixel</option> <option value="2px">2 Pixels</option> <option value="3px">3 Pixels</option> <option value="4px">4 Pixels</option> <option value="5px">5 Pixels</option> <option value="6px">6 Pixel</option> <option value="7px">7 Pixels</option> <option value="8px">8 Pixels</option> <option value="9px">9 Pixels</option> <option value="10px">10 Pixels</option> </field> <field name="shadowblur" type="selectbox" default="0px" label="SHADOW_BLUR" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true"> <option value="0px">None</option> <option value="1px">1 Pixel</option> <option value="2px">2 Pixels</option> <option value="3px">3 Pixels</option> <option value="4px">4 Pixels</option> <option value="5px">5 Pixels</option> <option value="6px">6 Pixel</option> <option value="7px">7 Pixels</option> <option value="8px">8 Pixels</option> <option value="9px">9 Pixels</option> <option value="10px">10 Pixels</option> </field> <field name="shadowspread" type="selectbox" default="0px" label="SHADOW_SPREAD" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true"> <option value="0px">None</option> <option value="1px">1 Pixel</option> <option value="2px">2 Pixels</option> <option value="3px">3 Pixels</option> <option value="4px">4 Pixels</option> <option value="5px">5 Pixels</option> <option value="6px">6 Pixel</option> <option value="7px">7 Pixels</option> <option value="8px">8 Pixels</option> <option value="9px">9 Pixels</option> <option value="10px">10 Pixels</option> </field> <field name="shadowcolor" type="colorchooser" default="#090D10" label="SHADOW_COLOR" setinsession="true" setbysession="true" setincookie="true" setbycookie="true"/> <field name="style" type="selectbox" default="" label="SHADOW_STYLE" setinsession="true" setbysession="true" setincookie="true" setbycookie="true"> <option value=" ">Standard</option> <option value="inset">Inset</option> </field> </fields>
Unfortunately, when I select 'standard' instead of inset, I get an error :
Error: 500 - Less Parse Error: failed to parse passed in variable @boxshadowstyle:
I have tried it with both a space ' ' and simply '' - all to no avail. It still throws me the error.
In my style declarations I have it set up as:I have also tried a space or nothing for the boxshadowstyle and still get the same 500 error.$lessVariables = array( 'boxshadowX' => $gantry->get('boxshadow-shadowX', '0'), 'boxshadowY' => $gantry->get('boxshadow-shadowY', '0'), 'boxshadowblur' => $gantry->get('boxshadow-shadowblur', '0'), 'boxshadowspread' => $gantry->get('boxshadow-shadowspread', '0'), 'boxshadowcolor' => $gantry->get('boxshadow-shadowcolor', '#ffffff'), 'boxshadowstyle' => $gantry->get('boxshadow-style', ' '), );
In my less file, it is called as:.rt-block { box-shadow: @boxshadowX @boxshadowY @boxshadowblur @boxshadowspread @boxshadowcolor @boxshadowstyle; }
It works FINE if I select 'Inset' from the dropdown, but fails to pass an 'empty' box reading.
This is REALLY starting to annoy me now
Also, I would like to add an opacity option for the colour so as not to have the shadow too prominent.
Using css instead of less, it is called in styledeclaration.php by:$css .= '.rt-block {border-color:'.$this->_RGBA($gantry->get('boxshadow-shadowcolor'), $gantry->get('boxshadow-shadowopacity')).';}'."\n";
How is this converted to the less array method?
calling 2 settings at once (Hex color and converting the hex to RGB and then opacity) can, I ssume be done...
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
The problem is that standard don't exist in style it exist only inset if you didn't specify inset you just put none
and this is the right way to use box shadow in less with color opacity you don't need to change the styledeclaration.php.
.box-shadow(@boxshadowstyle @boxshadowX @boxshadowY @boxshadowblur @boxshadowspread fade(@boxshadowcolor, 10%));
If you need it to be done like for use to add option you simply make
<fields name="shadowopacity" type="chain" label="shadowopacity" description="shadowopacity_DESC"> <field name="text" type="text" default="10%" label="TEXT" class="text-long" /> </fields>.box-shadow(@boxshadowstyle @boxshadowX @boxshadowY @boxshadowblur @boxshadowspread fade(@boxshadowcolor, @boxshadowopacity));
Hope this helps. - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.070 seconds