How to create custom background style

wmajor

How can I create a custom backgorund style? I'd like to use bg primary, bg light or bg dark as a starting point. I'd also like for my custom style to be displayed in the drop down.

Thanks

saguaros

Hi wmajor

You can try this tweak:

1 - Define new style option via the file: /templates/ja_mixstore/acm/features-intro/tmpl/style-1.xml

<field name="bg-color" type="list" default="bg-primary" label="FEATURES_BGCOLOR_LABEL" description="FEATURES_BGCOLOR_DESC">
	<option value="bg-primary">BG Primary</option>
	<option value="bg-white">BG Light</option>
	<option value="bg-dark">BG Dark</option>
	<option value="bg-blue">BG Blue</option>
</field>

https://prnt.sc/tinrdx

As you can see that I added a new option 'BG Blue', the value will be class .bg-blue that you need to style for it in next step.

2 - Declare the color for new class added above in the file: /templates/ja_mixstore/css/custom.css (Create this file if it doesn't exist)

 .bg-blue {
	background: #c5def9;
	color: #344150;
}

Here is how it looks on frontend: https://prnt.sc/tinrlh

You can apply the same steps for other color as you wish.

wmajor

Thanks, that worked.

wmajor

Can I do something similar for the layout setting A Half? I would like to flip the location of the Feature Image, Feature Title and Feature Description. Right now the image is on the left and the title and description is on the right. I would like to place the image on the right and the title and description on the left.

thanks

saguaros

wmajor

You will need to edit the PHP file:

/templates/ja_mixstore/acm/features-intro/tmpl/style-1.php

and swap the snippet of code for left & right column like below:

<?php
/**
 * ------------------------------------------------------------------------
 * JA MixStore Tpl
 * ------------------------------------------------------------------------
 * Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
 * @license - Copyrighted Commercial Software
 * Author: J.O.O.M Solutions Co., Ltd
 * Websites:  http://www.joomlart.com -  http://www.joomlancers.com
 * This file may not be redistributed in whole or significant part.
 * ------------------------------------------------------------------------
*/
defined('_JEXEC') or die;
  $container 					= $helper->get('container');
  $gutters 						= $helper->get('gutters'); 
  $layouts 						= $helper->get('layouts'); 
  $bgcolor 						= $helper->get('bg-color');
  $colLeft 						= 12;
  $colRight 					= 12; 

  switch ($layouts) {
    case 1:
      $colLeft = 6;
      $colRight = 6; 
      break;
    case 2:
    	if($gutters == '') {
    		$colLeft = 7;
    	} else {
      	$colLeft = 8;
    	}
      $colRight = 4; 
      break;
    case 3:
      break;
    default:
      break;
	}
?>

<div class="<?php echo $container; ?>">
	<div class="acm-features style-1">
		<div class="features-content <?php echo $gutters; ?>">
			<div class="row row-flex row-flex-wrap <?php echo $gutters; ?>">

				<div class="col-xs-12 col-lg-<?php echo $colLeft; ?>">
					<div class="col-inner <?php echo $bgcolor ?>">
						<div class="features-item">
							<?php if($helper->get('title')) : ?>
								<h3 class="features-title">
									<?php echo $helper->get('title'); ?>
								</h3>
							<?php endif ; ?>
							
							<?php if($helper->get('description')) : ?>
								<div class="features-desc ja-animate">
									<?php echo $helper->get('description') ?>
								</div>
							<?php endif ; ?>
							
							<?php if($helper->get('button')) : ?>
								<div class="action ja-animate">
									<a class="btn btn-inverse" href="<?php echo $helper->get('title-link'); ?>"><?php echo $helper->get('button') ?>
									</a>
								</div>
							<?php endif ; ?>
						</div>
					</div>
				</div>

				<?php if($helper->get('img-features')) : ?>
				<div class="col-xs-12 col-lg-<?php echo $colRight; ?>">
					<div class="features-image">
						<img src="<?php echo $helper->get('img-features'); ?>" alt="<?php echo $helper->get('title'); ?>"/>
					</div>
				</div>
				<?php endif ; ?>

			</div>
		</div>
	</div>
</div>