Sep 042015
 

CataBlog Move Meta Text To Right Side LightBox shows you how to move the Title and Meta text to the right side of the slideshow.

There comes a time when you might decide that the text in the slideshow is not really where you would want it to appear. For some website design your client might want the text on the right hand side. Either on the top or middle of the right side of the slideshow.

CataBlog Advanced Tutorials

  1. Lightbox Title Permanently Displayed Tutorial
  2. Add Quantity Product Website
  3. Add Video To Product Description Tutorial
  4. Integrate Catablog Into Your Theme
  5. Custom Display CataBlog Items In Suffusion Theme
  6. Different Size Thumbnail Images
  7. Shopping Cart Template
  8. Responsive Settings
  9. Move Meta Text To Right Side LightBox
  10. Troubleshooting

CataBlog Move Meta Text To Right Side LightBox Steps

Step 1 ) The following image illustrates the Title and Meta Text on the bottom of the LightBox.

catablog-slideshow-text-bottom

To move the Title and Meta Text to the right side of the lightbox simply add some CSS style to either your child theme, using a plugin or if your theme allows custom code to be added.

Custom Code to Add:

The following is just an example CSS code style. You will need to adjust the values to suit your website layout.

In the code below all I did was add the following, top: 25px; and left: 425px; and I changed the following to position: absolute.

#catablog-lightbox-meta {
    display: none;
    left: 425px; <==== add this value
    padding: 0.5em 0;
    position: relative; <=== change this to absolute
    top: 25px; <==== add this value
}

Then you have to set the following id=catablog-whiteboard

#catablog-whiteboard {
   height: 200px;
   width: 180px;
}

Note: Since you moved the text to the right side of the lightbox, you will have to adjust the whiteboard height.

Step 2 )  Once you have made the above adjustment when you view your lightbox you will notice the Title and Meta Text on the right hand side of the slideshow.

catablog-slideshow-text-right-side

That’s how simple it is to adjust the lightbox layout with a bit of CSS style.

Note: With the code above you can move the Title and Meta Text anywhere you want on the right side of the lightbox. For example you might want the text to appear in the middle of the lightbox or further down from the top.

Click on the following URL Troubleshooting to continue.

If you have any questions please let me know.

Enjoy

For more CataBlog tutorials check the following Link

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a 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)