titsadmin
YJSG 1.0.14 comes with default support for HTML5 video player by using Video.js which also supports Youtube and Vimeo videos. This is a very handy feature that will let you embed video player in any Joomla! content type. We also added .yjh5v_center class that you can use to center your videos within content. For custom skins and more instructions on how to use Videos.js please visit official website.
Default video setup
<video id="default_video" class="video-js vjs-default-skin yjh5v_center" controls width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
Vimeo video setup
<video id="html5vimeo" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "vimeo"]}'>
<source src="https://vimeo.com/50700106" type='video/vimeo'>
</video>
Youtube video setup
<video id="html5youtube" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "youtube"]}'>
<source src="http://www.youtube.com/watch?v=9QscURRuF0g" type='video/youtube'>
</video>
Notifications examples:
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.To create notification just add one of these class names to your div:
- yjtbox yjt_alert
- yjtbox yjt_warning
- yjtbox yjt_message
- yjtbox yjt_note
You can add or remove the box closing button
<span class="yjt_close"></span><div class="yjtbox yjt_alert">
<span class="yjt_close"></span>
<h4 class="yjtboxtitle">This is box title:</h4>
My Alert...
</div>
</div> Boxes examples:
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.There are 6 default box class names that you can use:
- yjtb_red
- yjtb_green
- yjtb_yellow
- yjtb_blue
- yjtb_gray
- yjtb_clear
You can also add or remove the box closing button
<span class="yjt_close"></span><div class="yjtbox yjtb_blue"> <h4 class="yjtboxtitle">This is box title:</h4> Lorem ipsum dolor sit amet.... </div>
Boxes mix and match:
class="yjtbox yjtb_red radiusb8 dashedb"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_green radiusb10 bordernone"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_yellow dottedb radiusb5"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_blue doubleb radiusb10"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_blue radiusb4 icon-film icon-large"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_green radiusb7 icon-comments" including closing button <span class="yjt_close"></span>
class="yjtbox yjtb_yellow radiusb4 nt_warning"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_gray radiusb4 nt_star"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="jtbox yjtb_green radiusb4 nt_plus"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_red radiusb4 nt_minus"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_clear radiusb4 nt_info"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_yellow radiusb4 nt_note"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_blue radiusb4 nt_plus"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_green radiusb4 nt_cam"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox yjtb_red radiusb4 nt_barcode"
class="yjtbox yjtb_gray radiusb4 nt_calendar"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.class="yjtbox nt_info"
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.Any given box can mix and match multiple class names to acheive desired box styles. You can mix boxes with:
Borders:
- dashedb
- dottedb
- doubleb
- outsetb
- ridgeb
- bordernone
Border radius:
starting fromradiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size) Notification icons:
- nt_warning
- nt_star
- nt_plus
- nt_minus
- nt_info
- nt_note
- nt_download
- nt_cam
- nt_barcode
- nt_calendar
220 FontAwesome icons:
YJSG v1.0.14 and up comes with FontAwesome icons that you can combine with any box. You can also addicon-large class to display larger icons as seen in examples above. Closing button:
Every box can have closing button. Just include<span class="yjt_close"></span> before box title <div class="yjtbox yjtb_red radiusb8 dashedb"> <h4 class="yjtboxtitle">This is box title:</h4> Lorem ipsum dolor sit amet... </div>
Νεότερα Άρθρα
This is box title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.