Sep 092013
 

CataBlog Lightbox Title Permanently Displayed Tutorial will show you how to permanently add a Title to your images while viewing then on the browser.

Last Updated: January 23, 2018

Latest Update: I have added another link to the menu.

Hint: Always work with a child theme and not the parent theme.

Hint: If you are going to edit your style sheet make sure that it is on a testing site just in case someone is viewing your website.

CataBlog Lightbox Title Permanently Displayed Tutorial

=============================================

There are times that you might not be able to add any CSS style to your theme for various reasons or you might not know how to. Another reason would be that you are not using a child theme like in this example. This little but powerful plugin WordPress Custom CSS Plugin by Tips and Tricks HQ will help you.

All you have to do is install the plugin, enable and add the CSS code mentioned below. The css code added below will not interfere with any other code in your website because it is using unique CataBlog css class.

=============================================

Step 1 )  The following images have no title when you view them on your browser.

The shortcode used for this example is [ catablog template=”gallery” category=”add-category-name-here” ]

Important: I added a category in the code above but in your case you might not want to add a category.

catablog lightbox title display-no-title

Step 2 )  The following image shows you the Title once you move the mouse over.

catablog lightbox title display-mouse-over

Step 3 ) Let’s go and edit the theme and add the css code to your style sheet. I am using a child theme. See images  below.

Note: Remember you might be using a different child theme or the parent theme. If you are using the parent theme you might need to install the plugin mentioned above.

catablog lightbox title display-editor

catablog lightbox title display-select-child-theme

Step 4 ) Copy the following code into your style.css theme file. Your style sheet might be named differently. See images  below.

.catablog-gallery.catablog-row .catablog-title { display: block !important; }

 

catablog lightbox title display-style-css

catablog lightbox title display-add-code

 Step 5 ) Lets have a look at the images on our browser. You will noticed that all the images have a permanent title revealed. See image  below.

catablog lightbox title display-title-display

I hope you enjoyed this little tutorial.

Click on the following URL Add Quantity Product Website to continue.

If you have any questions please let me know.

Enjoy

CataBlog tutorials list:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

  6 Responses to “CataBlog Lightbox Title Permanently Displayed Tutorial”

  1. Manuel – I have been loving your Catablog series and everything has worked perfectly until now. It seems I have hit a snag and I cannot figure out what I’m doing wrong.

    I have the Dynamik theme and am trying to add the code in this tutorial (permanent titles). The style sheet accepts the code but nothing changes on my preview. My page is http://rufflesandrainboots.com/dress-up-and-costume-tutorials/

    Based on your last update, I’m sure that this code still works but just wanted to check if you knew a fix. Thank you for all of your tutorials in this series!

    • Hi Sarah Nenni, thank you for your comment. Can you share what CSS code are you trying to implement?

      Thank you

      • My ultimate goal is to create pages based on galleries. In Blogger, I forced the images onto the pages manually, but I thought I could use catablog to do it with a bit of style! I want to have gallery pages with certain tags (ex: all sewing tutorials on one page, all dress up costume tutorials on another etc.).

        I am running WordPress 3.9.2 with the Dynamik-Gen theme builder and I’m trying to put the code on this page
        .catablog-gallery.catablog-row .catablog-title { display: block !important; }
        into the style.css sheet.

        Perhaps I did something / didn’t do something in the Catablog tutorials correctly, but the style sheet allows me to save the code, it just doesn’t change the titles to show permanently.

        Thank you in advance for any guidance!

  2. I’ve tried submitting this comment 3 times and it hasn’t saved once. Trying again.

    I am using WP 3.9.2 with the Dynamik-Gen theme builder and I’m trying to accomplish the following. I want to create pages with galleries displaying the categories currently on my header (transferred from Blogger but I want to make drop down menus). I know the first step is to create the pages, so that’s where I’m starting.

    I created a gallery and implemented the short code of [catablog template=”gallery”] I wanted the titles to display permanently, so I followed the tutorial on this page and pasted the following into the style.css sheet: .catablog-gallery.catablog-row .catablog-title { display: block !important; }

    It allows me to save it but the titles aren’t displaying permanently, only when I roll over the images with my pointer.

Leave a Reply to Sarah Nenni Daher Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

7 + four =