Hello,
I am having trouble setting up a button link that opens a lightbox. I am using lightbox color box. I started out in Tesseract theme, and changed to Vantage. When I create a button in Tesseract, using this code:
<a class="popup large button olive-outline" href="http://www.authentictravel.nl/hoe-het-werkt/#1">Hoe het werkt</a>the popup works. When I try to create the same page in Vantage, using the site origins button widget, I do not know how to create the same result. I have tried various thinks on the line where to put the destination URL inside the button plugin. So far the only result is the it opens in a full page.
Can you advice me me on what to do?
Furthermore, I would like to ask you which a portfolio plugin you recommend to use in the Vantage premium theme.
Thanks in advance for your feedback
ps. I have changes the theme back again,to Tesseract as I have layout issues in the Vantage theme. Please contact me if I need to change the theme in order for you to see the issue
Hi Kupukupu960
Thanks for reaching out.
When editing the SiteOrigin Button widget you can click Other Attributes and SEO. There you’ll find an ID field. I haven’t used Lightbox Colorbox before but if you can target links for Lightbox Colorbox with an ID instead of a class (as you indicated above) then you could use this field to do so.
We, unfortunately, don’t yet have a recommended portfolio plugin.
Hi Andrew, Thanks for your response. I am relatively new with css an code in WordPress. I think I know what you mean with your advice. I have been trying various thing on the line you mentioned. But in all honesty I do mot know which part of te code I should put there, or how to make target link an ID. Can you clarify that for me? Or is that a uncommon question. Hope you can help me out.
Kind regards,
Andre
Thanks for your feedback. Let me try replicate this locally. Is this the plugin you’re working with?
https://wordpress.org/plugins/lightbox-plus/
Could you perhaps take a quick spin through the Usage and FAQ section and point me to the usage case you’re deploying. Thanks for the help :)
Hi Andrew,
Thank man for your effort. Yep that is the plugin.
If I understand your question right, I am referring to an inline lightbox with text content. “(using secondary lightbox for other content)"
If you take a look at my site. you will find a button. “hoe het werkt” small blue, which I set up in Tesseract.That result that you get there is what I am aiming at. Hope this answers your question. And again thanks for your help.
Thanks for the help. Phew, I’m not having an easy time setting this up locally. I’m a bit rushed mind you.
Playing around with your home page I can see that the one button class that is firing the popup is:
The problem is that the SiteOrigin Button widget doesn’t have class field where we can insert this. Only an ID field which doesn’t work for this application. I’ll suggest this as a feature but for now you might consider inserting your buttons manually in the Text or Visual Editor widget text tab.
For example:
That will work.
The SiteOrigin Button widget has a field for adding JavaScript OnClick. I imagine there is a way to resolve this, it’s just unfortunately a little outside of what we can assist with right now.
Another option would be to keep the HTML you have now and then use our CSS Editor (has a visual component) to change/tweak your button design.
Page: SiteOrigin CSS Editor
Hi Andrew,
Thanks for this feedback! It will help me. I can let go and move on for now. Have spent a lot of time trying to get it the way I want. I will go for you suggestion and tweak the button design.
I have two more questions.
1. what is the de custom css on how to remove the white spacing around the top and bottum rows on my pages. I only found the code per page.
2. how to align the home header banner far left. Or how to aligne the logo and menu all the way to the left.
If I have to make different threads for these questions I understand, and will do that. Let me know.
Thanks for all your assistence!
Thanks for your understanding.
1. Can you see how far you get with regular settings and we’ll use CSS after that.
a. Settings > Page Builder > Layout. Adjust spacing settings there as required.
b. On each row > Edit Row > Theme > No Bottom Margin. Use as required.
c. On each row > Edit Row > Bottom Margin, Gutter, Padding. Use as required.
2. Try the following at Appearance > Custom CSS:
/* Menu */ .site-navigation .full-container { max-width: 90% !important; }Hi Andrew, sorry for the late response. Thank you very much for your assistance. Main reason for my absence was the lack of email notification. Before I received an email when you updated.
Another reason is that I have been very busy working with site origins CSS tool, you referred to. Guy’s I am without words to describe how great this plugin is. Everything I have form Siteorigin is easy to use and has great and has great results. With the CSS plugin I was able to tweak and explore possibilities.
So for now I will close this thread. Thanks again Andrew and have a great day!
Thanks for the update.
Sorry to hear about the lack of email notification. We’ll keep an eye on that.
Really glad to hear you’ve been enjoying SiteOrigin CSS.
Cheers for now :)