Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Where and how to create custom preset style for Shaper Helix II

Featured Lock Resolved
I would like to create a custom preset style (called style4.css) in Shaper Helix II so that I can keep my styling changes when there is update to the template. In the documentation page, http://helix.joomshaper.com/documentation/customizing, it says put the reference of the new preset style to the templateDetails.xml file.

However, I cannot find where to put in the templateDetails.xml the reference to my new style. It seems the documentation page is old for this new template release.

According to the documentation, i should do this but cannot find it,

01.<field name="style"
02.type="list"
03.default="style1"
04.label="PRESET"
05.description="PRESET_DESC">
06.<option value="style1">Style1</option>
07.<option value="style2">Style2</option>
08.<option value="style3">Style3</option>
09.<option value="style4">Style4</option>
10.</field>

What I see is something like <fieldset> <presets> and <groups>

Moreover, do i put style4.css in /templates/shaper_helix_ii/css/styles/ as specified in the documentation page OR in
/templates/shaper_helix_ii/css/PRESET/ ?

Thanks in advance for any help.

6 Answers

Ehsan Riyadh

More than a month ago #Permalink
We are working on Helix-II documentation. Please, follow the step for quick solution.
A) Create menu Preset 4. On link under Menu title, write -> ?preset=preset4
B) Go to templates -> Open templateDetails.xml file find -> copy and paste under preset3
<!--Start Preset3-->
<field name="preset3_header" type="picker" default="#e5ddd5" label="Header Color" />
<field name="preset3_bg" type="picker" default="#f2f2f2" label="Background Color" />
<field name="preset3_text" type="picker" default="#333333" label="Text Color" />
<field name="preset3_link" type="picker" default="#aa824a" label="Link Color" />
<!--End Preset3-->

Change field name preset3_header to preset4_header. Same to others field name.
C) At last go to templates\shaper_helix_ii\images\presets folder. Make another folder name preset4

Hope it will work.

khababneh

More than a month ago #Permalink
Hi, I'm trying to create a new preset using your tip but I get an error:-

;) "failed to parse passed in variable @header_color:
Go Back Home":)

My steps :
-- edite the templateDetails.xml file
-- copy and rename preset3.css to preset4.css
-- copy and rename images\presets\preset3 to images\presets\preset4 and chane the thumb image to another one

where is my mistakes ?

thanks sir,

Ehsan Riyadh

More than a month ago #Permalink
I'm sorry to say that in index.php file you can see some sets of color variables. Like:

->setLessVariables(array(

'preset'=>$this->helix->Preset(),
'header_color'=> $this->helix->PresetParam('_header'),
'bg_color'=> $this->helix->PresetParam('_bg'),
'text_color'=> $this->helix->PresetParam('_text'),
'link_color'=> $this->helix->PresetParam('_link')
))

Make sure that on your xml file color name field would be same. And in less file you should call color variable to follow same name on index.php file.

James Blevins

More than a month ago #Permalink
Greetings, and thanks for making such a cool template. I followed the instructions on this page and was able to create the custom preset. I didn't do the following step because I'm not quite sure what it means:

A) Create menu Preset 4. On link under Menu title, write -> ?preset=preset4


Ehsan, could you please clarify?

Since the documentation was brought up, and for the benefit of anyone coming to this page via Google as I did, there is documentation here: http://docs.joomshaper.com/component/k2/item/45-helix-ii/45-helix-ii

Although I think there might be a typo in the last part because

'footer_color'=> $this->helix->PresetParam('footer')


throws the error khababneh mentions above. Changing it to

'footer_color'=> $this->helix->PresetParam('_footer')


makes the error go away, but changing the footer color via the drop-down doesn't change anything. So I am probably doing something wrong.

Anyway, I hope this info helps someone.

Ehsan Riyadh

More than a month ago #Permalink
Hi James,
For new preset menu please see the screen shots. Think I have 8 preset styles and this way I will increase preset menu.

and thats line is correct : 'footer_color'=> $this->helix->PresetParam('_footer')

Attachments (1)

  • menu-preset.jpg
    menu-preset.jpg 17.7 KB

Mohammed Alshamali

More than a month ago #Permalink
Dear Ehsan, I've followed all the steps expect when I reached to your post as quoted below.

I'm trying to add extra preset field in all of the current presets to allow the Admin to edit the menu wrapper colors.
So far what I did is,


1- Editing the templateDetails.xml - I added one field in preset 1 called "preset1_menu_wrapper"
2- In index.php, 'menu_wrapper_color'=> $this->helix->PresetParam('_menu_wrapper'),

Then I think I reached the step where to edit the Less variables and make sure the xml file color name field would be the same. But need more details on that.

Thanks.


Ehsan Riyadh wrote:

I'm sorry to say that in index.php file you can see some sets of color variables. Like:

->setLessVariables(array(

'preset'=>$this->helix->Preset(),
'header_color'=> $this->helix->PresetParam('_header'),
'bg_color'=> $this->helix->PresetParam('_bg'),
'text_color'=> $this->helix->PresetParam('_text'),
'link_color'=> $this->helix->PresetParam('_link')
))

Make sure that on your xml file color name field would be same. And in less file you should call color variable to follow same name on index.php file.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 104
Toufiq

Toufiq

Total Accepted Answers: 52
Sifat

Sifat

Total Accepted Answers: 41
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 24
Ofi Khan

Ofi Khan

Total Accepted Answers: 20

118

Templates

306418

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us