Joomla Templates Club 406,261 posts

[johanrn Friend johanrnJoin date: December 2007Posts: 33Downloads:0Uploads:5 Thanks: 7]

#158088

Hi,

I like this template a lot. However, there is one thing in the JA Events template that I think would make the JA Community template (and my future website) even better.

Is it possible at all to implement the very nice “date bar” or whatever I should call it, into the Ja Community template?

See attached screen shot for information about what I mean with the “date bar”. I want it to look exactly as it does in the Events template.

Thanks in advance!

---

Attachments:

1. 

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#369489

Hi @johanrn,

If you want added “date bar” for ja community template as in the events template, please try do as following:
– Open “default_item.php” on location “templatesja_eventshtmlcom_contentfrontpage”, then go to line code 111, copy block code


/*Start this line*/
<?php if($this->item->event->beforeDisplayContent): ?>
<div class="ja-before-content">
....
<?php echo $this->item->event->beforeDisplayContent; ?>
</div>
</div>
<?php endif; ?>

– Open “default_item.php” on location “templatesja_community_plushtmlcom_contentfrontpage”, then go to line 33 you can see this line code


<?php echo $this->item->event->beforeDisplayContent; ?>

Delete this line code and paste your copied code at line 17 before line comment “//get images”.
– Ok, now your template has “date bar”, copy style of “date bar” from ja event template to ja community template as
copy

/*This style copy from ja events template*/
.ja-social-toolbox-small {
float:left;
margin-right:10px;
}
.ja-social-toolbox-small .inner {
padding:0px !important;
}

div.ja-before-content {
background: url(../images/afc-bg.gif) repeat-y right top;
margin-top: 10px;
}

div.ja-before-content .ja-before-inner{
background: #DEEFF7;
border: 1px solid #C1DEEC;
border-right: 0;
margin-right: 18px;
padding: 3px 5px 0;
}

.ja-social-toolbox-small .articleCreated {

background:transparent url(../images/small-date-bg.png) no-repeat scroll right center;
color:#FFFFFF;
float:left;
margin:-3px 10px 0 -5px;
padding:4px 10px;
width:70px;
}
div.ja-retweet-horizontal-home {
margin:4px 0;
}
div.articleCreated {
margin-bottom:10px;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
}
div.articleCreated span.date {
display:block;
float:left;
font-family:"Trebuchet MS",Arial,sans-serif;
font-size:220%;
font-weight:bold;
line-height:1;
margin-bottom:0px;
margin-right:5px;
}

div.articleCreated .month, div.articleCreated .year {
padding:3px 0 1px;
display:block;
font-size:9px;
line-height:1;
text-transform:uppercase;
color:#FFFFFF;
}

paste to end of content “template.css” file on location “templatesja_community_pluscss”, you must copy “afc-bg.gif” image file from ja event to image folder of ja community.
– End of all, config to show date of article, and install tweet plugin, on config page choose value of “Display settings > Position” param is “Before Content Display”, do same for other plugins.

See my screen shot

1 user says Thank You to thuanlq for this useful post

1. johanrn

[johanrn Friend johanrnJoin date: December 2007Posts: 33Downloads:0Uploads:5 Thanks: 7]

#369516

Thanks a lot!! I am in awe of your skills! 🙂

[Author]

Posts