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. For example: 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 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; (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; (ex: color: green;) · To change color for Facebook’s hover effect, you look for line 225: (#style7 .fa-facebook:hover) Color: #4B6EA8; (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; · To change color for Google plus’s hover effect, you look for line 231: (#style7 .fa-google-plus:hover) Color: #db242c; 5. Change font, font size, font color, font weight, line height of the testimonial. You look for line 97: (style7 .comment-testimonial) · 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) Other style also do the same as style 7
![[Tutorial] - How to change style for JUX Testimonial](/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_Generic.jpg)