Joomla Templates Club 406,261 posts

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#158818

Hello friends,

I JomSocial 2.0.4 with the theme “ja_social” in the JA Events.

And wants to create two columns of the video list.
I read this post, which unfortunately does not work on my JomSocial 2.0.4!

Does anyone know how I can do it,
that in the home, in two columns to see the videos and can also if on “Show All Videos” clicks?

Thanks in advance

Best regards
Sakari

[sakari Friend sakariJoin date: February 2009Posts: 171Downloads:111Uploads:79 Thanks: 43 Thanked: 15 times in 1 posts]

#372443

Have a viewable solution!

Searches the style.css file under components / com_community / templates / ja_social / css / style.css
and find this code:


/*
* COMMUNITY : VIDEO (LISTING)
- frontpage.index.php
- groups.viewgroup.php
- videos.list.php
*/

body #community-wrap #latest-videos .app-box-footer {
border-top: 0;
padding-top: 0;
}

body #community-wrap #latest-videos-container {
margin: 0 -15px;
}

body #community-wrap ul.profile-details li.video { padding-top: 3px; }

body #community-wrap a.icon-videos {
background: url("../images/icons/icons-16x16.gif") no-repeat scroll 0 -398px transparent;
padding-left: 20px;
}

body #community-wrap a.icon-videos-remove {
background: url(../images/action/icon-video-remove.png) no-repeat;
padding: 2px 0 0 23px;
font-size: 92%;
}

body #community-wrap .video-items {
margin: 0;
padding: 0 15px;
border-bottom: 1px solid #e7edf1;
background: #fff;
}

body.ja-social #community-wrap .video-item {
margin: 0 -15px;
padding: 0 15px;
border-bottom: 1px solid #e7edf1;
}

body.ja-social #community-wrap .video-item .video-item {
background: #fff;
border: 1px solid #fff; /* Fix clear */
padding: 5px 0 10px;
margin: 0;
}

body.ja-social-fp #community-wrap .video-item .video-item {
margin: 0;
padding: 0 15px;
border-bottom: 1px solid #e7edf1;
}

body.ja-social-fp #community-wrap .video-item {
margin: 0;
padding: 0;
border-bottom: 0;
}

body #community-wrap #latest-videos .video-item,
body #community-wrap #community-group-videos .video-item,
body #community-wrap #community-group-side-videos .video-item {
float: none;
overflow: hidden;
display: block;
width: auto;
}

body #community-wrap .video-item .video-item {
float: none;
width: auto;
position: relative;
margin: 0;
border-bottom: none;
}

body #community-wrap .video-thumb {
float: left;
padding: 10px 20px 10px 0; /* Did not use margin because it breaks on IE6/7 */
position: relative;
}

body #community-wrap .video-thumb a {
border: 1px solid #d6e4ec;
display: block;
padding: 1px;
}

body #community-wrap .video-thumb img { margin: 0 !important; }

body #community-wrap .video-thumb-url {
display: block;
background: url(../../../assets/video_thumb.png) no-repeat center;
overflow: hidden;
}

body #community-wrap .video-durationHMS {
position: absolute;
bottom: 13px;
left: 2px; /* Due to .video-thumb's using padding and not margin */
background: black;
opacity: 0.7;
color: #FFF;
font-size: 80%;
font-weight: bold;
padding: 0 5px;
}

body #community-wrap .video-summary { margin: 10px; margin-bottom: 0; clear: both; }

body #community-wrap .video-title {
font-weight: bold;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}

body #community-wrap .video-lastupdated { color: #666; }

body #community-wrap .video-creatorName a { color: #333; font-weight: bold; }

body #community-wrap .video-description {
margin: 0;
padding: 0;
}

/*
.video-add
*/
body #cWindow .video-addType {
vertical-align: top;
width: 50%;
height: 200px;
padding: 10px;
position: relative;
}

body #cWindow .video-addType.link { }

body #cWindow .video-addType.upload { border-left: 1px solid #DDD; }

body #cWindow .video-addType-name {
font-weight: bold; /* Reset inheritance from Joomla! template */
margin: 0;
padding: 0;
}

body #cWindow .video-addType-description { /* Reset inheritance from Joomla! template */ margin: 10px 0; padding: 0; }

body #cWindow .video-providers { padding-left: 15px; margin: 0; }

