Text editor
- Thread starter Evans
- Start date
You can change background color of the text box from Lists > "Your list" > Pages from right dropdown select Subscribe form and click on source and add custom style to div for example:
To change button color you need to add your custom style using hooks, in folder: web/apps/ create file init-custom.php and then here paste bellow code:
PHP:
<?php
Yii::app()->hooks->addFilter('frontend_list_subscribe_after_transform_list_fields', function($content){
$str = CHtml::button(Yii::t('lists', 'Subscribe'), array('type' => 'submit', 'class' => 'btn btn-primary btn-flat', 'style' => "background-color:#3699FF !important; color:#ffffff"));
return str_replace('[SUBMIT_BUTTON]', $str , $content);
});These above examples will reproduce something like this:
Last edited:
Thank you again for your help. I have tried to the best i can do as i am not great with coding and unfortunately it seems i have distorted everything by trying to configure it as you described. I noticed at first my source code was very different from the sample you sent as there was no place or anything like style=..... Anyways i only need to make it dark background with white fonts and same with the submit button. I suggest help from my backend to fix this for me please
Attachments
You can't do this without even the slightest knowledge of CSS.
To make your form dark is not possible because tag [LIST_FIELDS] will generate automatically fields for that form and these will be with withe background.
HTML:
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">[LIST_NAME]</h3>
</div>
<div class="box-body">
<div class="callout callout-info" style="background-color:#212E48 !important;">We're happy you decided to subscribe to our email list.<br />
Please take a few seconds and fill in the list details in order to subscribe to our list.<br />
You will receive an email to confirm your subscription, just to be sure this is your email address.</div>
[LIST_FIELDS]</div>
<div class="box-footer">
<div class="pull-right">[SUBMIT_BUTTON]</div>
<div class="clearfix"> </div>
</div>
</div>and to change button color in folder: web/apps/ create file init-custom.php and then here paste bellow code:
PHP:
<?php
Yii::app()->hooks->addFilter('frontend_list_subscribe_after_transform_list_fields', function($content){
$str = CHtml::button(Yii::t('lists', 'Subscribe'), array('type' => 'submit', 'class' => 'btn btn-primary btn-flat', 'style' => "background-color:#212E48 !important; color:#ffffff"));
return str_replace('[SUBMIT_BUTTON]', $str , $content);
});Change color with desired color. This example will appear like that:
No worries very perfect it worked. kudos
Besides for the unsubscribe button, is there a different code or how do i change that
That button will be replaced in all forms where [SUBMIT_BUTTON] tag exist.
On this template you need to change:
- Background for:
HTML:
<td class="darkbg" style="border-collapse:collapse;background:red">- Border color for:
HTML:
<table align="center" border="0" cellpadding="0" cellspacing="0" id="main-table" style="-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid red;overflow:hidden;background:#FFFFFF;width:600px">- Background for footer:
HTML:
<td class="darkbg" style="padding:10px;border-collapse:collapse;background:red;">
Thanks a million!In other words, if i will like to change the button color can i go to my web/apps and edit just the color code as shown here ?
(................"background-color:#3699FF !important; )
In this code:
PHP:
<?php
Yii::app()->hooks->addFilter('frontend_list_subscribe_after_transform_list_fields', function($content){
$str = CHtml::button(Yii::t('lists', 'Subscribe'), array('type' => 'submit', 'class' => 'btn btn-primary btn-flat', 'style' => "background-color:#212E48 !important; color:#ffffff"));
return str_replace('[SUBMIT_BUTTON]', $str , $content);
});where you see: background-color: #212E48 , replace "#212E48" with desired color.
2lazy2sleep
New Member
Hi Laurentiu,
This does not seem to be working for submit button in Unsubscribe form. Do you have a solution for it? I would like to change the color of the button and, if possible, to alter it's size and shape (make pill-shaped).
You can use this extension: List form custom assets from Backend > Extend > Extensions , enable it and then in your lists > pages you will have a input where you can choose new css file for page selected. This is the best way to make custom style for Subscribe/Unsubscribe.. because you will write in one css file all styles desired and then this will be available in all lists form if you select this as custom asset.
2lazy2sleep
New Member
Thanks! Will try this out