Article view: Icons erea on the left cover Jcomment area

Hi supporters,

I installed icomment for my website, and have problem with jcomment area when viewing article.

When the article is long, there is no problem, jcomment area locates deeply at bottom of the article.

pic1.jpg

However, if an article is short, jcomment will be covered with icon "Print", "Email" icons or even with social network icons on the left of the article.

pic2.jpg

So I would like to move jcomment area under area of these icons for all articles, (both long or short) like below image, then it will never be covered by icons on the left.

pic3.jpg

Can you please help me to do that?

Thank you and regards,

Hai

Could you please provide a link to exact location where this issue can be seen?

Hi Cyberek,
Please visit this link to see: http://photowording.com/thaigiao/478-dg ... hjgd-ghjgd.

Thank you,

Hai

I guess the change is not that easy - it requires to change the way those elements are displayed and I'm afraid it might not look good. A lot of css editing .

Hi Cyberek,

There is no rush for that, please keep it in mind and continue to help me to solve this issue when you have time.

Hai

Hi Cyberek,

In stead of moving jcomment at the bottom of all icons on the left, can you help me to move all icons on the left to above of the article?

icons-.jpg

I already made some social icons on top of the article, like this link: http://photowording.com/thaigiao/487-th ... g-thu-nhat

But do not know how to make "Print" and "Email" icons and also how to delete all these icons on the left.

I think that if doing so, the jcomment will not conflict with the icons. And also, the whole article will move to the left (at position of left icons now) and I can save a little space

Please review and help me.

Thank you and regards,

Hai

This link:
http://photowording.com/thaigiao/487-th ... g-thu-nhat
gives me 404.
Please provide current one.

Hi Cyberek,

I just restored the site.

Please click on other links to see, like this: http://photowording.com/thaigiao/454-th ... i-giao-115

Thank you and regards,

Hai

The code you are searching for can be found in:
templates/gk_news2/html/com_content/article/default.php
file:

Code: Select all

        <aside class="itemAsideInfo">
              <ul>
                   <gavern:social><li id="gkSocialAPI"></gavern:social>
                     <gavern:social><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php echo $this->item->title; ?>" data-url="<?php $cur_url; ?>" GK_TWEET_BTN_SETTINGS>Tweet</a></gavern:social>
                    
                     <gavern:social><fb:like href="<?php echo $cur_url; ?>" GK_FB_LIKE_SETTINGS></fb:like></gavern:social>
                    
                     <gavern:social><g:plusone GK_GOOGLE_PLUS_SETTINGS callback="<?php echo $cur_url; ?>"></g:plusone></gavern:social>
                     <gavern:social><g:plus action="share" GK_GOOGLE_PLUS_SHARE_SETTINGS href="<?php echo $cur_url; ?>"></g:plus></gavern:social>
                    
                     <gavern:social><a href="http://pinterest.com/pin/create/button/?url=<?php echo $cur_url; ?>&amp;media=<?php echo $pin_image; ?>&amp;description=<?php echo str_replace(" ", "%20", $this->item->title); ?>" class="pin-it-button" count-layout="GK_PINTEREST_SETTINGS"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="<?php echo JText::_('TPL_GK_LANG_PINIT_TITLE'); ?>" /></a></gavern:social>
                   <gavern:social></li></gavern:social>
                              
                   <?php if ($params->get('show_hits')) : ?>
                   <li class="itemHits">
                      <i class="gk-icon-views"></i>
                      <meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
                      <?php echo JText::sprintf('TPL_GK_LANG_HITS', $this->item->hits); ?>
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_print_icon')) : ?>
                   <li class="itemPrint">
                      <i class="gk-icon-print"></i>
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.print_popup',  $this->item, $params)); ?>
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_email_icon')) : ?>
                   <li class="itemEmail">      
                      <i class="gk-icon-email"></i>
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.email',  $this->item, $params)); ?>   
                   </li>
                   <?php endif; ?>
                      
                   <?php if ($canEdit) : ?>   
                   <li class="itemEdit">      
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.edit', $this->item, $params)); ?>      
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_parent_category') && $this->item->parent_slug != '1:root') : ?>
                  <li class="parent-category-name">
                       <?php   
                            $title = $this->escape($this->item->parent_title);
                     $url = '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)).'" itemprop="genre">'.$title.'</a>';
                  ?>
                  
                       <?php if ($params->get('link_parent_category') and $this->item->parent_slug) : ?>
                         <?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
                       <?php else : ?>
                         <?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
                       <?php endif; ?>
                  </li>
                  <?php endif; ?>
              </ul>
          </aside>


Above you have code form print, email etc.

Hi Cyberek,

In order to create the social icons, I used a custom HTML module and created a table by pasting these code:

-------------------------------------------------------------
<table>
<tbody>

<tr>

<td height="32px" valign=top>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.4&appId=603337879806138";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button" data-layout="button"></div>

</td>


<td
width="15px">



<td valign=bottom>


<!-- Đặt thẻ này vào phần đầu hoặc ngay trước thẻ đóng phần nội dung của bạn. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'vi'}
</script>

<!-- Đặt thẻ này vào nơi bạn muốn Nút +1 kết xuất. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>

</td>

<td
width="15px">

</td>


<td width="90px" valign=bottom>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="congioilam" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</td>




</td>




<td
width="800px">



</td>

</tr>
</tbody>
</table>

-------------------------------------------------------------

I added the code you show me in the next column of the above "table" but it does not work properly:

icons.jpg

What I want to do now is to display Print and Email icons on the same row in the above "table" and hide the vertical column on the left which are now displaying default social icons and other icons of the template in the way that it does not affect function of any icons. Is that feasible?

