logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$1
Adding Title link to Video Sidebar Widget

Hi there,

It would be great if you could help me with this.

I would like visitors to my site to be able to link from the video sidebar widget to the post of the video when they click on the video sidebar widget's title.

Is there anyway of doing this. Html or php alterations perhaps?

Cheers,

Ben

benjaminconnor | 01/31/13 at 9:42am Edit
Tutorial: How to assign prize money


(30) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/31/13
    9:48am
    Arnav Joy says:

    can you show url to let us understand your requirement more clearly.

  • avatar
    Last edited:
    01/31/13
    10:02am
    Abdelhadi Touil says:

    Your website link please..

  • avatar
    Last edited:
    01/31/13
    12:32pm
    Kiet Luong says:

    Did you solve your problem ? Can I help you ? I'm available on skype: kioluong

  • avatar
    Last edited:
    02/02/13
    8:36pm
    Trevor Green says:


    Here is what I suggest, and tested on your site. This is a jquery solution. It will strip the src attribute from the video in the video box and insert it as a link replacing the h4. This requires you to change nothing in the php. Just put this in a script block at the bottom of the page.

    If you already have jQuery document ready function you can insert the contents there. This will work in any location where you have video in the sidebar.


    $(document).ready(function() {
    jQuery('.video-box h4').replaceWith('<h4><a href="' + jQuery('.video-box iframe').attr('src') + '">' + jQuery('.video-box h4').html() + '</a></h4>');
    });

  • avatar
    Last edited:
    01/31/13
    10:09am
    benjaminconnor says:

    Oh sorry,

    Here it is: http://benconnormusic.com/

    Cheers guys,

    Ben

  • avatar
    Last edited:
    01/31/13
    10:09am
    benjaminconnor says:

    Oh sorry,

    Here it is: http://benconnormusic.com/

    Cheers guys,

    Ben

  • avatar
    Last edited:
    01/31/13
    10:10am
    benjaminconnor says:

    Here it is: http://benconnormusic.com/

  • avatar
    Last edited:
    01/31/13
    10:16am
    Arnav Joy says:

    as i can see there is a section in right sidebar "Latest Video" with the video but there where is title of the video?

  • avatar
    Last edited:
    01/31/13
    11:03am
    Abdelhadi Touil says:

    It'll be better to display the link of post above or under the video player in the sidebar and link it to the post page, it's better than link the widget title for SEO purpose.
    I want the widget code to make change, or you can send me the theme for making changes for you and resend it. I can also display the video thumbnail insted of the video player, so the visitor will be forced to click on the title or thumbnail to go to the post page and watch the video there.
    Good luck.

  • avatar
    Last edited:
    01/31/13
    11:14am
    benjaminconnor says:

    Hey Arnav.

    Sorry. I'm referring to "Latest Video". Wanting to be able to click it to link through to the video post.

    Doable?

    Cheers,

    Ben

  • avatar
    Last edited:
    01/31/13
    11:29am
    benjaminconnor says:

    Hey Abdelhadi,

    Na, like that they can watch the video in the sidebar. Thanks though.

    Are you suggesting it might be better for me to just have a separate widget (a text widget maybe) above the video that is both the title for the video widget below (i.e. Latest Video) and a link to the video post?

    Or, are you suggesting adding another bit of text with link above or below the video player...

    Reading again, I think you mean the latter, yes?

    Sending a widget code and/or theme is a little beyond me without more explanation on how to do so.

    Do you want me to go into my host provider and acquire the html, php, css or something? I've relatively new to this stuff but have navigated the back end of my hosting provider a little.

    Is step by step possible?

    Go to Hostgator - file manager - html - content...

    Something along those lines?

  • avatar
    Last edited:
    01/31/13
    11:45am
    Abdelhadi Touil says:

    Hi benjaminconnor.
    Yes I mean the latter (adding another bit of text with link above or below the video player).
    To make change, I can't make it without the code used in your theme to display the sidebar widget. As I see you are using News Child Theme from StudioPress:
    http://my.studiopress.com/themes/news/
    So normally you have the theme files; except if you aren't install wordpress and the theme yourself in your website. If you don't have theme files, you can find it via FTP of File manager in wp-content/themes folder (it's called "news").
    Good luck.

  • avatar
    Last edited:
    01/31/13
    11:52am
    benjaminconnor says:

    Okay,

    So, um, just to check with this.

    The widget is a plugin, so i'm thinking you might need the widget code, no?

    And, um... sorry, but I'm pretty tech dumb. When you say code, do you mean html, php, css or something else?

    This is the news themes css:

    /*
    Theme Name: News Child Theme
    Theme URI: http://www.studiopress.com/themes/news
    Description: News is a two or three column child theme created for the Genesis Framework.
    Author: StudioPress
    Author URI: http://www.studiopress.com/

    Version: 2.1

    Tags: black, custom-background, custom-header, custom-menu, featured-images, fixed-width, gray, left-sidebar, one-column, right-sidebar, sticky-post, theme-options, threaded-comments, three-columns, translation-ready, two-columns, white

    Template: genesis
    Template Version: 1.8.2

    License: GNU General Public License v2.0
    License URI: http://www.opensource.org/licenses/gpl-license.php
    */

    /* Table of Contents

    * Import Fonts
    * Defaults
    * Hyperlinks
    * Body
    * Wrap
    * Header
    * Image Header - Partial Width
    * Image Header - Full Width
    * Navigation Constants
    * Header Right Navigation
    * Primary Navigation
    * Primary Navigation Extras
    * Secondary Navigation
    * Social Icons
    * Inner
    * Breadcrumb
    * Taxonomy Description
    * Content-Sidebar Wrap
    * Content
    * Column Classes
    * Featured Post Grid
    * Headlines
    * Ordered / Unordered Lists
    * Post Info
    * Post Meta
    * Author Box
    * Sticky Posts
    * Archive Page
    * Post Icons
    * Images
    * Post Navigation
    * Primary / Secondary Sidebars
    * Dropdowns
    * Featured Page / Post
    * User Profile
    * Buttons
    * Search Form
    * eNews & Updates Widget
    * Calendar Widget
    * Footer Widgets
    * Footer
    * Comments
    * Gravity Forms
    * News Green
    * News Orange
    * News Pink
    * News Purple
    * News Red
    * News Teal
    * Responsive Design

    */


    /* Import Fonts
    ------------------------------------------------------------ */

    @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
    @import url(http://fonts.googleapis.com/css?family=Oswald);



    /* Defaults
    ------------------------------------------------------------ */

    body,
    h1,
    h2,
    h2 a,
    h2 a:visited,
    h3,
    h4,
    h5,
    h6,
    p,
    select,
    textarea {
    color: #333;
    font-family: 'Droid Sans', sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }

    input {
    color: #333;
    font-family: 'Droid Sans', sans-serif;
    }

    input,
    select,
    textarea,
    .breadcrumb,
    .sticky,
    .taxonomy-description {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    }

    li,
    ol,
    ul {
    margin: 0;
    padding: 0;
    }

    ol li {
    list-style-type: decimal;
    }


    /* Hyperlinks
    ------------------------------------------------------------ */

    a,
    a:visited {
    color: #0094d2;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    a img {
    border: none;
    }


    /* Body
    ------------------------------------------------------------ */

    body {
    background: url(images/bg-light.png);
    }


    /* Wrap
    ------------------------------------------------------------ */

    #wrap {
    margin: 0 auto;
    }


    /* Header
    ------------------------------------------------------------ */

    #header {
    background-color: #fff;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
    min-height: 110px;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }

    #title-area {
    float: left;
    overflow: hidden;
    padding: 18px 0 0 20px;
    width: 440px;
    }

    #title {
    font-family: 'Papyrus';
    font-size: 54px;
    font-weight: bold;
    line-height: 54px;
    margin: 0;
    text-shadow: 3px 3px #ccc;
    text-transform: uppercase;
    }

    #title a,
    #title a:hover {
    color: #333;
    text-decoration: none;
    }

    #description {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    }

    #header .widget-area {
    float: right;
    padding: 25px 0 0;
    width: 493px;
    }


    /* Image Header - Partial Width
    ------------------------------------------------------------ */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 110px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 465px;
    }

    .header-image #description {
    display: block;
    overflow: hidden;
    }


    /* Image Header - Full Width
    ------------------------------------------------------------ */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 960px;
    }


    /* Navigation Constants
    ------------------------------------------------------------ */

    li:hover ul ul,
    li.sfHover ul ul {
    left: -9999px;
    }

    li:hover,
    li.sfHover {
    position: static;
    }

    li a .sf-sub-indicator {
    position: absolute;
    text-indent: -9999px;
    }


    /* Header Right Navigation
    ------------------------------------------------------------ */

    #header ul.menu {
    float: right;
    }

    #header ul.menu ul {
    float: right;
    margin: 0;
    padding: 0;
    width: 100%;
    }

    #header ul.menu li {
    float: left;
    list-style-type: none;
    text-transform: uppercase;
    }

    #header ul.menu li a {
    color: #999;
    display: block;
    font-size: 12px;
    padding: 6px 15px 5px;
    position: relative;
    text-decoration: none;
    }

    #header ul.menu li a:hover,
    #header ul.menu li a:active,
    #header ul.menu .current_page_item a,
    #header ul.menu .current-cat a,
    #header ul.menu .current-menu-item a {
    color: #0094d2;
    }

    #header ul.menu li li a,
    #header ul.menu li li a:link,
    #header ul.menu li li a:visited {
    background-color: #111;
    border: 1px solid #444;
    border-top-width: 0;
    color: #999;
    font-size: 11px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 128px;
    }

    #header ul.menu li li a:hover,
    #header ul.menu li li a:active {
    color: #0094d2;
    }

    #header ul.menu li ul {
    height: auto;
    left: -9999px;
    margin: 0 0 0 -1px;
    position: absolute;
    width: 150px;
    z-index: 9999;
    }

    #header ul.menu li ul a {
    width: 130px;
    }

    #header ul.menu li ul ul {
    margin: -33px 0 0 149px;
    }

    #header ul.menu li:hover>ul,
    #header ul.menu li.sfHover ul {
    left: auto;
    }


    /* Primary Navigation
    ------------------------------------------------------------ */

    #nav {
    background: url(images/bg-dark.png);
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    clear: both;
    color: #fff;
    font-family: 'Oswald', arial, serif;
    margin: 0 auto;
    overflow: hidden;
    text-transform: uppercase;
    width: 960px;
    }

    #nav ul {
    float: left;
    width: 100%;
    }

    #nav li {
    float: left;
    list-style-type: none;
    }

    #nav li a {
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 9px 15px;
    position: relative;
    text-decoration: none;
    }

    #nav li a:hover,
    #nav li a:active,
    #nav .current_page_item a,
    #nav .current-cat a,
    #nav .current-menu-item a {
    color: #0094d2;
    }

    #nav li li a,
    #nav li li a:link,
    #nav li li a:visited {
    background: url(images/bg-dark.png);
    border: 1px solid #444;
    border-top-width: 0;
    color: #fff;
    font-size: 11px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 118px;
    }

    #nav li li a:hover,
    #nav li li a:active {
    color: #0094d2;
    }

    #nav li ul {
    height: auto;
    left: -9999px;
    position: absolute;
    width: 140px;
    z-index: 9999;
    }

    #nav li ul a {
    width: 120px;
    }

    #nav li ul ul {
    margin: -33px 0 0 139px;
    }

    #nav li:hover>ul,
    #nav li.sfHover ul {
    left: auto;
    }


    /* Primary Navigation Extras
    ------------------------------------------------------------ */

    #nav li.right {
    float: right;
    font-size: 14px;
    padding: 9px 15px;
    }

    #nav li.right a {
    background: none;
    border: none;
    color: #fff;
    display: inline;
    text-decoration: none;
    }

    #nav li.right a:hover {
    color: #0094d2;
    text-decoration: none;
    }

    #nav li.search {
    padding: 0 10px;
    }

    #nav li.rss a {
    background: url(images/rss.png) no-repeat center left;
    margin: 0 0 0 20px;
    padding: 7px 0 5px 18px;
    }

    #nav li.twitter a {
    background: url(images/twitter-nav.png) no-repeat center left;
    padding: 7px 0 5px 20px;
    }


    /* Secondary Navigation
    ------------------------------------------------------------ */

    #subnav {
    clear: both;
    font-family: 'Oswald', arial, serif;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }

    #subnav ul {
    float: left;
    width: 100%;
    }

    #subnav li {
    float: left;
    list-style-type: none;
    }

    #subnav li a {
    color: #333;
    display: block;
    font-size: 12px;
    padding: 12px 15px 10px;
    position: relative;
    text-decoration: none;
    }

    #subnav li a:hover,
    #subnav li a:active,
    #subnav .current_page_item a,
    #subnav .current-cat a,
    #subnav .current-menu-item a {
    color: #0094d2;
    }

    #subnav li li a,
    #subnav li li a:link,
    #subnav li li a:visited {
    background: url(images/bg-light.png);
    border: 1px solid #ccc;
    border-top-width: 0;
    color: #333;
    font-size: 11px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 118px;
    }

    #subnav li li a:hover,
    #subnav li li a:active {
    color: #0094d2;
    }

    #subnav li ul {
    height: auto;
    left: -9999px;
    position: absolute;
    width: 140px;
    z-index: 9999;
    }

    #subnav li ul a {
    width: 120px;
    }

    #subnav li ul ul {
    margin: -33px 0 0 139px;
    }

    #subnav li:hover>ul,
    #subnav li.sfHover ul {
    left: auto;
    }


    /* Social Icons
    ------------------------------------------------------------ */

    #subnav li.social-facebook,
    #subnav li.social-rss,
    #subnav li.social-twitter {
    float: right;
    }

    #subnav li.social-facebook a,
    #subnav li.social-facebook a:hover,
    #subnav li.social-rss a,
    #subnav li.social-rss a:hover,
    #subnav li.social-twitter a,
    #subnav li.social-twitter a:hover {
    display: block;
    height: 23px;
    padding: 0;
    text-indent: -9999px;
    width: 23px;
    }

    #subnav li.social-facebook a,
    #subnav li.social-facebook a:hover,
    #subnav li.social-rss a,
    #subnav li.social-rss a:hover,
    #subnav li.social-twitter a,
    #subnav li.social-twitter a:hover {
    background: url(images/social-icons.png);
    margin: 10px 10px 0 0;
    }

    #subnav li.social-rss a,
    #subnav li.social-rss a:hover {
    margin: 10px 15px 0 0;
    }

    #subnav li.social-facebook a {
    background-position: 0 0;
    }

    #subnav li.social-facebook a:hover {
    background-position: 0 -23px;
    }

    #subnav li.social-rss a {
    background-position: -46px 0;
    }

    #subnav li.social-rss a:hover {
    background-position: -46px -23px;
    }

    #subnav li.social-twitter a {
    background-position: -23px 0;
    }

    #subnav li.social-twitter a:hover {
    background-position: -23px -23px;
    }


    /* Inner
    ------------------------------------------------------------ */

    #inner {
    background-color: #fff;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    overflow: hidden;
    margin: 0 auto;
    width: 960px;
    }

    .news-landing #inner {
    margin: 20px auto;
    width: 700px;
    }

    #inner:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }

    .content-sidebar #inner {
    background: url(images/inner-cs.png);
    }

    .sidebar-content #inner {
    background: url(images/inner-sc.png);
    }

    .content-sidebar-sidebar #inner {
    background: url(images/inner-css.png);
    }

    .sidebar-sidebar-content #inner {
    background: url(images/inner-ssc.png);
    }

    .sidebar-content-sidebar #inner {
    background: url(images/inner-scs.png);
    }

    .full-width-content #inner {
    background: #fff;
    }


    /* Home Top
    ------------------------------------------------------------ */

    #home-top {
    border-bottom: 1px solid #d5d5d5;
    overflow: hidden;
    }

    #home-top .border {
    border-bottom: 4px solid #eee;
    overflow: hidden;
    }

    #home-top .wrap {
    overflow: hidden;
    padding: 20px 25px 15px;
    }

    #home-top .ui-tabs ul.ui-tabs-nav {
    border-bottom: 1px dotted #ddd;
    margin: 10px 0;
    padding: 0 0 13px;
    }

    #home-top .ui-tabs ul.ui-tabs-nav li a {
    background-color: #f5f5f5;
    font-weight: bold;
    }

    #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
    background-color: #00a7ed;
    color: #fff;
    }

    #home-top .ui-tabs .post {
    background-color: #fff;
    margin: 0;
    padding: 0;
    }


    /* Home Middle
    ------------------------------------------------------------ */

    #home-middle {
    border-bottom: 1px solid #d5d5d5;
    overflow: hidden;
    }

    #home-middle .border {
    border-bottom: 4px solid #eee;
    overflow: hidden;
    }

    #home-middle .wrap {
    overflow: hidden;
    padding: 25px 25px 15px;
    }

    .home-middle-left {
    float: left;
    width: 290px;
    }

    .home-middle-right {
    float: right;
    width: 285px;
    }


    /* Home Bottom
    ------------------------------------------------------------ */

    #home-bottom {
    overflow: hidden;
    }

    #home-bottom .wrap {
    overflow: hidden;
    padding: 20px 25px 15px;
    }


    /* Breadcrumb
    ------------------------------------------------------------ */

    .breadcrumb {
    border: none;
    font-size: 12px;
    line-height: 20px;
    margin: 0 0 30px;
    padding: 5px 10px;
    }


    /* Taxonomy Description
    ------------------------------------------------------------ */

    .taxonomy-description {
    border: none;
    margin: 0 0 30px;
    padding: 10px;
    }


    /* Content-Sidebar Wrap
    ------------------------------------------------------------ */

    #content-sidebar-wrap {
    float: left;
    width: 810px;
    }

    .content-sidebar-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap {
    width: 805px;
    }

    .content-sidebar #content-sidebar-wrap,
    .full-width-content #content-sidebar-wrap,
    .sidebar-content #content-sidebar-wrap {
    width: 960px;
    }

    .sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap {
    float: right;
    }

    .news-landing #content-sidebar-wrap {
    width: 700px;
    }


    /* Content
    ------------------------------------------------------------ */

    #content {
    float: left;
    padding: 25px 35px;
    width: 430px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 580px;
    }

    .content-sidebar-sidebar #content {
    width: 425px;
    }

    .sidebar-content #content,
    .sidebar-sidebar-content #content {
    float: right;
    }

    .home.news.content-sidebar #content {
    padding: 0;
    width: 650px;
    }

    .full-width-content #content {
    width: 910px;
    }

    .full-width-content.news-landing #content {
    width: 630px;
    }

    blockquote {
    background-color: #f5f5f5;
    margin: 5px 15px 20px;
    padding: 15px 20px 0;
    }

    blockquote p {
    color: #666;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-style: italic;
    }

    .post {
    margin: 0 0 40px;
    }

    .single .post {
    margin: 0 0 10px;
    }

    .entry-content {
    overflow: hidden;
    }

    .entry-content p {
    padding: 0 0 15px;
    }

    p.subscribe-to-comments {
    padding: 20px 0 10px;
    }

    .after-post-ad {
    background-color: #f5f5f5;
    margin: 5px 0 10px;
    padding: 10px;
    overflow: hidden;
    }

    .after-content-ad {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 20px;
    text-align: center;
    width: 960px;
    }

    .more-from-category {
    background: url(images/list.png) no-repeat top left;
    list-style-type: none;
    padding: 0 0 0 15px;
    }

    .clear {
    clear: both;
    }

    .clear-line {
    border-bottom: 1px dotted #ddd;
    clear: both;
    margin: 0 0 15px;
    }


    /* Column Classes
    ------------------------------------------------------------ */

    .five-sixths,
    .four-fifths,
    .four-sixths,
    .one-fifth,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fifths,
    .three-fourths,
    .three-sixths,
    .two-fifths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    float: left;
    margin: 0 0 20px;
    padding-left: 3%;
    }

    .one-half,
    .three-sixths,
    .two-fourths {
    width: 48%;
    }

    .one-third,
    .two-sixths {
    width: 31%;
    }

    .four-sixths,
    .two-thirds {
    width: 65%;
    }

    .one-fourth {
    width: 22.5%;
    }

    .three-fourths {
    width: 73.5%;
    }

    .one-fifth {
    width: 17.4%;
    }

    .two-fifths {
    width: 37.8%;
    }

    .three-fifths {
    width: 58.2%;
    }

    .four-fifths {
    width: 78.6%;
    }

    .one-sixth {
    width: 14%;
    }

    .five-sixths {
    width: 82%;
    }

    .first {
    clear: both;
    padding-left: 0;
    }


    /* Featured Post Grid
    ------------------------------------------------------------ */

    .genesis-grid-even {
    float: right;
    padding: 0 0 15px;
    width: 48%;
    }

    .genesis-grid-odd {
    clear: both;
    float: left;
    padding: 0 0 15px;
    width: 48%;
    }

    .genesis-grid-even,
    .genesis-grid-odd {
    margin: 0 0 20px;
    }


    /* Headlines
    ------------------------------------------------------------ */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: 'Oswald', arial, serif;
    margin: 0 0 10px;
    }

    h1,
    h2,
    h2 a,
    h2 a:visited {
    font-family: 'Oswald', arial, serif;
    font-size: 24px;
    line-height: 30px;
    }

    .featuredpost h2,
    .featuredpost h2 a {
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 5px;
    }

    #home-bottom h2,
    #home-top h2 {
    margin: 5px 0;
    }

    .home-middle-right .featuredpost h2,
    .home-middle-right h2 a,
    .sidebar .featuredpost h2,
    .sidebar .featuredpost h2 a {
    font-family: 'Droid Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    margin: 10px 0 0;
    }

    .taxonomy-description h1,
    .widget-area h2,
    .widget-area h2 a {
    font-size: 18px;
    line-height: 24px;
    }

    h2 a:hover {
    color: #0094d2;
    text-decoration: none;
    }

    h3 {
    font-size: 24px;
    }

    h4 {
    font-size: 20px;
    }

    .widget h4,
    .widget-area h4 {
    text-transform: uppercase;
    word-spacing: 2px;
    }

    .widget h4,
    .widget-area h4 {
    font-size: 14px;
    }

    .widget-area h4 a {
    color: #333;
    text-decoration: none;
    }

    #footer-widgets h4 {
    background: none;
    border: none;
    margin: 0 0 5px;
    padding: 0;
    }

    h5 {
    font-size: 18px;
    }

    h6 {
    font-size: 16px;
    }


    /* Ordered / Unordered Lists
    ------------------------------------------------------------ */

    .entry-content ol,
    .entry-content ul {
    margin: 0;
    padding: 0 0 15px;
    }

    .entry-content ol {
    margin: 0;
    }

    .archive-page ul li,
    .entry-content ul li {
    list-style-type: square;
    margin: 0 0 0 30px;
    padding: 0;
    }

    .entry-content ol li {
    margin: 0 0 0 35px;
    }

    .archive-page ul ul,
    .entry-content ol ol,
    .entry-content ul ul {
    padding: 0;
    }


    /* Post Info
    ------------------------------------------------------------ */

    .post-info {
    font-size: 11px;
    margin: 0 0 15px;
    }

    .featuredpost .post-info,
    .ui-tabs .post-info {
    color: #666;
    margin: 0;
    }

    .ui-tabs .post-info {
    margin: 0 0 5px;
    }


    /* Post Meta
    ------------------------------------------------------------ */

    .post-meta {
    background-color: #f5f5f5;
    clear: both;
    font-size: 11px;
    padding: 7px 10px 5px;
    }


    /* Author Box
    ------------------------------------------------------------ */

    .author-box {
    background-color: #f5f5f5;
    margin: 0 0 40px;
    overflow: hidden;
    padding: 10px;
    }

    .author-box p {
    font-size: 13px;
    line-height: 20px;
    }


    /* Sticky Posts
    ------------------------------------------------------------ */

    .sticky {
    margin: 0 0 40px;
    padding: 20px;
    }


    /* Archive Page
    ------------------------------------------------------------ */

    .archive-page {
    float: left;
    padding: 20px 0;
    width: 45%;
    }


    /* Post Icons
    ------------------------------------------------------------ */

    .categories {
    background: url(images/icon-categories.png) no-repeat top left;
    padding: 3px 0 3px 22px;
    }

    .post-comments {
    background: url(images/icon-comments.png) no-repeat top left;
    margin: 0 0 0 10px;
    padding: 2px 0 2px 22px;
    }

    .tags {
    background: url(images/icon-tags.png) no-repeat top left;
    margin: 0 0 0 10px;
    padding: 3px 0 3px 20px;
    }

    .time {
    background: url(images/icon-time.png) no-repeat top left;
    padding: 2px 0 2px 21px;
    }

    .featuredpost .post-comments,
    .featuredpost .time {
    background: none;
    margin: 0;
    padding: 0;
    }


    /* Images
    ------------------------------------------------------------ */

    img {
    height: auto;
    max-width: 100%;
    }

    .avatar,
    .entry-content img,
    .featuredpage img,
    .featuredpost img,
    .post-image,
    .ui-tabs img {
    background-color: #fff;
    border: 4px solid #eee;
    padding: 1px;
    }

    .featuredpost img {
    margin: 0 0 10px;
    }

    img.ad-left {
    float: left;
    margin: 5px 10px 5px 0;
    }

    img.ad-right {
    float: left;
    margin: 5px 0;
    }

    .author-box .avatar {
    background-color: #fff;
    border: 4px solid #ddd;
    float: left;
    height: 72px;
    margin: 0 10px 0 0;
    width: 72px;
    }

    .post-image {
    margin: 0 10px 10px 0;
    }

    .comment-list li .avatar {
    background-color: #fff;
    float: left;
    height: 30px;
    margin: 0 5px 0 0;
    width: 30px;
    }

    img.centered,
    .aligncenter {
    display: block;
    margin: 0 auto 10px;
    }

    img.alignnone {
    display: inline;
    margin: 0 0 15px;
    }

    img.alignleft {
    display: inline;
    margin: 0 15px 10px 0;
    }

    img.alignright {
    display: inline;
    margin: 0 0 10px 15px;
    }

    .alignleft {
    float: left;
    margin: 0 10px 0 0;
    }

    #home-top .alignleft {
    margin: 0 15px 0 0;
    }

    .alignright {
    float: right;
    margin: 0 0 0 10px;
    }

    .wp-caption {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: center;
    }

    p.wp-caption-text {
    font-size: 12px;
    line-height: 16px;
    padding: 5px 0;
    }

    .wp-smiley,
    .wp-wink {
    border: none;
    float: none;
    }

    .gallery-caption {
    }


    /* Post Navigation
    ------------------------------------------------------------ */

    .navigation {
    overflow: hidden;
    padding: 20px 0;
    width: 100%;
    }

    .navigation li {
    display: inline;
    }

    .navigation li a,
    .navigation li.disabled,
    .navigation li a:hover,
    .navigation li.active a {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    padding: 5px 8px;
    text-decoration: none;
    }

    .navigation li a:hover,
    .navigation li.active a {
    background-color: #0094d2;
    border: 1px solid #0094d2;
    }


    /* Primary / Secondary Sidebars
    ------------------------------------------------------------ */

    .sidebar {
    display: inline;
    float: right;
    font-size: 13px;
    line-height: 20px;
    width: 305px;
    }

    .sidebar p {
    font-size: 13px;
    line-height: 20px;
    }

    #sidebar-alt {
    float: left;
    width: 150px;
    }

    .sidebar-content #sidebar,
    .sidebar-sidebar-content #sidebar {
    float: left;
    }

    .content-sidebar-sidebar #sidebar-alt {
    float: right;
    }

    #sidebar .widget,
    #sidebar-alt .widget {
    border-bottom: 1px solid #d5d5d5;
    }

    .sidebar .widget-wrap {
    border-bottom: 4px solid #eee;
    overflow: hidden;
    padding: 15px 20px 20px;
    }

    .sidebar .widget ul {
    margin: 5px 0 -5px;
    }

    .sidebar .widget ul li,
    .sidebar .widget-area ul li {
    background: url(images/list.png) no-repeat top left;
    border-bottom: 1px solid #eee;
    list-style-type: none;
    margin: 0 0 7px;
    padding: 0 0 5px 15px;
    word-wrap: break-word;
    }


    /* Dropdowns
    ------------------------------------------------------------ */

    #cat,
    .widget_archive select {
    display: inline;
    font-family: 'Droid Sans', sans-serif;
    font-size: 12px;
    width: 100%;
    }


    /* Featured Page / Post
    ------------------------------------------------------------ */

    .featuredpage,
    .featuredpost {
    clear: both;
    overflow: hidden;
    }

    .featuredpage .page,
    .featuredpost .post {
    border-bottom: 1px dotted #ddd;
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0 0 15px;
    }

    .home.content-sidebar .home-middle-right .featuredpost .post,
    .home.content-sidebar #home-bottom .featuredpost .post {
    padding: 0;
    }


    /* User Profile
    ------------------------------------------------------------ */

    .user-profile {
    overflow: hidden;
    }


    /* Buttons
    ------------------------------------------------------------ */

    input[type="button"],
    input[type="submit"] {
    background-color: #00a7ed;
    border: 1px solid #0094d2;
    color: #fff;
    cursor: pointer;
    font-family: 'Droid Sans', sans-serif !important;
    font-size: 13px;
    font-weight: normal;
    padding: 5px;
    text-decoration: none;
    }

    input:hover[type="button"],
    input:hover[type="submit"] {
    background-color: #0094d2;
    border: 1px solid #0094d2;
    color: #fff;
    text-decoration: none;
    }


    /* Search Form
    ------------------------------------------------------------ */

    #header .searchform {
    float: right;
    padding: 25px 20px 0 0;
    }

    #nav .searchform {
    float: right;
    padding: 2px 0 0;
    }

    .s {
    font-family: 'Droid Sans', sans-serif;
    font-size: 13px;
    margin: 5px -6px 0 0;
    padding: 5px;
    width: 180px;
    }


    /* eNews and Update Widget
    ------------------------------------------------------------ */

    .enews {
    background: url(images/enews.png) no-repeat top right;
    }

    .enews #subbox {
    font-family: 'Droid Sans', sans-serif;
    font-size: 13px;
    margin: 10px -2px 0 0;
    padding: 5px;
    width: 175px;
    }


    /* Calendar Widget
    ------------------------------------------------------------ */

    #wp-calendar {
    width: 100%;
    }

    #wp-calendar caption {
    font-size: 12px;
    font-style: italic;
    padding: 2px 5px 0 0;
    text-align: right;
    }

    #wp-calendar thead {
    background-color: #f5f5f5;
    font-weight: bold;
    margin: 10px 0 0;
    }

    #wp-calendar td {
    background-color: #f5f5f5;
    padding: 2px;
    text-align: center;
    }


    /* Footer Widgets
    ------------------------------------------------------------ */

    #footer-widgets {
    background-color: #fff;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }

    #footer-widgets .wrap {
    border: 4px solid #f5f5f5;
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
    padding: 15px 14px 0;
    }

    #footer-widgets .widget {
    background: none;
    border: none;
    margin: 0 0 15px;
    padding: 0;
    }

    #footer-widgets .textwidget {
    padding: 0;
    }

    #footer-widgets .widget_tag_cloud div div {
    padding: 0;
    }

    #footer-widgets p {
    font-size: 13px;
    line-height: 20px;
    padding: 0 0 10px;
    }

    #footer-widgets .widget ul li,
    #footer-widgets .widget-area ul li {
    background: url(images/list.png) no-repeat top left;
    border-bottom: 1px dotted #ddd;
    list-style-type: none;
    margin: 0 0 7px;
    padding: 0 0 5px 18px;
    word-wrap: break-word;
    }

    #footer-widgets #wp-calendar thead,
    #footer-widgets #wp-calendar td {
    background: none;
    }

    .footer-widgets-1 {
    float: left;
    margin: 0 20px 0 0;
    width: 295px;
    }

    .footer-widgets-2 {
    float: left;
    width: 290px;
    }

    .footer-widgets-3 {
    float: right;
    width: 295px;
    }


    /* Footer
    ------------------------------------------------------------ */

    #footer {
    background: url(images/footer.png) no-repeat top;
    clear: both;
    font-size: 11px;
    margin: 0 auto;
    padding: 30px 0 20px;
    overflow: hidden;
    text-transform: uppercase;
    width: 960px;
    }

    #footer p {
    color: #666;
    font-size: 11px;
    }

    #footer a,
    #footer a:visited {
    color: #666;
    }

    #footer a:hover {
    color: #0094d2;
    text-decoration: none;
    }

    #footer .gototop {
    float: left;
    padding: 0 0 0 10px;
    width: 200px;
    }

    #footer .creds {
    float: right;
    padding: 0 10px 0 0;
    text-align: right;
    width: 735px;
    }


    /* Comments
    ------------------------------------------------------------ */

    #comments,
    #respond {
    margin: 0 0 30px;
    overflow: hidden;
    }

    #comments {
    font-size: 13px;
    line-height: 20px;
    }

    #author,
    #comment,
    #email,
    #url {
    font-size: 12px;
    margin: 10px 5px 0 0;
    padding: 5px;
    width: 250px;
    }

    #comment {
    height: 150px;
    margin: 10px 0;
    width: 98%;
    }

    .ping-list {
    margin: 0 0 40px;
    }

    .comment-list ol,
    .ping-list ol {
    margin: 0;
    padding: 10px;
    }

    .comment-list li,
    .ping-list li {
    font-weight: bold;
    list-style: none;
    margin: 10px 0 0;
    padding: 10px;
    }

    .comment-list li ul li {
    list-style-type: none;
    }

    .comment-list p,
    .ping-list p {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    margin: 10px 5px 10px 0;
    padding: 0;
    text-transform: none;
    }

    .comment-list ul.children {
    margin-top: 20px;
    }

    .comment-list ul.children li.comment {
    background: #fff;
    }

    .comment-list cite,
    .ping-list cite {
    font-style: normal;
    font-weight: bold;
    }

    .commentmetadata {
    font-weight:normal;
    }

    .comment-author {
    background: #e5e5e5;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 10px 0;
    }

    .comment-meta {
    background: #e5e5e5;
    font-size: 12px;
    padding: 0 10px 8px;
    }

    .nocomments {
    text-align: center;
    }

    #comments .navigation {
    display: block;
    padding: 0;
    }

    .bypostauthor {
    }

    .thread-alt,
    .thread-even {
    background: #f5f5f5;
    }

    .alt,
    .depth-1,
    .even {
    border: 1px solid #ddd;
    }


    /* Gravity Forms
    ------------------------------------------------------------ */

    div.gform_wrapper input,
    div.gform_wrapper select,
    div.gform_wrapper textarea {
    color: #333;
    font-family: 'Droid Sans', sans-serif;
    font-size: 12px !important;
    padding: 4px 5px !important;
    }

    div.gform_footer input.button {
    color: #fff;
    }

    div.gform_wrapper .ginput_complex label {
    font-size: 12px;
    }

    div.gform_wrapper li,
    div.gform_wrapper form li {
    margin: 0 0 10px;
    }

    div.gform_wrapper .gform_footer {
    border: none;
    margin: 0;
    padding: 0;
    }


    /* News Green
    ------------------------------------------------------------ */

    .news-green a,
    .news-green a:visited {
    color: #1c9b3d;
    text-decoration: none;
    }

    .news-green a:hover {
    text-decoration: underline;
    }

    .news-green #header ul.nav li li a,
    .news-green #header ul.nav li li a:link,
    .news-green #header ul.nav li li a:visited,
    .news-green #header ul.menu li li a,
    .news-green #header ul.menu li li a:link,
    .news-green #header ul.menu li li a:visited,
    .news-green #nav li li a,
    .news-green #nav li li a:link,
    .news-green #nav li li a:visited {
    color: #fff;
    }

    .news-green #subnav li li a,
    .news-green #subnav li li a:link,
    .news-green #subnav li li a:visited,
    .news-green h2 a,
    .news-green h2 a:visited {
    color: #333;
    }

    .news-green #header ul.nav li a:hover,
    .news-green #header ul.nav li a:active,
    .news-green #header ul.nav .current_page_item a,
    .news-green #header ul.nav .current-cat a,
    .news-green #header ul.nav .current-menu-item a,
    .news-green #header ul.menu li a:hover,
    .news-green #header ul.menu li a:active,
    .news-green #header ul.menu .current_page_item a,
    .news-green #header ul.menu .current-cat a,
    .news-green #header ul.menu .current-menu-item a,
    .news-green #header ul.nav li li a:hover,
    .news-green #header ul.nav li li a:active,
    .news-green #header ul.menu li li a:hover,
    .news-green #header ul.menu li li a:active,
    .news-green #nav li a:hover,
    .news-green #nav li a:active,
    .news-green #nav .current_page_item a,
    .news-green #nav .current-cat a,
    .news-green #nav .current-menu-item a,
    .news-green #nav li li a:hover,
    .news-green #nav li li a:active,
    .news-green #nav li.right a:hover,
    .news-green #subnav li a:hover,
    .news-green #subnav li a:active,
    .news-green #subnav .current_page_item a,
    .news-green #subnav .current-cat a,
    .news-green #subnav .current-menu-item a,
    .news-green #subnav li li a:hover,
    .news-green #subnav li li a:active,
    .news-green h2 a:hover,
    .news-green #footer a:hover {
    color: #1c9b3d;
    }

    .news-green #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-green #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-green .navigation li a:hover,
    .news-green .navigation li.active a {
    background-color: #1c9b3d;
    }

    .news-green .navigation li a:hover,
    .news-green .navigation li.active a {
    border: 1px solid #1c9b3d;
    }

    .news-green h2 a:hover {
    text-decoration: none;
    }

    .news-green input[type="button"],
    .news-green input[type="submit"] {
    background-color: #27c753;
    border: 1px solid #1c9b3d;
    }

    .news-green input:hover[type="button"],
    .news-green input:hover[type="submit"] {
    background-color: #1c9b3d;
    border: 1px solid #1c9b3d;
    }


    /* News Orange
    ------------------------------------------------------------ */

    .news-orange a,
    .news-orange a:visited {
    color: #e88e05;
    text-decoration: none;
    }

    .news-orange a:hover {
    text-decoration: underline;
    }

    .news-orange #header ul.nav li li a,
    .news-orange #header ul.nav li li a:link,
    .news-orange #header ul.nav li li a:visited,
    .news-orange #header ul.menu li li a,
    .news-orange #header ul.menu li li a:link,
    .news-orange #header ul.menu li li a:visited,
    .news-orange #nav li li a,
    .news-orange #nav li li a:link,
    .news-orange #nav li li a:visited {
    color: #fff;
    }

    .news-orange #subnav li li a,
    .news-orange #subnav li li a:link,
    .news-orange #subnav li li a:visited,
    .news-orange h2 a,
    .news-orange h2 a:visited {
    color: #333;
    }

    .news-orange #header ul.nav li a:hover,
    .news-orange #header ul.nav li a:active,
    .news-orange #header ul.nav .current_page_item a,
    .news-orange #header ul.nav .current-cat a,
    .news-orange #header ul.nav .current-menu-item a,
    .news-orange #header ul.menu li a:hover,
    .news-orange #header ul.menu li a:active,
    .news-orange #header ul.menu .current_page_item a,
    .news-orange #header ul.menu .current-cat a,
    .news-orange #header ul.menu .current-menu-item a,
    .news-orange #header ul.nav li li a:hover,
    .news-orange #header ul.nav li li a:active,
    .news-orange #header ul.menu li li a:hover,
    .news-orange #header ul.menu li li a:active,
    .news-orange #nav li a:hover,
    .news-orange #nav li a:active,
    .news-orange #nav .current_page_item a,
    .news-orange #nav .current-cat a,
    .news-orange #nav .current-menu-item a,
    .news-orange #nav li li a:hover,
    .news-orange #nav li li a:active,
    .news-orange #nav li.right a:hover,
    .news-orange #subnav li a:hover,
    .news-orange #subnav li a:active,
    .news-orange #subnav .current_page_item a,
    .news-orange #subnav .current-cat a,
    .news-orange #subnav .current-menu-item a,
    .news-orange #subnav li li a:hover,
    .news-orange #subnav li li a:active,
    .news-orange h2 a:hover,
    .news-orange #footer a:hover {
    color: #e88e05;
    }

    .news-orange #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-orange #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-orange .navigation li a:hover,
    .news-orange .navigation li.active a {
    background-color: #e88e05;
    }

    .news-orange .navigation li a:hover,
    .news-orange .navigation li.active a {
    border: 1px solid #e88e05;
    }

    .news-orange h2 a:hover {
    text-decoration: none;
    }

    .news-orange input[type="button"],
    .news-orange input[type="submit"] {
    background-color: #f5a506;
    border: 1px solid #e88e05;
    }

    .news-orange input:hover[type="button"],
    .news-orange input:hover[type="submit"] {
    background-color: #e88e05;
    border: 1px solid #e88e05;
    }


    /* News Pink
    ------------------------------------------------------------ */

    .news-pink a,
    .news-pink a:visited {
    color: #c62765;
    text-decoration: none;
    }

    .news-pink a:hover {
    text-decoration: underline;
    }

    .news-pink #header ul.nav li li a,
    .news-pink #header ul.nav li li a:link,
    .news-pink #header ul.nav li li a:visited,
    .news-pink #header ul.menu li li a,
    .news-pink #header ul.menu li li a:link,
    .news-pink #header ul.menu li li a:visited,
    .news-pink #nav li li a,
    .news-pink #nav li li a:link,
    .news-pink #nav li li a:visited {
    color: #fff;
    }

    .news-pink #subnav li li a,
    .news-pink #subnav li li a:link,
    .news-pink #subnav li li a:visited,
    .news-pink h2 a,
    .news-pink h2 a:visited {
    color: #333;
    }

    .news-pink #header ul.nav li a:hover,
    .news-pink #header ul.nav li a:active,
    .news-pink #header ul.nav .current_page_item a,
    .news-pink #header ul.nav .current-cat a,
    .news-pink #header ul.nav .current-menu-item a,
    .news-pink #header ul.menu li a:hover,
    .news-pink #header ul.menu li a:active,
    .news-pink #header ul.menu .current_page_item a,
    .news-pink #header ul.menu .current-cat a,
    .news-pink #header ul.menu .current-menu-item a,
    .news-pink #header ul.nav li li a:hover,
    .news-pink #header ul.nav li li a:active,
    .news-pink #header ul.menu li li a:hover,
    .news-pink #header ul.menu li li a:active,
    .news-pink #nav li a:hover,
    .news-pink #nav li a:active,
    .news-pink #nav .current_page_item a,
    .news-pink #nav .current-cat a,
    .news-pink #nav .current-menu-item a,
    .news-pink #nav li li a:hover,
    .news-pink #nav li li a:active,
    .news-pink #nav li.right a:hover,
    .news-pink #subnav li a:hover,
    .news-pink #subnav li a:active,
    .news-pink #subnav .current_page_item a,
    .news-pink #subnav .current-cat a,
    .news-pink #subnav .current-menu-item a,
    .news-pink #subnav li li a:hover,
    .news-pink #subnav li li a:active,
    .news-pink h2 a:hover,
    .news-pink #footer a:hover {
    color: #c62765;
    }

    .news-pink #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-pink #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-pink .navigation li a:hover,
    .news-pink .navigation li.active a {
    background-color: #c62765;
    }

    .news-pink .navigation li a:hover,
    .news-pink .navigation li.active a {
    border: 1px solid #c62765;
    }

    .news-pink h2 a:hover {
    text-decoration: none;
    }

    .news-pink input[type="button"],
    .news-pink input[type="submit"] {
    background-color: #e8358a;
    border: 1px solid #c62765;
    }

    .news-pink input:hover[type="button"],
    .news-pink input:hover[type="submit"] {
    background-color: #c62765;
    border: 1px solid #c62765;
    }


    /* News Purple
    ------------------------------------------------------------ */

    .news-purple a,
    .news-purple a:visited {
    color: #8827c7;
    text-decoration: none;
    }

    .news-purple a:hover {
    text-decoration: underline;
    }

    .news-purple #header ul.nav li li a,
    .news-purple #header ul.nav li li a:link,
    .news-purple #header ul.nav li li a:visited,
    .news-purple #header ul.menu li li a,
    .news-purple #header ul.menu li li a:link,
    .news-purple #header ul.menu li li a:visited,
    .news-purple #nav li li a,
    .news-purple #nav li li a:link,
    .news-purple #nav li li a:visited {
    color: #fff;
    }

    .news-purple #subnav li li a,
    .news-purple #subnav li li a:link,
    .news-purple #subnav li li a:visited,
    .news-purple h2 a,
    .news-purple h2 a:visited {
    color: #333;
    }

    .news-purple #header ul.nav li a:hover,
    .news-purple #header ul.nav li a:active,
    .news-purple #header ul.nav .current_page_item a,
    .news-purple #header ul.nav .current-cat a,
    .news-purple #header ul.nav .current-menu-item a,
    .news-purple #header ul.menu li a:hover,
    .news-purple #header ul.menu li a:active,
    .news-purple #header ul.menu .current_page_item a,
    .news-purple #header ul.menu .current-cat a,
    .news-purple #header ul.menu .current-menu-item a,
    .news-purple #header ul.nav li li a:hover,
    .news-purple #header ul.nav li li a:active,
    .news-purple #header ul.menu li li a:hover,
    .news-purple #header ul.menu li li a:active,
    .news-purple #nav li a:hover,
    .news-purple #nav li a:active,
    .news-purple #nav .current_page_item a,
    .news-purple #nav .current-cat a,
    .news-purple #nav .current-menu-item a,
    .news-purple #nav li li a:hover,
    .news-purple #nav li li a:active,
    .news-purple #nav li.right a:hover,
    .news-purple #subnav li a:hover,
    .news-purple #subnav li a:active,
    .news-purple #subnav .current_page_item a,
    .news-purple #subnav .current-cat a,
    .news-purple #subnav .current-menu-item a,
    .news-purple #subnav li li a:hover,
    .news-purple #subnav li li a:active,
    .news-purple h2 a:hover,
    .news-purple #footer a:hover {
    color: #8827c7;
    }

    .news-purple #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-purple #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-purple .navigation li a:hover,
    .news-purple .navigation li.active a {
    background-color: #8827c7;
    }

    .news-purple .navigation li a:hover,
    .news-purple .navigation li.active a {
    border: 1px solid #8827c7;
    }

    .news-purple h2 a:hover {
    text-decoration: none;
    }

    .news-purple input[type="button"],
    .news-purple input[type="submit"] {
    background-color: #9f2ede;
    border: 1px solid #8827c7;
    }

    .news-purple input:hover[type="button"],
    .news-purple input:hover[type="submit"] {
    background-color: #8827c7;
    border: 1px solid #8827c7;
    }


    /* News Red
    ------------------------------------------------------------ */

    .news-red a,
    .news-red a:visited {
    color: #c72730;
    text-decoration: none;
    }

    .news-red a:hover {
    text-decoration: underline;
    }

    .news-red #header ul.nav li li a,
    .news-red #header ul.nav li li a:link,
    .news-red #header ul.nav li li a:visited,
    .news-red #header ul.menu li li a,
    .news-red #header ul.menu li li a:link,
    .news-red #header ul.menu li li a:visited,
    .news-red #nav li li a,
    .news-red #nav li li a:link,
    .news-red #nav li li a:visited {
    color: #fff;
    }

    .news-red #subnav li li a,
    .news-red #subnav li li a:link,
    .news-red #subnav li li a:visited,
    .news-red h2 a,
    .news-red h2 a:visited {
    color: #333;
    }

    .news-red #header ul.nav li a:hover,
    .news-red #header ul.nav li a:active,
    .news-red #header ul.nav .current_page_item a,
    .news-red #header ul.nav .current-cat a,
    .news-red #header ul.nav .current-menu-item a,
    .news-red #header ul.menu li a:hover,
    .news-red #header ul.menu li a:active,
    .news-red #header ul.menu .current_page_item a,
    .news-red #header ul.menu .current-cat a,
    .news-red #header ul.menu .current-menu-item a,
    .news-red #header ul.nav li li a:hover,
    .news-red #header ul.nav li li a:active,
    .news-red #header ul.menu li li a:hover,
    .news-red #header ul.menu li li a:active,
    .news-red #nav li a:hover,
    .news-red #nav li a:active,
    .news-red #nav .current_page_item a,
    .news-red #nav .current-cat a,
    .news-red #nav .current-menu-item a,
    .news-red #nav li li a:hover,
    .news-red #nav li li a:active,
    .news-red #nav li.right a:hover,
    .news-red #subnav li a:hover,
    .news-red #subnav li a:active,
    .news-red #subnav .current_page_item a,
    .news-red #subnav .current-cat a,
    .news-red #subnav .current-menu-item a,
    .news-red #subnav li li a:hover,
    .news-red #subnav li li a:active,
    .news-red h2 a:hover,
    .news-red #footer a:hover {
    color: #c72730;
    }

    .news-red #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-red #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-red .navigation li a:hover,
    .news-red .navigation li.active a {
    background-color: #c72730;
    }

    .news-red .navigation li a:hover,
    .news-red .navigation li.active a {
    border: 1px solid #c72730;
    }

    .news-red h2 a:hover {
    text-decoration: none;
    }

    .news-red input[type="button"],
    .news-red input[type="submit"] {
    background-color: #e93542;
    border: 1px solid #c72730;
    }

    .news-red input:hover[type="button"],
    .news-red input:hover[type="submit"] {
    background-color: #c72730;
    border: 1px solid #c72730;
    }


    /* News Teal
    ------------------------------------------------------------ */

    .news-teal a,
    .news-teal a:visited {
    color: #27c3c7;
    text-decoration: none;
    }

    .news-teal a:hover {
    text-decoration: underline;
    }

    .news-teal #header ul.nav li li a,
    .news-teal #header ul.nav li li a:link,
    .news-teal #header ul.nav li li a:visited,
    .news-teal #header ul.menu li li a,
    .news-teal #header ul.menu li li a:link,
    .news-teal #header ul.menu li li a:visited,
    .news-teal #nav li li a,
    .news-teal #nav li li a:link,
    .news-teal #nav li li a:visited {
    color: #fff;
    }

    .news-teal #subnav li li a,
    .news-teal #subnav li li a:link,
    .news-teal #subnav li li a:visited,
    .news-teal h2 a,
    .news-teal h2 a:visited {
    color: #333;
    }

    .news-teal #header ul.nav li a:hover,
    .news-teal #header ul.nav li a:active,
    .news-teal #header ul.nav .current_page_item a,
    .news-teal #header ul.nav .current-cat a,
    .news-teal #header ul.nav .current-menu-item a,
    .news-teal #header ul.menu li a:hover,
    .news-teal #header ul.menu li a:active,
    .news-teal #header ul.menu .current_page_item a,
    .news-teal #header ul.menu .current-cat a,
    .news-teal #header ul.menu .current-menu-item a,
    .news-teal #header ul.nav li li a:hover,
    .news-teal #header ul.nav li li a:active,
    .news-teal #header ul.menu li li a:hover,
    .news-teal #header ul.menu li li a:active,
    .news-teal #nav li a:hover,
    .news-teal #nav li a:active,
    .news-teal #nav .current_page_item a,
    .news-teal #nav .current-cat a,
    .news-teal #nav .current-menu-item a,
    .news-teal #nav li li a:hover,
    .news-teal #nav li li a:active,
    .news-teal #nav li.right a:hover,
    .news-teal #subnav li a:hover,
    .news-teal #subnav li a:active,
    .news-teal #subnav .current_page_item a,
    .news-teal #subnav .current-cat a,
    .news-teal #subnav .current-menu-item a,
    .news-teal #subnav li li a:hover,
    .news-teal #subnav li li a:active,
    .news-teal h2 a:hover,
    .news-teal #footer a:hover {
    color: #27c3c7;
    }

    .news-teal #home-top .ui-tabs ul.ui-tabs-nav li a:hover,
    .news-teal #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a,
    .news-teal .navigation li a:hover,
    .news-teal .navigation li.active a {
    background-color: #27c3c7;
    }

    .news-teal .navigation li a:hover,
    .news-teal .navigation li.active a {
    border: 1px solid #27c3c7;
    }

    .news-teal h2 a:hover {
    text-decoration: none;
    }

    .news-teal input[type="button"],
    .news-teal input[type="submit"] {
    background-color: #2edade;
    border: 1px solid #27c3c7;
    }

    .news-teal input:hover[type="button"],
    .news-teal input:hover[type="submit"] {
    background-color: #27c3c7;
    border: 1px solid #27c3c7;
    }

  • avatar
    Last edited:
    01/31/13
    11:58am
    Abdelhadi Touil says:

    The css code I can see it. By the code I mean the php code, because wordpress is a php script :)
    You say that the widget is a plugin, so can you tell me witch plugin is it?

  • avatar
    Last edited:
    01/31/13
    12:00pm
    benjaminconnor says:

    As for the plugin, it's called video sidebar widgets. There are a number of document/files for it.

    The following is the class-videosidebarwidget.php:


    <?php
    /*
    * Widget - Video Sidebar Widget
    */

    //Video Sidebar Widget Class to extend WP_Widget class
    class VideoSidebarWidget extends WP_Widget {

    //function to set up widget in admin
    function VideoSidebarWidget() {

    $widget_ops = array( 'classname' => 'videosidebar',
    'description' => __('A Video Widget to display video in sidebar from various video sharing networks', 'videosidebar') );

    $control_ops = array( 'width' => 200, 'height' => 350, 'id_base' => 'videosidebar' );
    $this->WP_Widget( 'videosidebar', __('Video Sidebar Widget', 'videosidebar'), $widget_ops, $control_ops );

    }


    //function to echo out widget on sidebar
    function widget( $args, $instance ) {
    extract( $args );

    $title2 = apply_filters('widget_title2', $instance['title2'] );
    $cap2 = $instance['v_cap2'];

    echo $before_widget;

    // if user written title echo out
    if ( $title2 ){
    echo $before_title . $title2 . $after_title;
    }

    //get settings from Widget Admin Form to assign to function VSWShowVideo
    $autoplaysetting = $instance['v_autoplay2'];
    $videoid = $instance['v_id2'];
    $videosource = $instance['v_source'];
    $videowidth = $instance['v_width2'];
    $videoheight = $instance['v_height2'];

    //function to show video in blog sidebar, please look for it below
    VSWShowVideo($videosource,$videoid,$autoplaysetting,$videowidth,$videoheight,'false','false');

    if($cap2){
    echo "<p class=\"VideoCaption\">$cap2</p>";
    }

    echo $after_widget;

    }//end of function widget



    //function to update widget setting
    function update( $new_instance, $old_instance ) {

    $instance = $old_instance;
    $instance['title2'] = strip_tags( $new_instance['title2'] );
    $instance['v_width2'] = strip_tags( $new_instance['v_width2'] );
    $instance['v_height2'] = strip_tags( $new_instance['v_height2'] );
    $instance['v_autoplay2'] = strip_tags( $new_instance['v_autoplay2'] );
    $instance['v_id2'] = strip_tags( $new_instance['v_id2'] );
    $instance['v_source'] = strip_tags( $new_instance['v_source'] );
    $instance['v_cap2'] = $new_instance['v_cap2'];
    return $instance;

    }//end of function update


    //function to create Widget Admin form
    function form($instance) {

    $instance = wp_parse_args( (array) $instance, array( 'title2' => '', 'v_width2' => '', 'v_height2' => '',
    'v_autoplay2' => '','v_id2' => '','v_source' => '','v_cap2' => '') );

    $instance['title2'] = strip_tags( $instance['title2'] );
    $instance['v_width2'] = strip_tags( $instance['v_width2'] );
    $instance['v_height2'] = strip_tags( $instance['v_height2'] );
    $instance['v_autoplay2'] = strip_tags( $instance['v_autoplay2'] );
    $instance['v_id2'] = strip_tags( $instance['v_id2'] );
    $instance['v_source'] = strip_tags( $instance['v_source'] );
    $instance['v_cap2'] = $instance['v_cap2'];

    //function to show video in widget admin form fixed width and height, please look for it below
    $autoplaysetting = '0';
    $videoid = $instance['v_id2'];
    $videosource = $instance['v_source'];
    $videowidth = "";
    $videoheight = "";
    //$admin = true // to show video in admin

    VSWShowVideo($videosource,$videoid,$autoplaysetting,$videowidth,$videoheight,'true','false');

    ?>


    <p>
    <label for="<?php echo $this->get_field_id('title2'); ?>">Widget Title:</label>
    <input class="widefat" id="<?php echo $this->get_field_id('title2'); ?>" name="<?php echo $this->get_field_name('title2'); ?>"
    type="text" value="<?php echo $instance['title2']; ?>" />
    </p>

    <p>
    <label for="<?php echo $this->get_field_id( 'v_source' ); ?>">Select Video Source:</label>
    <select id="<?php echo $this->get_field_id( 'v_source' );?>" name="<?php echo $this->get_field_name( 'v_source' );?>" class="widefat" style="width:100%;">

    <?php
    $network = array('YouTube','Vimeo','MySpace','Veoh','Blip','WordPress','Viddler','DailyMotion','Revver','Metacafe','Tudou','Youku','cn6','Google');

    foreach($network as $net){

    echo "<option value='$net'";
    if($instance['v_source'] == $net){
    echo 'selected="selected"';
    }
    echo" >$net</option>";

    }

    ?>


    </select>
    </p>

    <p>
    <label for="<?php echo $this->get_field_id('v_id2'); ?>">Video ID: </label>
    <input class="widefat" id="<?php echo $this->get_field_id('v_id2'); ?>"
    name="<?php echo $this->get_field_name('v_id2'); ?>" type="text" value="<?php echo $instance['v_id2']; ?>" /></p>

    <p>
    <label for="<?php echo $this->get_field_id('v_width2'); ?>">Video Width: </label>
    <input class="widefat" id="<?php echo $this->get_field_id('v_width2'); ?>"
    name="<?php echo $this->get_field_name('v_width2'); ?>" type="text" value="<?php echo $instance['v_width2']; ?>" />
    </p>

    <p>
    <label for="<?php echo $this->get_field_id('v_height2'); ?>">Video Height: </label>
    <input class="widefat" id="<?php echo $this->get_field_id('v_height2'); ?>"
    name="<?php echo $this->get_field_name('v_height2'); ?>" type="text" value="<?php echo $instance['v_height2']; ?>" />
    </p>

    <p>
    <label for="<?php echo $this->get_field_id('v_cap2'); ?>">Video Caption: </label>
    <input class="widefat" id="<?php echo $this->get_field_id('v_cap2'); ?>"
    name="<?php echo $this->get_field_name('v_cap2'); ?>" type="text" value="<?php echo $instance['v_cap2']; ?>" />
    </p>


    <p>

    <?php

    // check whether autoplay feature supported by video network
    $source = $instance['v_source'];
    $msg = "<p>Sorry, auto play option not supported by ".$source."</p>";
    switch ($source) {

    case 'WordPress':
    echo $msg;
    break;

    case 'Tudou':
    echo $msg;
    break;

    case 'Youku':
    echo $msg;
    break;

    case 'Blip':
    echo "<p>Sorry, auto play option removed as it is causing error in Internet Explorer</p>";
    break;

    case 'cn6':
    echo "<p>Sorry, auto play option not supported by 6.cn</p>";
    break;
    }

    ?>

    <label for="<?php echo $this->get_field_id( 'v_autoplay2' ); ?>">Auto Play:</label>
    <select id="<?php echo $this->get_field_id( 'v_autoplay2' );?>"
    name="<?php echo $this->get_field_name( 'v_autoplay2' );?>" class="widefat" style="width:100%;">';
    <option value='1' <?php if($instance['v_autoplay2'] == '1'){echo 'selected="selected"';}?>>Yes</option>
    <option value='0' <?php if($instance['v_autoplay2'] == '0'){echo 'selected="selected"';}?>>No</option>
    </select>
    </p>

    <?php

    }//end of function form($instance)

    }//end of Video Sidebar Widget Class
    ?>

  • avatar
    Last edited:
    01/31/13
    12:01pm
    benjaminconnor says:

    Does that help? :-/

  • avatar
    Last edited:
    01/31/13
    12:05pm
    benjaminconnor says:

    No worries if all of this is a lot of work. Do I need to pay you extra?

  • avatar
    Last edited:
    01/31/13
    12:12pm
    Abdelhadi Touil says:

    Yes, now we are on the right road :)
    For now I must leave, I'll continue with you after ~3 hours..
    Sorry for that, and good luck..

  • avatar
    Last edited:
    01/31/13
    12:29pm
    benjaminconnor says:

    Oh good,

    I'll be in bed. It's 11.30pm in Sydney.

    Will check this thread in the morning.

    Cheers,

    Ben

  • avatar
    Last edited:
    01/31/13
    11:10pm
    Abdelhadi Touil says:

    Back.
    I'v installed the plugin but as I see it needs some time to be edited like you want it, and I don't have enough time for that. I'v found another plugin I think is better, and it let you write a text (post title for example) and put a link, so in the sidebar you'll have the video widget, with your text as link to what you want:

    http://wordpress.org/extend/plugins/widget-video-box/

    Hope you like it. Good luck.

  • avatar
    Last edited:
    02/01/13
    1:29am
    benjaminconnor says:

    Hi Abdelhadi,

    Okay, thanks man.

    I've installed the easy video box widget plugin.

    It's got the link thing, but for some reason it doesn't have the separation line between it and the widget below, which makes it look sloppy (i.e. it merges with the space of the widget below).

    You can check it out here (is merging with the facebook 'like' widget):

    http://benconnormusic.com/

    Also, it doesn't centre so I have to widen it so it goes from one side of the box to the other.

    I would like to be able to have it in the centre with space around it.

    Are these things simple to adjust?

    Here's the php for the plugin:

    <?php
    /*
    Plugin Name: Easy Video Widget Box
    Plugin URI: http://www.purpleturtleproductions.ca/
    Description: Simple plugin to add video into your widget box. Supports Youtube, Dailymotion, Vimeo and many other sites that provide embedd code.. just don't forget to edit the embedd code to the size of your widget box
    Version: 1.2
    Author: Purple Turtle Productions
    Author URI: http://www.purpleturtleproductions.ca/
    */


    class VideoBox extends WP_Widget
    {
    function VideoBox()
    {
    $widget_ops = array('classname' => 'VideoBox', 'description' => 'Displays testimonials for homepage...' );
    $this->WP_Widget('VideoBox', 'Video Box', $widget_ops);
    }

    function form($instance)
    {
    $instance = wp_parse_args( (array) $instance, array( 'video_title' => '', 'video_text' => '', 'video_more' => '', 'video_link' => '' ) );
    $video_title = $instance['video_title'];
    $video_text = $instance['video_text'];
    $video_more = $instance['video_more'];
    $video_link = $instance['video_link'];
    ?>
    <p><label for="<?php echo $this->get_field_id('video_title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('video_title'); ?>" name="<?php echo $this->get_field_name('video_title'); ?>" type="text" value="<?php echo attribute_escape($video_title); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('video_text'); ?>">Embed Code: <textarea class="widefat" id="<?php echo $this->get_field_id('video_text'); ?>" name="<?php echo $this->get_field_name('video_text'); ?>"><?php echo attribute_escape($video_text); ?></textarea></label></p>
    <p><label for="<?php echo $this->get_field_id('video_more'); ?>">More Text: <input class="widefat" id="<?php echo $this->get_field_id('video_more'); ?>" name="<?php echo $this->get_field_name('video_more'); ?>" type="text" value="<?php echo attribute_escape($video_more); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('video_link'); ?>">Link: <input class="widefat" id="<?php echo $this->get_field_id('video_link'); ?>" name="<?php echo $this->get_field_name('video_link'); ?>" type="text" value="<?php echo attribute_escape($video_link); ?>" /></label></p>
    <?php
    }

    function update($new_instance, $old_instance)
    {
    $instance = $old_instance;
    $instance['video_title'] = $new_instance['video_title'];
    $instance['video_text'] = $new_instance['video_text'];
    $instance['video_more'] = $new_instance['video_more'];
    $instance['video_link'] = $new_instance['video_link'];
    return $instance;
    }

    function widget($args, $instance)
    {
    $video_title = $instance['video_title'];
    $video_text = $instance['video_text'];
    $video_more = $instance['video_more'];
    $video_link = $instance['video_link'];
    /*
    if ( get_option('videojs_options') ) {
    preg_match('/ *video[^>]*mp4 *= *["\']?([^"\']*)/i', $video_text, $matches);
    $params['mp4'] = $matches[1];
    $video_text = buildVideoJs($params);
    }
    */

    ?>
    <div class="video-box">
    <?php if ( strlen($video_title)>0) { echo '<h2>'.$video_title.'</h2>'; } ?>
    <?php echo $video_text; ?>
    <?php if ( strlen($video_more)>0) { echo '<br/><a href="'.$video_link.'">'.$video_more.'</a>'; } ?>
    </div>
    <?php
    }

    }
    add_action( 'widgets_init', create_function('', 'return register_widget("VideoBox");') );

    /*
    function buildVideoJs($params) {

    $options = get_option('videojs_options'); //load the defaults

    extract(shortcode_atts(array(
    'mp4' => $params['mp4'],
    'webm' => '',
    'ogg' => '',
    'poster' => '',
    'width' => $options['videojs_width'],
    'height' => $options['videojs_height'],
    'preload' => $options['videojs_preload'],
    'autoplay' => $options['videojs_autoplay'],
    'id' => '',
    'class' => ''
    ), $atts));

    // ID is required for multiple videos to work
    if ($id == '')
    $id = 'example_video_id_'.rand();

    // MP4 Source Supplied
    if ($mp4)
    $mp4_source = '<source src="'.$mp4.'" type=\'video/mp4\' />';
    else
    $mp4_source = '';

    // WebM Source Supplied
    if ($webm)
    $webm_source = '<source src="'.$webm.'" type=\'video/webm; codecs="vp8, vorbis"\' />';
    else
    $webm_source = '';

    // Ogg source supplied
    if ($ogg)
    $ogg_source = '<source src="'.$ogg.'" type=\'video/ogg; codecs="theora, vorbis"\' />';
    else
    $ogg_source = '';

    // Poster image supplied
    if ($poster)
    $poster_attribute = ' poster="'.$poster.'"';
    else
    $poster_attribute = '';

    // Preload the video?
    if ($preload) {
    if ($preload == "on")
    $preload = "auto";

    $preload_attribute = 'preload="'.$preload.'"';
    } else {
    $preload_attribute = '';
    }

    // Autoplay the video?
    if ($autoplay == "true" || $autoplay == "on")
    $autoplay_attribute = " autoplay";
    else
    $autoplay_attribute = "";

    // Is there a custom class?
    if ($class)
    $class = ' ' . $class;


    $videojs = <<<_end_

    <!-- Begin Video.js -->
    <video id="{$id}" class="video-js vjs-default-skin{$class}" width="{$width}" height="{$height}"{$poster_attribute} controls {$preload_attribute}{$autoplay_attribute} data-setup="{}">
    {$mp4_source}
    {$webm_source}
    {$ogg_source}
    </video>
    <!-- End Video.js -->

    _end_;
    return $videojs;
    }
    */

    ?>

  • avatar
    Last edited:
    02/01/13
    1:55am
    benjaminconnor says:

    Oh,

    Also, would like the widget title and link text to indent from the left like the other widgets do.

    Sorry man.

    Would be great if you help.

    Does it only require a few appropriately place php statements in the above text?

    Cheers,

    Ben

  • avatar
    Last edited:
    02/01/13
    10:05am
    Abdelhadi Touil says:

    Add this to your style.css file:

    .video-box {
    border-bottom: 4px solid #EEEEEE;
    }

    the problem should be fixed. Good luck.

  • avatar
    Last edited:
    02/01/13
    10:09am
    Abdelhadi Touil says:

    Please add this code to your style.css file:

    .video-box {
    padding: 15px 20px 20px;
    border-bottom: 4px solid #EEEEEE;
    }


    Use this insted the above one, and make the video player width equal to 265px.
    Good luck.

  • avatar
    Last edited:
    02/01/13
    12:31pm
    benjaminconnor says:

    Hi Abdelhadi,

    It worked and is looking great:

    http://benconnormusic.com/

    Thank you so much!!!

    Did it take much of your time to help me? If so, let me know and i'll send you a little extra cash.

    Cheers,

    Ben

  • avatar
    Last edited:
    02/01/13
    12:53pm
    Abdelhadi Touil says:

    Great news :)
    I was happy to help you for 1$ :) If you want to send me extra cash then Thank you ;)
    Good luck.

  • avatar
    Last edited:
    02/01/13
    11:49pm
    benjaminconnor says:

    Hi Abdelhadi,

    I'd be happy to give you some extra cash. Not sure how to though.

    Would give you a total of $5 for all your help if you assist me with one last thing:

    The line that you helped me put in between the video box and facebook like box is close but not exactly the same as the other lines bordering the widgets. The other ones seem to have a shadow line or something.

    If you could give me the code to whack in CSS to make it exactly the same and send me your account details or however I'm supposed to pay you, I'll do so.

    Thanks again :-)

    Ben

  • avatar
    Last edited:
    02/02/13
    10:19am
    Abdelhadi Touil says:

    Hi.
    What you see it's a border-bottom added to the container of each widget, but for the video widget the plugin's developer dosn't add some html code to the plugin, so I'v added it for you (but if you update the plugin in the futur you'll lose these changes).
    Open the video-box.php file and replace it by this code and save changes:

    <?php
    /*
    Plugin Name: Easy Video Widget Box
    Plugin URI: http://www.purpleturtleproductions.ca/
    Description: Simple plugin to add video into your widget box. Supports Youtube, Dailymotion, Vimeo and many other sites that provide embedd code.. just don't forget to edit the embedd code to the size of your widget box
    Version: 1.2
    Author: Purple Turtle Productions
    Author URI: http://www.purpleturtleproductions.ca/
    */


    class VideoBox extends WP_Widget
    {
    function VideoBox()
    {
    $widget_ops = array('classname' => 'VideoBox', 'description' => 'Displays testimonials for homepage...' );
    $this->WP_Widget('VideoBox', 'Video Box', $widget_ops);
    }

    function form($instance)
    {
    $instance = wp_parse_args( (array) $instance, array( 'video_title' => '', 'video_text' => '', 'video_more' => '', 'video_link' => '' ) );
    $video_title = $instance['video_title'];
    $video_text = $instance['video_text'];
    $video_more = $instance['video_more'];
    $video_link = $instance['video_link'];
    ?>
    <p><label for="<?php echo $this->get_field_id('video_title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('video_title'); ?>" name="<?php echo $this->get_field_name('video_title'); ?>" type="text" value="<?php echo attribute_escape($video_title); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('video_text'); ?>">Embed Code: <textarea class="widefat" id="<?php echo $this->get_field_id('video_text'); ?>" name="<?php echo $this->get_field_name('video_text'); ?>"><?php echo attribute_escape($video_text); ?></textarea></label></p>
    <p><label for="<?php echo $this->get_field_id('video_more'); ?>">More Text: <input class="widefat" id="<?php echo $this->get_field_id('video_more'); ?>" name="<?php echo $this->get_field_name('video_more'); ?>" type="text" value="<?php echo attribute_escape($video_more); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('video_link'); ?>">Link: <input class="widefat" id="<?php echo $this->get_field_id('video_link'); ?>" name="<?php echo $this->get_field_name('video_link'); ?>" type="text" value="<?php echo attribute_escape($video_link); ?>" /></label></p>
    <?php
    }

    function update($new_instance, $old_instance)
    {
    $instance = $old_instance;
    $instance['video_title'] = $new_instance['video_title'];
    $instance['video_text'] = $new_instance['video_text'];
    $instance['video_more'] = $new_instance['video_more'];
    $instance['video_link'] = $new_instance['video_link'];
    return $instance;
    }

    function widget($args, $instance)
    {
    $video_title = $instance['video_title'];
    $video_text = $instance['video_text'];
    $video_more = $instance['video_more'];
    $video_link = $instance['video_link'];
    /*
    if ( get_option('videojs_options') ) {
    preg_match('/ *video[^>]*mp4 *= *["\']?([^"\']*)/i', $video_text, $matches);
    $params['mp4'] = $matches[1];
    $video_text = buildVideoJs($params);
    }
    */

    ?>
    <div class="widget widget_video-box">
    <div class="video-box">
    <?php if ( strlen($video_title)>0) { echo '<h2>'.$video_title.'</h2>'; } ?>
    <?php echo $video_text; ?>
    <?php if ( strlen($video_more)>0) { echo '<br/><a href="'.$video_link.'">'.$video_more.'</a>'; } ?>
    </div>
    </div>
    <?php
    }

    }
    add_action( 'widgets_init', create_function('', 'return register_widget("VideoBox");') );

    /*
    function buildVideoJs($params) {

    $options = get_option('videojs_options'); //load the defaults

    extract(shortcode_atts(array(
    'mp4' => $params['mp4'],
    'webm' => '',
    'ogg' => '',
    'poster' => '',
    'width' => $options['videojs_width'],
    'height' => $options['videojs_height'],
    'preload' => $options['videojs_preload'],
    'autoplay' => $options['videojs_autoplay'],
    'id' => '',
    'class' => ''
    ), $atts));

    // ID is required for multiple videos to work
    if ($id == '')
    $id = 'example_video_id_'.rand();

    // MP4 Source Supplied
    if ($mp4)
    $mp4_source = '<source src="'.$mp4.'" type=\'video/mp4\' />';
    else
    $mp4_source = '';

    // WebM Source Supplied
    if ($webm)
    $webm_source = '<source src="'.$webm.'" type=\'video/webm; codecs="vp8, vorbis"\' />';
    else
    $webm_source = '';

    // Ogg source supplied
    if ($ogg)
    $ogg_source = '<source src="'.$ogg.'" type=\'video/ogg; codecs="theora, vorbis"\' />';
    else
    $ogg_source = '';

    // Poster image supplied
    if ($poster)
    $poster_attribute = ' poster="'.$poster.'"';
    else
    $poster_attribute = '';

    // Preload the video?
    if ($preload) {
    if ($preload == "on")
    $preload = "auto";

    $preload_attribute = 'preload="'.$preload.'"';
    } else {
    $preload_attribute = '';
    }

    // Autoplay the video?
    if ($autoplay == "true" || $autoplay == "on")
    $autoplay_attribute = " autoplay";
    else
    $autoplay_attribute = "";

    // Is there a custom class?
    if ($class)
    $class = ' ' . $class;


    $videojs = <<<_end_

    <!-- Begin Video.js -->
    <video id="{$id}" class="video-js vjs-default-skin{$class}" width="{$width}" height="{$height}"{$poster_attribute} controls {$preload_attribute}{$autoplay_attribute} data-setup="{}">
    {$mp4_source}
    {$webm_source}
    {$ogg_source}
    </video>
    <!-- End Video.js -->

    _end_;
    return $videojs;
    }
    */

    ?>

    It must work. Good luck.

  • avatar
    Last edited:
    02/04/13
    6:58am
    benjaminconnor says:

    Thanks Abdelhadi, that's worked a treat!

    Sorry for the delay. Had a busy weekend

    Let me know if I do anything to thank you.

    Cheers,

    Ben

  • avatar
    Last edited:
    02/04/13
    6:59am
    benjaminconnor says:

    Hi Trevor,

    Thanks for this, but problem has already been solved.

    Cheers,

    Ben

This question has expired.





Current status of this question: Community pot



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.