fbpx

Thrills & Chills - 20% OFF. Coupon Code: THRILLSCHILLS Unlock Offer

How to Add a Gradient Field Type in Astroid Framework?

Add-Field-Type-in-Astroid-Framewor_20181217-084614_1

Once you know the different types of Astroid fields, you have to understand what to do with them, when and where to use them:

This is the core purpose of this article.

We will try to add a function to have a gradient background with CSS in the Astroid template, this feature does not exist natively.

To perfect the whole, we will choose between a radial or linear gradient

Preparing the content

We will define the code to modify in CSS

For linear gradient

body {
background: rgb(9,9,121);
background: -moz-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -o-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%); 
background: linear-gradient(270deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}

For Radial gradient

body { 
background: rgb(9,9,121);
background: -moz-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -webkit-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -o-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}

We will have to create:

  • A Gradient switch button
  • A radial/Linear choice radio button
  • A Start color selector
  • An end color selector Texts for integration into Joomla (.ini)

Text of buttons/Options/Descriptions

Let's add the English language strings in /language/en-GB/en-GB.astroid.ini

TPL_ASTROID_GRADIENT="Gradient Background"
TPL_ASTROID_GRADIENT_DESC="enable to have a gradient background instead of color"
TPL_ASTROID_GRADIENT_CHOICE="Type of gradient"
TPL_ASTROID_GRADIENT_CHOICE_DESC="Choose between linear or radial Background"
TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR="Linear"
TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL="Radial"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN="Start color"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_END="End color"

Creating the fields in the template XML file

In the /templates/astroid_template_zero/astroid/options/colors.xml file that manages the field options in the Template Manager, add these lines:

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>
			<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC">
			<option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option>
			<option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option>
			</field>
			<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN">
			</field>
			<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END">
			</field>

Let’s detail:

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>

That inserts the switching field that activates the gradient (or not), the field is a switch, set by default to 0 (disabled) and it belongs to the body group so it will appear with the other color options of the body.

<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC">
<option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option>
<option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option>
</field>

It is a field of type Astroiradio (radio) of the body group, it will appear in the body area of the color options, and the field attribute ngShow="body_gradient" conditions its appearance to the fact that the body_gradient button is enabled.

<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN">
			</field>
			<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END">
			</field>

It is a field of type astroidcolor (selector of colour) of the body group, they will appear in the zone body of options of colour, and the attribute field ngShow="body_gradient" conditions their appearance in the fact that the button body_gradient is enabled.

Call and Integration in CSS

We now have template parameters that are generated by the framework. We need to recover them, transform them into variables, and use them correctly in the CSS.

In /templates/astroid_template_zero/frontend/colors.php let’s add:

//gradient
$body_body_gradient = $template->params->get('body_gradient', '');
$body_body_gradient_choice = $template->params->get('TPL_ASTROID_GRADIENT_CHOICE', '');
$body_background_gradient_begin = $template->params->get('body_background_color_begin', '');
$body_background_gradient_end = $template->params->get('body_background_color_end', '');

The file retrieves the parameters and transforms them into usable variables.

Below, in the // body coloring section we add our CSS:

<?php
// Body Coloring
$body_styles = [];
if (!empty($body_background_color)) {
   $body_styles[] = 'body{background-color: ' . $body_background_color . ';}';
}
if (!empty($body_text_color)) {
   $body_styles[] = 'body{color: ' . $body_text_color . ';}';
}
if (!empty($body_link_color)) {
   $body_styles[] = 'body a{color: ' . $body_link_color . ';}';
}
if (!empty($body_link_hover_color)) {
   $body_styles[] = 'body a:hover{color: ' . $body_link_hover_color . ';}';
}
//gradient added
if ($body_body_gradient == '1' & $body_body_gradient_choice == 'linear') {
    $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
background: -moz-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -webkit-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -o-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: linear-gradient(180deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); ';
}
if ($body_body_gradient == '1' & $body_body_gradient_choice == 'radial') {
    $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
background: -moz-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -webkit-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -o-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); ';
	} ?>

So we apply the background CSS properties to body, replacing the color values with the variables $body_background_gradient_begin and $body_background_gradient_end while making sure that the start color is loaded by default if the browsers that do not support color gradients.

The PHP code will execute if these two conditions are available: the gradient is activated, and linear is chosen:

if ($body_body_gradient == '1' & $body_body_gradient_choice == 'linear')

Ditto for the radial-gradient CSS.

Thus, if the button is just inactive, it is the astroid background color that is used.

Here is the Linear rendering:

Here is the rendering for Radial gradient:

We could add elements such as a selector to give a direction to the gradient, but we will not do everything for you: it's up to you now!

PS: The original tutorial is created by Serge Billon from Web54. Have a look at its French Version.

Rate this blog entry:

Best Joomla Templates

Extremely Flexible, Responsive and User Friendly

Explore Templates

Related Posts