By yohan31 on

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:

<style>

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

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

.isotope-element, .ch-item { width: 392px; height: 140px;}
}
if(theme_get_setting('portfolio-columns', 'pika') == 4){
.isotope-element, .ch-item { width: 240px; height: 160px;}
}
if(theme_get_setting('portfolio-columns', 'pika') == 3){
.isotope-element, .ch-item { width: 320px; height: 200px;}
}
if(theme_get_setting('portfolio-columns', 'pika') == 2){
.isotope-element, .ch-item { width: 480px; height: 320px;}
} 

        $count = 0;
        foreach ($rows as $row):
    • print @$isotope_filter_classes[$count]; ch-grid" data-category=" print @$isotope_filter_classes[$count]; ">
      print $row; 
    •           $count++;
        endforeach;

    ?>

    Can anyone help me out here?

    ⋅ Categories: Drupal 7.x

    Comments

    Christopher James Francis Rodgers’s picture

    Christopher James Francis Rodgers commented

    ... 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 (great-grandpa.com)
    ___
    "The number one stated objective for Drupal is improving usability." ~Dries Buytaert *

    EdAllMighty’s picture

    EdAllMighty commented

    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

    EdAllMighty commented

    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*/
    }