body #cWindow .video-provider {
width: 49%;
float: left; /* Reset inheritance from Joomla! template */
margin: 0;
padding: 0;
background: none;
list-style-type: disc;
line-height: 150%;
}

body #cWindow .video-uploadRules { padding-left: 15px; margin: 0; }

body #cWindow .video-uploadRule {
/* Reset inheritance from Joomla! template */
margin: 0;
padding: 0;
background: none;
list-style-type: disc;
line-height: 150%;
}

body #cWindow .video-action { }

body #cWindow .video-addType.link .video-action { margin-top: 15px; }

body #cWindow .video-addType.upload .video-action { margin-top: 20px; }

/*
* COMMUNITY : PROFILE / CHANGE PROFILE VIDEO
- profile.linkvideo.php
- videos.video.php
*/
#community-wrap .vidSubmenu {
margin: 0 0 10px;
background: #eee;
border: solid 1px #ccc;
}

#community-wrap .vidSubmenu .submenu { border-top: 1px solid #ccc; }

#community-wrap .vidSubmenu .action a { border-left: 1px solid #ccc; }

body #community-wrap .video-permalink { padding: 10px 0; position: relative; }

body #community-wrap .video-permalink .video-label {
width: 72px;
font-weight: bold;
height: 20px;
line-height: 20px;
position: absolute;
left: 5px;
top: 10px;
}

body #community-wrap .video-permalink div.video-link {
display: block !important;
margin: 0 15px 0 80px;
padding: 0;
}

body #community-wrap .video-permalink input { width: 100%; margin: 0; padding: 0; height: 20px; line-height: 20px; }

#community-wrap .video-full { background: #fff; padding: 10px 15px; }

#community-wrap .video-wall #wallForm,
#community-wrap .video-wall #wallContent {
background: transparent;
border: none;
padding: 0;
}

#community-wrap .video-wall #wallForm {
border-bottom: 1px solid #d6e4ec;
}

/* change profile video */
#community-wrap .video-head { position: relative; }

#community-wrap .video-remove { position: absolute; right: 0; top: 7px; }

body #community-wrap .video-player {
text-align: center;
background: #ddd;
padding: 15px 0;
border: 1px solid #ccc;
}

body #community-wrap .video-full .video-summary { padding: 10px; height: auto; margin: 0; /* reset inheritance from .video */ }

body #community-wrap .video-full .video-actions {
display: block;
margin-top: 10px;
position: relative; /* Remove inheritance */
}

#linkVideo #videoLinkUrl { width: 100%; }

#uploadVideo #videoTitle { width: 100%; }

#uploadVideo #description { width: 100%; height: 135px; }

and replaced it with this code:

/*
* COMMUNITY : VIDEO (LISTING)
- frontpage.index.php
- groups.viewgroup.php
- videos.list.php
*/
body #community-wrap ul.profile-details li.video {
padding-top: 3px;
}
body #community-wrap a.icon-videos {
background: url("../images/icons/icons-16x16.gif") no-repeat scroll 0 -398px transparent;
padding-left: 20px;
}
body #community-wrap a.icon-videos-remove {
background: url(../images/action/icon-video-remove.png) no-repeat;
padding: 2px 0 0 23px;
font-size: 90%;
}
/* Video Items two Columns */
div.video-items .video-item { width: 95%; }

body #community-wrap .video-items {
margin: 0 -5px;
}
body #community-wrap .video-item {
float: left;
width: 50%;
background:#fff !important;
padding:0px;
position:relative;
margin-bottom:0px;

}
body #community-wrap #latest-videos .video-item,
body #community-wrap #community-group-videos .video-item,
body #community-wrap #community-group-side-videos .video-item {
float: left;
overflow: hidden;
display: block;
width: 330px;
hight: 110px;
margin: 10 -5px;
}

body #community-wrap .video-item .video-item {
/* Reset from parent (body #community-wrap .video-item) */
float: none;
width: auto;
position: relative;
margin: 5px;
border: 0px solid #ccc;
box-shadow: none;
-moz-box-shadow:0 0 0 0;
}
body #community-wrap .video-thumb {
float: left;
padding: 10px; /* Did not use margin because it breaks on IE6/7 */
position: relative;
}
body #community-wrap .video-thumb img {
/* Avoid .jomTips interference */
margin: 0 !important;
}
body #community-wrap .video-thumb-url {
display: block;
background: url(../../../assets/video_thumb.png) no-repeat center;
overflow: hidden;
}
body #community-wrap .video-durationHMS {
position: absolute;
bottom: 10px; left: 10px; /* Due to .video-thumb's using padding and not margin */

