Hi try the following instructions see if they help you.
Regards
Thanks mbrsolution, but it’s not quite what I am looking for.
When a visitor clicks a tumbnail in my gallery, I want the new popup screen to show both the picture and the description next to it. Using the standard template, the descriptions is shown underneath the picture.
I don’t know where / how to change this.
thanks for any help you can offer…
Bart
Hi,
Actually what I want to do is to have the description in the lightbox appear next to the picture. Now it is underneath is. I have no idea where to change that (or how to do it).
thanks,
Bart
Hi Bart which shortcode are you currently using? Have you tried the following shortcode.
[catablog template=”gallery”]
Yes that is the shortcode I have on the site.
Would you mind having a look here? http://www.vinovo.be/wijnen-2/
What I want is to
– see all the bottles on the gallery page
– having a new window pop up when a bottle is clicked with a larger picture and a description next to it.
Sorry to be such a pain…
Hi, I had a look at your URL. You can try the following. The following code has to be added to the custom css file if your theme allows it. Or you can use a plugin to add custom code to your website.
Remember to adjust the values below to suit your needs.
Set the following id=catablog-lightbox-meta.
For example:
#catablog-lightbox-meta {
display: none;
left: 125px; <==== add this value
padding: 0.5em 0;
position: absolute; <=== change this to absolute
top: 25px; <==== add this value
}
Remember to adjust the values below to suit your needs.
Then you have to set the following id=catablog-whiteboard
#catablog-whiteboard {
height: 200px;
width: 180px;
}
You have to make sure the images for the bottles are the same size, if not you will have problems.
Hi,
I have installed the plugin ‘custom CSS’ and pasted the below in there:
“
#catablog-lightbox-meta {
display: none;
left: 125px; <==== add this value
padding: 0.5em 0;
position: absolute; <=== change this to absolute
top: 25px; <==== add this value
}
Remember to adjust the values below to suit your needs.
Then you have to set the following id=catablog-whiteboard
#catablog-whiteboard {
height: 200px;
width: 180px;
}
“
However I see no change to the site…
What am I missing??
thanks,
Bart
Hello mbrsolution,
Pls ignore my previous post.
I have added the below code to the CSS
#catablog-lightbox-meta {
display: none;
left: 150px;
padding: 0.5em 0;
position: absolute;
top: 25px;
}
#catablog-whiteboard {
height: 20px;
width: 18px;
}
The first part seems to work fine, but the second one doesn’t. The size of the lightbox remains the same…
Any suggestions?
http://www.vinovo.be/wijnen-2/ Click the top bottle…
thanks!!
Bart
Hi Bart, your code above is not correct. Try the following.
#catablog-whiteboard {
height: 200px;
width: 180px; <=== you might need to increase this value
}
HI,
This is the complete code is use in the CSS.
#catablog-lightbox-meta {
display: none;
left: 150px;
padding: 0.5em 0;
position: absolute;
top: 25px;
}
#catablog-whiteboard {
height: 200px;
width: 180px;
}
Increasing the 180px above to eg 1800px does not change anything on my site, the pop-up lightbox is still longer then the screen.
http://www.vinovo.be/wijnen-2 then the top bottle…
thanks,
Bart
Hi Bart, you increased the height. You have to increase the width not the height.
This is what you currently have.
#catablog-whiteboard {
height: 1281px;
width: 153px;
}
Please increase the width and reduce the height. For example.
#catablog-whiteboard {
height: 281px;
width: 353px;
}
Thank you Mbrsolution, but I still see no change to my site.
Below the complete code I have now in the CSS file. Maybe syntax is wrong somehow?
<style type=”text/css”>
#catablog-lightbox-meta {
display: none;
left: 150px;
padding: 0.5em 0;
position: absolute;
top: 25px;
}
#catablog-whiteboard {
height: 280px;
width: 350px;
}
</style>
Hi I checked your code and it has not changed at all. Something in your set up is blocking the changes. Do you have a cache plugin? Where are you adding the custom code?
Hi can you test a different WordPress theme? Can you also disable all your other plugins except this one and carry out another test.
I installed this plugin https://ww.wp.xz.cn/plugins/custom-css-editor/ and just paste the css code in there.
