-
Is there any way to look article category look beautiful when adding more than 3 article items? I am trying to add more than 3 articles and one article on the second row goes to the left before category information, I want to look it like first row [when adding 3 articles, default layout].
On this link if you scroll down to Featured Products module you see there are only 3 articles, but if you add more than 3 articles the second and third row looks very ugly. Please see the attached file:
I want to look all row like first one with sidebar background on the left side as seen on 1 row only.
Thank you!You can give it a try with this workaround:
– Open the file: /templates/your_template_name/html/mod_articles_category/triangle.php then replace this code block:
<div class="triangle-style category-module<?php echo $moduleclass_sfx; ?>">
<?php
//Get category info
if(isset($jacategory)) : ?>
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-12 category-info background-primary">
<div class="grid-1x2 grid-inner">
<h3 class="category-title">
<?php
$cat_title = $jacategory->title;
$cat_titles = explode(" ",$cat_title);
echo '<span class="first-letter">'.$cat_titles[0].'</span>';
unset($cat_titles[0]);
echo ' '.implode(" ",$cat_titles);
?>
</h3>
<div class="category-des">
<?php echo $jacategory->description;?>
</div>
<a class="btn btn-primary btn-icon" href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($jacategory->id));?>"><?php echo JText::_('VIEW_ALL'); ?> <i class="fa fa fa-long-arrow-right"></i></a>
</div>
</div>
<?php endif;
//End add
?><?php $count=0; foreach ($_list as $item) : ?>
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-4 <?php if($count%2): echo 'triangle-up'; else: echo 'triangle-down'; endif; ?>">
<div class="grid-1x2">
<?php
//Get images
$images = "";
if (isset($item->images)) {
$images = json_decode($item->images);
}
$imgexists = (isset($images->image_intro) and !empty($images->image_intro)) || (isset($images->image_fulltext) and !empty($images->image_fulltext)); ?>
<div class="article-img grid-1x1">
<?php
if ($imgexists) {
$images->image_intro = $images->image_intro?$images->image_intro:$images->image_fulltext;
$images->image_intro_caption = $images->image_intro_caption?$images->image_intro_caption:$images->image_fulltext_caption;
$images->image_intro_alt = $images->image_intro_alt?$images->image_intro_alt:$images->image_fulltext_alt;
?>
<div class="img-intro">
<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); ?>"/>
</div>
<?php } else { ?>
<img src="<?php echo JURI::root(true);?>/images/joomlart/demo/default.jpg" alt="Default Image"/>
<?php } ?><?php if ($params->get('show_readmore')) :?>
<a class="btn btn-default <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JText::_('TPL_VIEW'); ?></a>
<?php endif; ?>
</div><div class="article-content grid-1x1">
<h<?php echo $item_heading+1; ?>>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
<?php if ($item->displayHits) :?>
<span class="mod-articles-category-hits">
(<?php echo $item->displayHits; ?>) </span>
<?php endif; ?></a>
<?php else :?>
<?php echo $item->title; ?>
<?php if ($item->displayHits) :?>
<span class="mod-articles-category-hits">
(<?php echo $item->displayHits; ?>) </span>
<?php endif; ?></a>
<?php endif; ?>
</h<?php echo $item_heading+1; ?>><?php if ($params->get('show_author')) :?>
<span class="mod-articles-category-writtenby">
<?php echo $item->displayAuthorName; ?>
</span>
<?php endif;?><?php if ($item->displayCategoryTitle) :?>
<span class="mod-articles-category-category">
(<?php echo $item->displayCategoryTitle; ?>)
</span>
<?php endif; ?>
<?php if ($item->displayDate) : ?>
<span class="mod-articles-category-date"><?php echo $item->displayDate; ?></span>
<?php endif; ?>
<?php if ($params->get('show_introtext')) :?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
</div></div>
</div>
<?php $count++; endforeach; ?>
</div>With:
<div class="triangle-style category-module<?php echo $moduleclass_sfx; ?>">
<?php
//Get category info
if(isset($jacategory)) : ?>
<div class="col-xs-12 col-sm-3 col-md-3 category-info background-primary background-primary-1">
<div class="grid-1x2 grid-inner">
<h3 class="category-title">
<?php
$cat_title = $jacategory->title;
$cat_titles = explode(" ",$cat_title);
echo '<span class="first-letter">'.$cat_titles[0].'</span>';
unset($cat_titles[0]);
echo ' '.implode(" ",$cat_titles);
?>
</h3>
<div class="category-des">
<?php echo $jacategory->description;?>
</div>
<a class="btn btn-primary btn-icon" href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($jacategory->id));?>"><?php echo JText::_('VIEW_ALL'); ?> <i class="fa fa fa-long-arrow-right"></i></a>
</div>
</div>
<?php endif;
//End add
?>
<div class="col-xs-12 col-sm-9 col-md-9 background-primary-2">
<?php $count=0; foreach ($_list as $item) : ?>
<div class="col-xs-12 col-sm-6 col-md-4 col-cmd-4 <?php if($count%2): echo 'triangle-up'; else: echo 'triangle-down'; endif; ?>">
<div class="grid-1x2">
<?php
//Get images
$images = "";
if (isset($item->images)) {
$images = json_decode($item->images);
}
$imgexists = (isset($images->image_intro) and !empty($images->image_intro)) || (isset($images->image_fulltext) and !empty($images->image_fulltext)); ?>
<div class="article-img grid-1x1">
<?php
if ($imgexists) {
$images->image_intro = $images->image_intro?$images->image_intro:$images->image_fulltext;
$images->image_intro_caption = $images->image_intro_caption?$images->image_intro_caption:$images->image_fulltext_caption;
$images->image_intro_alt = $images->image_intro_alt?$images->image_intro_alt:$images->image_fulltext_alt;
?>
<div class="img-intro">
<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); ?>"/>
</div>
<?php } else { ?>
<img src="<?php echo JURI::root(true);?>/images/joomlart/demo/default.jpg" alt="Default Image"/>
<?php } ?><?php if ($params->get('show_readmore')) :?>
<a class="btn btn-default <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JText::_('TPL_VIEW'); ?></a>
<?php endif; ?>
</div><div class="article-content grid-1x1">
<h<?php echo $item_heading+1; ?>>
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
<?php if ($item->displayHits) :?>
<span class="mod-articles-category-hits">
(<?php echo $item->displayHits; ?>) </span>
<?php endif; ?></a>
<?php else :?>
<?php echo $item->title; ?>
<?php if ($item->displayHits) :?>
<span class="mod-articles-category-hits">
(<?php echo $item->displayHits; ?>) </span>
<?php endif; ?></a>
<?php endif; ?>
</h<?php echo $item_heading+1; ?>><?php if ($params->get('show_author')) :?>
<span class="mod-articles-category-writtenby">
<?php echo $item->displayAuthorName; ?>
</span>
<?php endif;?><?php if ($item->displayCategoryTitle) :?>
<span class="mod-articles-category-category">
(<?php echo $item->displayCategoryTitle; ?>)
</span>
<?php endif; ?>
<?php if ($item->displayDate) : ?>
<span class="mod-articles-category-date"><?php echo $item->displayDate; ?></span>
<?php endif; ?>
<?php if ($params->get('show_introtext')) :?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php $count++; endforeach; ?>
</div>
</div>– Open file: /templates/your_template_name/js/script.js then add this rule:
//equal height
if($('.background-primary-1').length > 0){
$('.background-primary-1').css('height',$('.background-primary-2').height());
}You should see this result:
It works however when I mouseover an article, I see view button over all articles, any way to prevent it?
Please try this tweak:
– Open the file: /templates/your_template_name/css/template.css, find and comment/remove this rule:
.category-module > div:hover .article-img .btn {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}– Open the file: /templates/your_template_name/css/custom.css (if not exists, pls create new one) then add this rule:
.category-module .background-primary-2 > div:hover .article-img .btn {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}Let me know if this helps.
Viewing 4 posts - 1 through 4 (of 4 total)This topic contains 4 replies, has 2 voices, and was last updated by
Nazario A 10 years, 4 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Any ways to make articles category module look better?
Viewing 4 posts - 1 through 4 (of 4 total)
