Joomla Templates Club 406,261 posts

[rani Friend raniJoin date: February 2007Posts: 59Downloads:102Uploads:7 Thanked: 6 times in 1 posts]

#189954

Hi,

1st Concern:
Obviously selecting a content type such as social, image, etc will determine the effect taken on the post in the grid.

example:

If I select content type: “Image”, this will cause the post to have a different hover style effect than when i select content type: “Social”.

<div class="items typography none social grid-1x1" style="position: absolute; left: 602px; top: 0px; width: 301px; height: 301px;">


<div class="items typography none image grid-1x1" style="position: absolute; left: 602px; top: 0px; width: 301px; height: 301px;">


questions:

where are these styles written .social . image .text etc ( i can’t find them in any css or less file)?
I want content type “social” to have same hover effect of content type “Image”?

2nd Concern:
It seems that when the content type is “gallery” for example. The text in full article view is not shown, neither an embeded video will be shown as well. what should i do in order to show text & video in a content type of gallery? You may tell me to use content type of “social” which is cool but what if i want to benefit from the slideshow feature in the grid post of the “gallery” content type?

Thanks & Regards,
Rani

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503278

Hi Rani,

It will be very complicated to explain clearly on how function codes in .less file are compiled to relevant css files. So that , in this case, I will let you know which css files the styles are stored only. Then you can create a custom.css file and put your overridden styles into. Here are the details:

1st concern:

The hover effect of image in “social” and “image” content type is stored in templatesja_fixelcsstemplate.css file

+ social: We don’t put the animated hover effect, that is why the image don’t reflect when you hover.

+ image: at 5311th line

.fixel-grid .items.image.none article:hover .pull-left.item-image,
.fixel-grid .items.image.none article:hover .pull-right.item-image,
.fixel-grid .items.image.none article:hover img,
.fixel-grid .items.image.none article:focus .pull-left.item-image,
.fixel-grid .items.image.none article:focus .pull-right.item-image,
.fixel-grid .items.image.none article:focus img,
.fixel-grid .items.image.none article:active .pull-left.item-image,
.fixel-grid .items.image.none article:active .pull-right.item-image,
.fixel-grid .items.image.none article:active img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}


Note: You just need to set the “image” content type in the articles you are using “social” type. So that, all images will get the aminated hover effect, instead of spending time on customizing your overriden css styles.

2nd concern
You will need to customize our fixel item layout with content types which requires you to have the technical experience with php and css. In this case I suggest you to hire a developer to help you handling this task. Well, if you want to do by yourself, you can go to templatesja_fixelhtmlcom_contentcategory folder, you will see all fixel items layout of our template. Lets see fixel_item_default.php (text content type):

<section class="article-intro clearfix">
<?php echo $this->item->introtext; ?>
</section>

>> These codes are used to display the intro texts on fixel item with text or default content type.
Apply to other files of content type you want.

Note: Remember to backup your files before applying changes.

1 user says Thank You to phong nam for this useful post

1. imported_rani

[rani Friend raniJoin date: February 2007Posts: 59Downloads:102Uploads:7 Thanked: 6 times in 1 posts]

#503320

Thank you very much.

[justbe Friend justbeJoin date: October 2012Posts: 6Downloads:0Uploads:2 Thanks: 2]

#503325

<em>@Leo Burnetts 386241 wrote:</em><blockquote>+ social: We don’t put the animated hover effect, that is why the image don’t reflect when you hover. </blockquote>

In this case what should I edit to have the animation on “social” articles? Because I want to have the animation of “image” type but the look of “social” (full article show in popup view, without image instead of only the image).

Thank you!

Best regards.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503330

Hi justbe,

<blockquote>full article show in popup view, without image instead of only the image</blockquote>
You can still try with “image” content type, but don’t upload the full-article image in Image and Links settings of article backend.

[justbe Friend justbeJoin date: October 2012Posts: 6Downloads:0Uploads:2 Thanks: 2]

#503333

<em>@Leo Burnetts 386318 wrote:</em><blockquote>You can still try with “image” content type, but don’t upload the full-article image in Image and Links settings of article backend.</blockquote>
I’ve tried this…I uploaded only Intro Image, nothing on Full article image. I have the animation, but when the popup is open I don’t see any content. What can I do?

Thanks!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503337

Hi justbe,

In this case, you will need to customize our popup image layout to get your requirement. I suggest you to backup your files and follow this steps.

– Open templatesja_fixelhtmlcom_contentarticledefault_popup_images.php, replace lines (131-154th):

<section class="article-content clearfix">

<?php $useDefList = (($params->get('show_modify_date')) or ($params->get('show_hits'))); ?>
<?php if ($useDefList) : ?>
<footer class="article-footer clearfix">
<dl class="article-info pull-left">
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', '<span>'.JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3')).'</span>'); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', '<span>'.$this->item->hits.'</span>'); ?>
</dd>
<?php endif; ?>
</dl>
</footer>
<?php endif; ?>

</section>

<?php endif; ?>

with