background: black;
opacity: 0.7;
color: #FFF;

font-size: 80%;
font-weight: bold;
padding: 0 5px;
}
body #community-wrap .video-summary {
margin: 10px;
margin-bottom: 0;
}
body #community-wrap .video-title {
overflow: hidden;
position: relative;
white-space: nowrap;
margin: 0; padding: 0; /* Remove any possible <h3> inheritance from Joomla! template */
}
body #community-wrap .video-description {
margin: 0; padding: 0; /* Remove any possible <p> inheritance from Joomla! template */
}

/*
.video-add
*/
body #cWindow .video-addType {
vertical-align: top;
width: 50%;
height: 200px;
padding: 10px;

position: relative;
}
body #cWindow .video-addType.link {
}
body #cWindow .video-addType.upload {
border-left: 1px solid #DDD;
}
body #cWindow .video-addType-name {
font-weight: bold;

/* Reset inheritance from Joomla! template */
margin: 0; padding: 0;
}
body #cWindow .video-addType-description {
/* Reset inheritance from Joomla! template */
margin: 10px 0; padding: 0;
}
body #cWindow .video-providers {
padding-left: 15px;
margin: 0;
}
body #cWindow .video-provider {
width: 49%;
float: left;
/* Reset inheritance from Joomla! template */
margin: 0; padding: 0; background: none;
list-style-type: disc; line-height: 150%;
}
body #cWindow .video-uploadRules {
padding-left: 15px;
margin: 0;
}
body #cWindow .video-uploadRule {
/* Reset inheritance from Joomla! template */
margin: 0; padding: 0; background: none;
list-style-type: disc; line-height: 150%;
}
body #cWindow .video-action {

}
body #cWindow .video-addType.link .video-action {
margin-top: 15px;
}
body #cWindow .video-addType.upload .video-action {
margin-top: 20px;
}/*
* COMMUNITY : PROFILE / CHANGE PROFILE VIDEO
- profile.linkvideo.php
- videos.video.php
*/
#community-wrap .vidSubmenu {
margin: 0 0 10px;
background: #eee;
border: solid 1px #ccc;
}

#community-wrap .vidSubmenu .submenu { border-top: 1px solid #ccc; }

#community-wrap .vidSubmenu .action a { border-left: 1px solid #ccc; }

body #community-wrap .video-permalink { padding: 10px 0; position: relative; }

body #community-wrap .video-permalink .video-label {
width: 72px;
font-weight: bold;
height: 20px;
line-height: 20px;
position: absolute;
left: 5px;
top: 10px;
}

body #community-wrap .video-permalink div.video-link {
display: block !important;
margin: 0 15px 0 80px;
padding: 0;
}

body #community-wrap .video-permalink input { width: 100%; margin: 0; padding: 0; height: 20px; line-height: 20px; }

#community-wrap .video-full { background: #fff; padding: 10px 15px; }

#community-wrap .video-wall #wallForm,
#community-wrap .video-wall #wallContent {
background: transparent;
border: none;
padding: 0;
}

#community-wrap .video-wall #wallForm {
border-bottom: 1px solid #d6e4ec;
}

/* change profile video */
#community-wrap .video-head { position: relative; }

#community-wrap .video-remove { position: absolute; right: 0; top: 7px; }

body #community-wrap .video-player {
text-align: center;
background: #ddd;
padding: 15px 0;
border: 1px solid #ccc;
}

body #community-wrap .video-full .video-summary { padding: 10px; height: auto; margin: 0; /* reset inheritance from .video */ }

body #community-wrap .video-full .video-actions {
display: block;
margin-top: 10px;
position: relative; /* Remove inheritance */
}

#linkVideo #videoLinkUrl { width: 100%; }

#uploadVideo #videoTitle { width: 100%; }

#uploadVideo #description { width: 100%; height: 135px; }


That is, where to begin this text:

/*
* COMMUNITY : VIDEO (LISTING)
– frontpage.index.php
– groups.viewgroup.php
– videos.list.php
*/

and before the text begins:

/*
* COMMUNITY : MY APPS FIX for WALL COMMENT
*/

I hope it helps! 🙂

Greetings
Sakari

[Author]

Posts