-
AuthorPosts
-
bowman999 Friend
bowman999
- Join date:
- April 2007
- Posts:
- 119
- Downloads:
- 13
- Uploads:
- 7
- Thanks:
- 25
- Thanked:
- 14 times in 1 posts
February 13, 2013 at 3:35 am #184916I’m trying to create a new article CSS Style for The Wall template (called “original-size”) because a lot of my images are very small (90px by 130px) and look silly when stretched by the template. I’d like to be able to add this style to the Extended Classes” just like, “Blue”, “Dark”, etc. when an article’s image is tiny.
I’ve attached a Photoshoped image to illustrate what I’m after. The two main aims:
1. The first article image would display in its original size/aspect ratio.
2. The article title would be wrapped/floated to the right along with the badge”New”, “Top”, etc.Could anyone give me guidance on how to do this using one of the default CSS styles as a base? Can it be done?
Help appreciated. Thanks. John
Wall Crasher DeveloperWall Crasher
- Join date:
- December 2011
- Posts:
- 1113
- Downloads:
- 0
- Uploads:
- 15
- Thanks:
- 66
- Thanked:
- 361 times in 300 posts
February 14, 2013 at 10:18 am #483411Hi bowman999,
It can be done with some change of php file and CSS.
but with the current HTML structure it will be very hard to get your request done .Please consider hiring a developer at http://www.joomlancers.com/ to help you. 🙂
You just need to check the new Extended Class and change the structure.
Then with the help of little CSS, it will display as you desire.Regards
bowman999 Friendbowman999
- Join date:
- April 2007
- Posts:
- 119
- Downloads:
- 13
- Uploads:
- 7
- Thanks:
- 25
- Thanked:
- 14 times in 1 posts
February 15, 2013 at 11:46 am #483550Hi Wall Crasher, Since no one responded, I did it myself (always the best way I guess :)). Managed to do it just with CSS. Good for small images (under 100px wide) or if you have a site where most of the images are the same size. Floats the image to the left and the heading to the right (and badge too). It fixes the width and height of the image to one size. I’ve pasted the new “Original Size” style code below in case anyone wants to use it, or if you guys think it might be worth adapting for the next Wall update (hopefully soon with a Joomla 3.0 version!). I’ve attached an image as well to show you how the style looks.
Cheers,
John
/* Original Size Style ---*/.item.original .article-info dd {
float: right !important;
width: 120px !important;
margin-left: 40px !important;
}.item.original.item-inner {
background: #333
border-color: #333
color: #FFF
}
.item.original .header h2 a {
color: #8c0000
font-weight: normal;
margin-bottom:0px;
}.item.original:hover h2 a {
color: #000000
}.item.original.footer {
background-color: #999999
color: #CCC
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.item.original.footer .article-info,
.item.original.footer .article-hit,
.item.original.footer .jac-add-button,
.item.original.footer a {}
.item.original .item-image {
width: 90px !important;
height: auto !important;
float:left;
}.item.original .item-header {
margin-left: 65px !important;
color: #8c0000 !important ;
}.item.original .header h2 {
font-size: 150%;
margin-left: 40px !important;
}.item.original .readmore a {
background: #666
color: #FFF
border-color: #666 !important;
text-shadow: none !important}
.item.original:hover .readmore a {
background: #8c0000
color: #FFF
font-weight: normal;
border-color: #8c0000 !important;
text-shadow: none !important
}
Wall Crasher DeveloperWall Crasher
- Join date:
- December 2011
- Posts:
- 1113
- Downloads:
- 0
- Uploads:
- 15
- Thanks:
- 66
- Thanked:
- 361 times in 300 posts
February 16, 2013 at 1:54 am #483588Hi bowman999,
It is good that you are happy with your work.
I see the author description also float to the right.
This feature is not complete so i am not sure that if it will be included in the release of JA Wall for Joomla 3.0Regards
bowman999 Friendbowman999
- Join date:
- April 2007
- Posts:
- 119
- Downloads:
- 13
- Uploads:
- 7
- Thanks:
- 25
- Thanked:
- 14 times in 1 posts
February 17, 2013 at 11:55 am #483696Thanks Wall Crasher,
What’s a better way to do the author bit do you think (rather than floating?) Any suggestions on how to make it better appreciated!
I’m just testing everything out on my development server at the moment, while I wait for The Wall Joomla 3.0 release (is that far off??!:-))
Might have to dive into the PHP this week and try a few things.Loving the template so far.
Cheers,
John
Wall Crasher DeveloperWall Crasher
- Join date:
- December 2011
- Posts:
- 1113
- Downloads:
- 0
- Uploads:
- 15
- Thanks:
- 66
- Thanked:
- 361 times in 300 posts
February 18, 2013 at 3:13 am #483723Hi John,
As I said, you should consider checking PHP to generate another HTML markup.
Here the simple implementation for Joomla Content.1. templatesja_wallhtmlcom_contentcategoryblog_item.php
<?php
/**
* ------------------------------------------------------------------------
* JA Wall Template for Joomla25
* ------------------------------------------------------------------------
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license - Copyrighted Commercial Software
* Author: J.O.O.M Solutions Co., Ltd
* Websites: http://www.joomlart.com - http://www.joomlancers.com
* This file may not be redistributed in whole or significant part.
* ------------------------------------------------------------------------
*/// no direct access
defined('_JEXEC') or die('Restricted access');
// Create a shortcut for params.JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.framework', true);$params = &$this->item->params;
$canEdit = $params->get('access-edit');$images = new stdClass();
if (isset($this->item->images)) {
$images = json_decode($this->item->images);
}// get extended classes
$metadataParams = new JRegistry;
$metadataParams->loadString($this->item->metadata);
$xclass = $metadataParams->get('xclass');$app = JFactory::getApplication();
$tmpl = $app->getTemplate(true);
$hothits = $tmpl->params->get ('hothits', 1000);$atitle = $this->escape($this->item->title);
// detail link
if ($params->get('access-view')) :
$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
else :
$menu = JFactory::getApplication()->getMenu();
$active = $menu->getActive();
$itemId = $active->id;
$link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
$link = new JURI($link1);
$link->setVar('return', base64_encode($returnURL));
endif;// build intro images
if ($tmpl->params->get ('jawall_autoimg', 1)){
WallHelper::buildImage($images, $this->item);
}// build intro content
// get some first paragraph in introtext, trip tags (keep a, strong, br, b...)
$introtext = WallHelper::extractFirstParagraph($this->item->introtext);$iclass = array('item', strtolower($this->item->category_alias));
if(!empty($xclass)){ $iclass[] = $xclass; }
if($this->item->state == 0){ $iclass[] = 'system-unpublished'; }
if($this->item->hits >= $hothits){ $iclass[] = 'item-hot'; }
if(empty($images->image_intro)){ $iclass[] = 'no-image'; }?>
<div class="<?php echo implode(' ', $iclass) ?>">
<div class="inner item-inner clearfix"><?php if ($this->item->state == 0) : ?>
<div class="system-unpublished">
<?php endif; ?><?php if(JString::strpos($xclass, 'original') === false): ?>
<!-- Item Img -->
<div class="item-image">
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php endif; ?>
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<span>Â </span>
<span class="item-pin">Â </span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<!-- //Item Img -->
<?php endif; ?><div class="item-main clearfix">
<!-- Item header -->
<div class="header item-header clearfix"><?php if(JString::strpos($xclass, 'original') !== false): ?>
<!-- Item Img -->
<div class="item-image">
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php endif; ?>
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<span>Â </span>
<span class="item-pin">Â </span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<!-- //Item Img -->
<?php endif; ?><?php if ($params->get('show_title')) : ?>
<h2>
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php echo $atitle ?></a>
<?php else : ?>
<?php echo $atitle ?>
<?php endif; ?><?php if ($params->get('show_print_icon') || $params->get('show_email_icon') || $canEdit) : ?>
<ul class="actions">
<?php if ($params->get('show_print_icon')) : ?>
<li class="print-icon">
<?php echo JHtml::_('icon.print_popup', $this->item, $params); ?>
</li>
<?php endif; ?>
<?php if ($params->get('show_email_icon')) : ?>
<li class="email-icon">
<?php echo JHtml::_('icon.email', $this->item, $params); ?>
</li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon">
<?php echo JHtml::_('icon.edit', $this->item, $params); ?>
</li>
<?php endif; ?>
</ul>
<?php endif; ?>
</h2>
<?php endif; ?><?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category'))) : ?>
<dl class="article-info">
<dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>
<?php endif; ?><?php if ($params->get('show_parent_category') && $this->item->parent_id != 1) : ?>
<dd class="parent-category-name">
<?php $title = $this->escape($this->item->parent_title);
$url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_id)) . '">' . $title . '</a>'; ?>
<?php if ($params->get('link_parent_category')) : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?><?php if ($params->get('show_category')) : ?>
<dd class="category-name">
<?php $title = $this->escape($this->item->category_title);
$url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catid)) . '">' . $title . '</a>'; ?>
<?php if ($params->get('link_category')) : ?>
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_CATEGORY', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_CATEGORY', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?><?php if ($params->get('show_create_date')) : ?>
<dd class="create">
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?><?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?><?php if ($params->get('show_publish_date')) : ?>
<dd class="published">
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?><?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
<dd class="createdby">
<?php $author = $this->item->author; ?>
<?php $author = ($this->item->created_by_alias ? $this->item->created_by_alias : $author);?><?php if (!empty($this->item->contactid ) && $params->get('link_author') == true):?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY' ,
JHtml::_('link', JRoute::_('index.php?option=com_contact&view=contact&id='.$this->item->contactid), $author)); ?>
<?php else :?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
<?php endif; ?>
</dd>
<?php endif; ?><?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category'))) :?>
</dl>
<?php endif; ?></div>
<!-- //Item header --><!-- Item content -->
<div class="content item-content">
<?php echo $introtext; ?>
</div>
<!-- //Item content --><!-- Item footer -->
<div class="footer item-footer clearfix"><?php if (!$params->get('show_intro')) : ?>
<?php echo $this->item->event->afterDisplayTitle; ?>
<?php endif; ?><?php echo $this->item->event->beforeDisplayContent; ?>
<?php // to do not that elegant would be nice to group the params ?>
<?php if (($params->get('show_hits'))) : ?>
<dl class="article-hit">
<dd class="hits">
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>
</dl>
<?php endif; ?><?php if ($params->get('show_readmore') && $this->item->readmore) :
?>
<p class="readmore">
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php if (!$params->get('access-view')) :
echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
elseif ($readmore = $this->item->alternative_readmore) :
echo $readmore;
if ($params->get('show_readmore_title', 0) != 0) :
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif;
elseif ($params->get('show_readmore_title', 0) == 0) :
echo JText::sprintf('TPL_WALL_COM_CONTENT_READ_MORE_TITLE');
else :
echo JText::_('COM_CONTENT_READ_MORE');
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif; ?>
</a>
</p>
<?php endif; ?><?php if ($this->item->state == 0) : ?>
</div>
<?php endif; ?></div>
<!-- //Item footer -->
</div><div class="item-separator">Â </div>
<?php echo $this->item->event->afterDisplayContent; ?>
</div>
</div>2. Open templatesja_wallcsstemplate.css and add these CSS rule to the bottom of file
/* item original */
.item.original .item-image {
float: left;
margin: 0 10px 0 0;
}.item.original img {
width: 100px;
}.item.original .article-info {
clear: both;
}🙂 You can also check and add similar php code if you are using K2 content.
Regards
1 user says Thank You to Wall Crasher for this useful post
bowman999 Friendbowman999
- Join date:
- April 2007
- Posts:
- 119
- Downloads:
- 13
- Uploads:
- 7
- Thanks:
- 25
- Thanked:
- 14 times in 1 posts
February 18, 2013 at 11:05 am #483792Awesome! That’s brilliant. Will check it out.
AuthorPostsViewing 7 posts - 1 through 7 (of 7 total)This topic contains 7 replies, has 2 voices, and was last updated by bowman999 11 years, 10 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Jump to forum