As you know we just launched a new product which is JUX Testimonial. In order to support you custom its styles, in this tutorial we will give you some tips to design by your own.
How to style for Testimonial’s background
Follow this steps:
Source code /components/com_jux_testimonial/assets/ss/disstyle/choose the file CSS you want to style
There are 10 styles we offered and in this tutorial we will take “style 7” as an example (other style will do the same).
1. Change background color for testimonial.
You look for line 13: #style7 .title.inner.flip-container
To change background color: background: #e7f3f3 (ex: background: green)
2. Change font, size, color for title of testimonial
You look for line 77: #style7 h4.title-testimonial
To change font: Font-family: ‘Lato’, Helvetica, Arial, sans-serif; (ex: font-family:’arial’,sans-serif;)
To change font size: font-size: 17px; (ex: font-size: 24px;)
To change title’s font color: color: #1c8e6a; (ex: color: yellow;)
To change font weight for title: Font-weight: 700; (ex: font-weight: 300;)
Moreover, you also can use CSS to change title position on testimonial frame.
EX: If you want to display title in left side of the testimonial frame you choose: Float: left; (do the same for right side – float: right;)
3. Change size, color, distance for rating stars
You look for line 187: #style7 i.star-yellow[/li]
To change size of the rating stars: font-size: 16px; (ex: font-size: 12px;)
To change color of rating stars: color:#f7c162 !important; ( ex: color: green;)
To change distance between stars: margin-left: 4px; (ex: margin-left: 5px;)
4. Change size, color of social icon and hover effect
To change size of social icon, you look for line 220: #style7 .facebook,#style7 .twitter,#style7 .fa-google-plus)
Font-size: 16px; [/i](choose the font size you want)
To change color of social icon, you look for line 193: (#style7.fa-twitter,#style7 .fa-facebook,#style7 .fa-google-plus)
Color:#1c8e6a; [/i](ex: color: green;)
To change color for Facebook’s hover effect, you look for line 225: (#style7 .fa-facebook:hover)
Color: #4B6EA8; [/i](choose the color you want to change)
To change color for Twitter’s hover effect, you look for line 228: (#style7 .fa-twitter:hover)
Color: #55ace;[/i]
To change color for Google plus’s hover effect, you look for line 231: (#style7 .fa-google-plus:hover)
Color: #db242c;[/i]
5. Change font, font size, font color, font weight, line height of the testimonial.
You look for line 97: (style7 .comment-testimonial)[/li]
To change font size: font-size:16xp; (ex: font-size: 24px;)
To change font color: #1c8e6a; (ex: color: yellow;)
To change font weight: font-weight: 300; (ex: font-weight: 500;)
To change line-height: line-height: 24px;(ex: line-height: 20px;)
You also can align text to right, left or middle of the line: Text-align: justify; (ex: text-align: center;)
6. Change font, font size, font color, font weight, line height for name of user.
You look for line 118: (#style7 .name-active)
To change font: font-family ‘Lato’, Helvetica, Arial, sans-serif; (ex: font family: ‘area’, san-serif;)
To change font size: font-size: 16px; (ex: font-size: 14px;)
To change font color: #1c8e6a; (ex: color: yellow;)
To change font weight: font-weight: 900; (ex: font-weight: 500;)
To change line height: 24px; (ex: line-heigt: 20px;)
7. Change font, font size, font color, font weight, font style, line height of position, company, location, email, date.
You look for line 140: (#style 7 a.show-company, #style7 .show_position, #style7 .show_location, #style7 .show_email).
To change font: font-family ‘Lato’, Helvetica, Arial, sans-serif; (ex: font family: ‘area’, san-serif;)
To change font size: font-size: 14px; (ex: font-size: 17px;)
To change font color: color: #2a9573; (ex: color: yellow;)
To change font weight: font-weight: 300; (ex: font-weight: 500;)
To change line height: line-height: 24px; (ex: line-height: 20px;)
To change font style: font-style: italic (ex: font-style: bold;)
8. Change color, length, width, distance for arrow of frame
You look for line 21: (#style7 .title.inner.flip-container:after)
To change color: border-color: #e7f3f3 transparent transparent transparent; (ex: border-color: green transparent transparent transparent;)
To change length, width of arrow: border-width: 22px 15px 0 15px;
To change distance of arrow with testimonial frame: bottom: -20px (ex: bottom: -27px;)
9. To change avatar’s border
You look for line 71: (#style7 .user_avatar_rotate)
To change border: border-radius: 50% 50% 50% 50%; ( ex: border-radius: 10% 10% 10% 10%
You also can change image size by add 2 line code:
Height: 120px; (Change the number of height size you want)
Width: 120px; (Change the number of width size you want)
To change background color for avatar you add: Background: yellow (change the color you want)
How do you add your own custom style and not modify the preset styles. I added a my own css file in the assets/css folder. I also added the css to the xml file and default.php file but it doesn't seem to be referencing the code.
If you want to add 1 more css and it no effect to other styles and component, please follow these steps bellow:
Step 1: You go to file: default.xml ( source / component/com_jux_testimonial/views/testimonials/tmpl/default.xml)
add this code: <option value="style your file name">style your file name</option>
line 192
<field
name="select_style"
type="list"
size="30"
label="COM_JUX_TESTIMONIAL_SELECT_STYLE"
description="COM_JUX_TESTIMONIAL_SELECT_STYLE_DESC"
default="style1"
>
<option value="style1">Style1</option>
<option value="style2">Style2</option>
<option value="style3">Style3</option>
<option value="style4">Style4</option>
<option value="style5">Style5</option>
<option value="style6">Style6</option>
<option value="style7">Style7</option>
<option value="style8">Style8</option>
<option value="style9">Style9</option>
<option value="style10">Style10</option>
You add option
</field>
Step 2: component/com_jux_testimonial/views/testimonials/tmpl/default.php)
you serch :
case 'style10':
$document->addStyleSheet(JURI::root() . 'components/com_jux_testimonial/assets/css/disstyle/' . 'style10.css');
break;
You add: (line 93)
case 'style your file name':
$document->addStyleSheet(JURI::root() . 'components/com_jux_testimonial/assets/css/disstyle/' . 'style your file name.css');
break;
Step 3: create 1 file ccs (name style is the name of your file.css)
And inside you can style anything as you want.
You should read another style (style 1 - style 10) to know the standard class of the form.
Similarly for module, you also go to similar folder and add in those folder.
******************
Best regards
Linh nt
[Tutorial] - How to change style for JUX Testimoni
