Hi,

I am currently using the 5pika responsive theme. This post is focused on the portfolio section of the theme.

http://www.inspiro-media.com/5pika/?q=portfolio/four

I love the look of the grid, and want to keep it mostly the same. However, when I mouse over one of the pictures, the title of the node pops up.

This is fine on a desktop but on a mobile device you have to tap each one to get the name of the node to come up. I do not like it and want all of the pictures in the grid to have the text title of the node overlaid on the picture so that when you bring up the portfolio you have the names of each node, without having to hover or click.

Can anyone help point me in the right direction? I suspect that this theming happens in the view template, which looks like this:

<?php
<style>

   
#sidebar {display:none;} #content {width:100%;}

<?php if(theme_get_setting('portfolio-columns', 'pika') == 5){
?>

.isotope-element, .ch-item { width: 392px; height: 140px;}

<?php
 
}
?>
<?php
 
if(theme_get_setting('portfolio-columns', 'pika') == 4){
?>

.isotope-element, .ch-item { width: 240px; height: 160px;}

<?php
 
}
?>
<?php
 
if(theme_get_setting('portfolio-columns', 'pika') == 3){
?>

.isotope-element, .ch-item { width: 320px; height: 200px;}

<?php
 
}
?>
<?php
 
if(theme_get_setting('portfolio-columns', 'pika') == 2){
?>

.isotope-element, .ch-item { width: 480px; height: 320px;}

<?php
 
}
?>
<?php
        $count
= 0;
        foreach (
$rows as $row):
     
?>
    • <?php
       
      print @$isotope_filter_classes[$count];
      ?>

      ch-grid" data-category="

      <?php
       
      print @$isotope_filter_classes[$count];
      ?>

      ">

      <?php
       
      print $row;
      ?>
    • <?php
                $count
      ++;
              endforeach;
           
      ?>

      ?>

      Can anyone help me out here?

      Comments

      Christopher James Francis Rodgers’s picture

      ... I would contact them with your question.

      Contact:
      http://www.inspiro-media.com/5pika/?q=contact

      That site seems a bit limited in their online support, so...

      Keep in mind that you can get many free themes
      contributed by very serious and committed
      Drupal.org members at:
      https://drupal.org/project/themes

      "All the best; intended."
      - Chris
      ___

      Drupal 8 is great.

      Re: Dupal 9,000
      Three-minute Video on the problem
      of technology out-pacing users.
      http://great-grandma.com/gill_bates-dead_at_42/index.html

      EdAllMighty’s picture

      I second Christopher's answer but if you don't get a reply I would look into the CSS or Isotope script, look for hover property. CSS will have something like "display:none;" and on hover property, the jQuery function for isotope will have something like .hide();...comment it out or switch it to ".show();"/"display:block;"

      EdAllMighty’s picture

      I found the solution, change the "ch-info" CSS class properties. Replace:

      .ch-info {
      position: absolute;
      background: rgba(138, 138, 138, 0.8);
      width: inherit;
      height: inherit;
      border-radius: 0%;
      opacity: 0;
      -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-backface-visibility: hidden;
      }

      With the following:
      .ch-info {
      position: absolute;
      background: rgba(138, 138, 138, 0.8);
      width: inherit;
      height: inherit;
      border-radius: 0%;
      opacity: 1.0; /* CHANGED FROM 0 TO 1.0 TO MAKE VISIBLE*/
      /* COMMENTED OUT TRANSITIONS BUT KEEP THEM IN CASE YOU CHANGE YOUR MIND
      -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      */
      -webkit-backface-visibility: visible; /* MADE VISIBLE*/
      }