Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Portfolio Overlay Titles

    • 5 years, 10 months ago gVes
      Participant

      I desperately need to have portfolio items with titles underneath.

      Basic view does not cut it, since it comes with the chain & magnifier icons once you try click the image to go to the next page.

      Please Help!

    • 5 years, 10 months ago Ludjon
      Keymaster

      Hello,

      In which theme did you want this Portfolio style?

      Thanks

    • 5 years, 10 months ago gVes
      Participant

      Hi

      I need it for the Specular theme.

      Thanks.

    • 5 years, 10 months ago Mirela
      Participant

      Hello,

      You can remove the link and zoom icons by adding this css in Specular > General > Custom Codes box:

      .portfolio-item.basic .tpl2 .center-bar {
          display: none;
      }

      Let us know if this works for you.
      Best regards!

    • 5 years, 10 months ago gVes
      Participant

      Hi

       

      Thanks. This removed the zoom and link icons, but it still did not make the image clickable to take the user to the next page.

      How can I make the image “clickable”?

      Thanks

    • 5 years, 10 months ago Mirela
      Participant

      Hello,

      please go to file specular/includes/view/portfolio/loop-grid.php and find this block:

                  <?php }else if($style == 'basic'){ ?>
      
                       <div class="portfolio-item mix <?php echo esc_attr($sort_classes) ?> <?php echo esc_attr($extra_class) ?>  <?php echo esc_attr($style) ?>" data-id="<?php echo get_the_ID() ?>">
                          <div class="he-wrap tpl2">
                              <?php if($columns == 5) $columns = 4; ?>                
                              <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port'.$columns, 'url')) ?>" alt="<?php echo esc_attr__('Portfolio Image', 'specular') ?>">
                                           
                              <div class="overlay he-view">
                                  <div class="bg a0" data-animate="fadeIn">
                                      <div class="center-bar v1">
                                          <a href="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), array("width"=> 1200, "height" => 1200), "url")) ?>" class="link a2 lightbox-gallery lightbox" data-animate="fadeInRight"><i class="moon-search-3"></i></a></a>
                                          <a href="<?php echo esc_url($link) ?>" class="link a1" data-animate="fadeInLeft"><i class="moon-link-4"></i></a></a>
                                      </div>
                                   </div> 
                              </div>                          
                          </div> 
      

      Edit to this:

                  <?php }else if($style == 'basic'){ ?>
      
                       <div class="portfolio-item mix <?php echo esc_attr($sort_classes) ?> <?php echo esc_attr($extra_class) ?>  <?php echo esc_attr($style) ?>" data-id="<?php echo get_the_ID() ?>">
                          <a href="<?php echo esc_url($link) ?>"><div class="he-wrap tpl2">
                              <?php if($columns == 5) $columns = 4; ?>                
                              <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port'.$columns, 'url')) ?>" alt="<?php echo esc_attr__('Portfolio Image', 'specular') ?>">
                                           
                              <!--<div class="overlay he-view">
                                  <div class="bg a0" data-animate="fadeIn">
                                      <div class="center-bar v1">
                                          <a href="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), array("width"=> 1200, "height" => 1200), "url")) ?>" class="link a2 lightbox-gallery lightbox" data-animate="fadeInRight"><i class="moon-search-3"></i></a>
                                          <a href="<?php echo esc_url($link) ?>" class="link a1" data-animate="fadeInLeft"><i class="moon-link-4"></i></a>
                                      </div>
                                   </div> 
                              </div>  -->                     
                          </div></a> 

      Save changes and refresh page.

      Best regards!

    • 5 years, 10 months ago gVes
      Participant

      Thanks! that did it!

    • 5 years, 10 months ago Mirela
      Participant

      You’re welcome!

      If you like our theme and support, please rate it with 5 stars. It is very important for us.
      https://themeforest.net/downloads

      Thank You :)

Viewing 7 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password