<section class="article-content clearfix" <?php if(!$this->item->event->beforeDisplayContent): echo 'style="margin-left: 0"'; endif; ?>>
<?php echo $this->item->text; ?>

<?php $useDefList = (($params->get('show_modify_date')) or ($params->get('show_hits'))); ?>
<?php if ($useDefList) : ?>
<footer class="article-footer clearfix">
<dl class="article-info pull-left">
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', '<span>'.JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3')).'</span>'); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', '<span>'.$this->item->hits.'</span>'); ?>
</dd>
<?php endif; ?>
</dl>
</footer>
<?php endif; ?>

<?php
if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && !$this->item->paginationrelative): ?>
<?php
echo '<hr class="divider-vertical" />';
echo $this->item->pagination;
?>
<?php endif; ?>

<?php if (isset($urls) && ((!empty($urls->urls_position) && ($urls->urls_position=='1')) || ( $params->get('urls_position')=='1') )): ?>
<?php echo $this->loadTemplate('links'); ?>
<?php endif; ?>

<?php //optional teaser intro text for guests ?>
<?php elseif ($params->get('show_noauth') == true and $user->get('guest') ) : ?>
<?php echo $this->item->introtext; ?>
<?php //Optional link to let them register to see the whole article. ?>
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) :
$link1 = JRoute::_('index.php?option=com_users&view=login');
$link = new JURI($link1);
?>
<section class="readmore">
<a href="<?php echo $link; ?>">
<span>
<?php $attribs = json_decode($this->item->attribs); ?>
<?php
if ($attribs->alternative_readmore == null) :
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('FIXEL_COM_CONTENT_READ_MORE_TITLE');
else :
echo JText::_('FIXEL_COM_CONTENT_READ_MORE');
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif; ?>
</span>
</a>
</section>
<?php endif; ?>
<?php endif; ?>
</section>

You can see these codes belonging to the content section in article layout, and the new layout still also contains the Joomla parameters (publieshed date, tags, print icon … )

1 user says Thank You to phong nam for this useful post

1. justbe

[justbe Friend justbeJoin date: October 2012Posts: 6Downloads:0Uploads:2 Thanks: 2]

#503338

Thank you very much! Now it’s perfect.

One more question please: I see now that the width of the article is 740px. Where I can edit to make it large? I think is better that the width of the article to be the width of the popup, without blank space in the right and left.

Thanks!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503340

Hi justbe,

You can create a custom.css file in templates/ja_fixel/css/ path. Then put below css styles into:

.view-article .item-page {
margin: auto;
max-width: 740px;
padding: 0 60px;
}

Change the max-width value until you get perfect.

[ffspace Friend ffspaceJoin date: January 2014Posts: 9Downloads:0Uploads:2 Thanks: 7 Thanked: 1 times in 1 posts]

#521814

Hi, what changes I need to apply if i want to show short name of the article before the hoover effect starts in image mode?
I just need all this things as spoken above – the image mode with hoover image effect and then popup with full article, but also i need the short text over the image into grid as it exists in the social view.

Is that possible?
thank you

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521880

@ffspace: The answer is Yes. You can try to create a custom.css file as i suggested above. Then put the below override css rules into:

.fixel-grid .items.image.none article:hover .item-desc.back {
bottom: 0;
}

.fixel-grid .items.image.none article .item-desc {
opacity: 1;
}

.items.none.image .item-desc.back {
bottom: 50px;
z-index: 9999;
}

The article title will display over the image mode on Image content type.

1 user says Thank You to phong nam for this useful post

1. ffspace

[ffspace Friend ffspaceJoin date: January 2014Posts: 9Downloads:0Uploads:2 Thanks: 7 Thanked: 1 times in 1 posts]

#521901

Thank you Leo,
that works perfect!
but it works on Image content type only when the Content Animation is setting to “None”. Is that possible to display the article title over the image when the Rotate parameter is enabled too?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521922

@ffspace: On the Rotate mode of Image content type, you can see that the article title and its intro section will be displayed at the same side and the rotate animation is used to display the hidden article info when hovering. It will be NOT good idea to show article title over image in this case.

So, I would like to suggest you to keep the default effect of Image content type with Rotate animation. Hope you understand this !

1 user says Thank You to phong nam for this useful post

1. ffspace

[ffspace Friend ffspaceJoin date: January 2014Posts: 9Downloads:0Uploads:2 Thanks: 7 Thanked: 1 times in 1 posts]

#522118

thank you Leo,

I understand this/

And one question – where does it possible to style the article title will display over the image mode on Image content type with css?
I need to change title text color, background title color and position of title a little in the grid display.

thank you

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#522203

@ffspace: You can look back my suggested css rules inside custom.css file on your server. Then you can change the text color, background and position of title as you want. But it will require you to have a little bit knowledge of CSS.

You just need to add the CSS properties into correct css classes:

– color: #111; To change the text color
– background: rgba(0,0,0,0.75); To change background of title
– left, bottom: 30px; To change the position on Image.

Good luck !

1 user says Thank You to phong nam for this useful post

1. ffspace

[Author]

Posts