In case there is another way to make it instead of creating custom HTML module, please tell me.

There is no need to be rush, please help me step by step as my knowledge about coding is very limited.

Thank you and regards,

Hai

Using tables in responsive layout is never a way to go, so please reconsider this approach.
Sadly, I can't teach you how to program html/css modern way, as this is not part of our technical support.
You also should consider playing with browser width - whit way you can check how elements behave with different screen sizes. You can also use Chrome Dev Tools move them to the right (bottom is default display) and use it to reduce screen size even to 320px.

Now going back to remove of the sidebar.... It can be hidden only by using Joomla configuration. Our template checks if one of this options is enabled:
show_parent_category
show_print_icon
show_email_icon
show_hits
(they can be set per article or category).
You could also remove entire block:

Code: Select all

          <?php if($aside_exists): ?>
          <aside class="itemAsideInfo">
              <ul>
                   <gavern:social><li id="gkSocialAPI"></gavern:social>
                     <gavern:social><a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php echo $this->item->title; ?>" data-url="<?php $cur_url; ?>" GK_TWEET_BTN_SETTINGS>Tweet</a></gavern:social>
                    
                     <gavern:social><fb:like href="<?php echo $cur_url; ?>" GK_FB_LIKE_SETTINGS></fb:like></gavern:social>
                    
                     <gavern:social><g:plusone GK_GOOGLE_PLUS_SETTINGS callback="<?php echo $cur_url; ?>"></g:plusone></gavern:social>
                     <gavern:social><g:plus action="share" GK_GOOGLE_PLUS_SHARE_SETTINGS href="<?php echo $cur_url; ?>"></g:plus></gavern:social>
                    
                     <gavern:social><a href="http://pinterest.com/pin/create/button/?url=<?php echo $cur_url; ?>&amp;media=<?php echo $pin_image; ?>&amp;description=<?php echo str_replace(" ", "%20", $this->item->title); ?>" class="pin-it-button" count-layout="GK_PINTEREST_SETTINGS"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="<?php echo JText::_('TPL_GK_LANG_PINIT_TITLE'); ?>" /></a></gavern:social>
                   <gavern:social></li></gavern:social>
                              
                   <?php if ($params->get('show_hits')) : ?>
                   <li class="itemHits">
                      <i class="gk-icon-views"></i>
                      <meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
                      <?php echo JText::sprintf('TPL_GK_LANG_HITS', $this->item->hits); ?>
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_print_icon')) : ?>
                   <li class="itemPrint">
                      <i class="gk-icon-print"></i>
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.print_popup',  $this->item, $params)); ?>
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_email_icon')) : ?>
                   <li class="itemEmail">      
                      <i class="gk-icon-email"></i>
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.email',  $this->item, $params)); ?>   
                   </li>
                   <?php endif; ?>
                      
                   <?php if ($canEdit) : ?>   
                   <li class="itemEdit">      
                      <?php echo preg_replace('@<img.*?alt="(.*?)".*?\/>@mis', '$1',JHtml::_('icon.edit', $this->item, $params)); ?>      
                   </li>
                   <?php endif; ?>
                   
                   <?php if ($params->get('show_parent_category') && $this->item->parent_slug != '1:root') : ?>
                  <li class="parent-category-name">
                       <?php   
                            $title = $this->escape($this->item->parent_title);
                     $url = '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)).'" itemprop="genre">'.$title.'</a>';
                  ?>
                  
                       <?php if ($params->get('link_parent_category') and $this->item->parent_slug) : ?>
                         <?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
                       <?php else : ?>
                         <?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
                       <?php endif; ?>
                  </li>
                  <?php endif; ?>
              </ul>
          </aside>
          <?php endif; ?>


from this file: templates/gk_news2/html/com_content/article/default.php
and change in header:

Code: Select all

$aside_exists = false;

if(
   ($params->get('show_parent_category') && $this->item->parent_slug != '1:root') ||
   $params->get('show_print_icon') ||
   $params->get('show_email_icon') ||
   $params->get('show_hits') ||
   $canEdit
) {
   $aside_exists = true;
}


to:

Code: Select all

$aside_exists = false;

if(
   ($params->get('show_parent_category') && $this->item->parent_slug != '1:root') ||
   $params->get('show_print_icon') ||
   $params->get('show_email_icon') ||
   $params->get('show_hits') ||
   $canEdit
) {
   $aside_exists = false;
}


Hi Cyberek,

I successfully hide the whole sidebar:

above.jpg

In my way which using table, I had to use plugin "Modules in articles" and use position: "article_before_all". So that the icons will be shown on all articles. I tried Chrome Dev Tools and see that the icons changes when screen narrows. So this way is not a good solution at all.

Please instruct me how to show the icons on top of the article (in the red box in the screenshot), by a way which does not using table.

At the moment, I know very little about html/css. I am still learning to code step by step, because sooner or later, I need to deal with these issues myself, but it will take me a long time until I can do these jobs

Thank you very much and looking forwards to your help,

Hai

I'm sorry, but our technical support doesn't cover teaching of html/css/php. You can hire any frontend developer for such job. Also gavick by itself provides such service but only for users with vip account.

Hi Cyberek,

How much I will have to pay for those codes?

As other things of the template are good, what special I need now is those icons to be shown on top of an article. Can you give me a price for that?

And the original reason of the requirement is that the icons on the left of the article conflict with jcomment at bottom of the article.

Thank you and regards,

Hai

Hi Cyberek,

I installed other extension to solve this issue, no need to help me with this topic.

Thank you a lot for your support so far.

Hai

I'm glad you could solve it by yourself.
If you have any additional questions regarding this topic, please let me know.