Return to previous page

Modal Pop Up Box - by Libardo - on WordPress WooCommerce support

This topic has 33 replies, 2 voices, and was last updated 11 years, 2 months ago ago by Eva Kemp

Libardo

Participant

November 13, 2014 at 16:10

Hi Eva,

Can you assist me how to include a embed video into a page and also how to user the Modal Pop Up Box?

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/0ok_zps7405168a.png

I would like to include the embed video or modal here:

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/223_zpsa16d0e78.png

Please, contact administrator
for this information.

#24491 Copied

32 Answers

Eva Kemp

Participant

November 14, 2014 at 10:12

Hello,

You can add those buttons using Modal box element in Visual Composer.
Please try it.

Thank you.
Regards,
Eva Kemp.

#24606 Copied

Libardo

Participant

November 15, 2014 at 05:15

Hi Eva,

Thanks. Got it. However I am trying to make the medal Pop Up Box button the same as next to the picture but can seems to ave the same button as the one next to it. http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/4545_zpsdc63f1dd.png

Also when I click on the button the video does not play as when click on the embed video below:

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/0ok_zps7405168a.png

Is it possible for you to do one of the button and I will copy for the rest of the pages?

Can I also use the Modal Box to download a PDF document? If yes how can I add or do this? Is there any video I check or can you also create a button and from there I will copy paste the rest?

Thanks..

Please, contact administrator
for this information.

#24722 Copied

Eva Kemp

Participant

November 15, 2014 at 15:45

Hello,

The following image was uploaded for the button instead of an icon https://www.8theme.com/demo/royal/wp-content/uploads/2014/03/button1.png .
I’ve added this code to Modal content and now the video is autoplayed:
<iframe src="//www.youtube.com/embed/t0NIvXw-diM?autoplay=1" width="1280" height="720" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

To create a button for download you can use “Call to Action Button” element in Visual Composer editor. I’ve created one on the page http://bkbcuracao.com/comingsoon/subzero-wolf/ and placed it at the bottom of the page, the very last row.

Please check.

Regards,
Eva Kemp.

#24769 Copied

Libardo

Participant

November 17, 2014 at 04:16

Hi Eva,

Thanks.. the adjustments looks good. The only thing which I would like to add is to have a white frame border around the modal box just like the one below:

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/1_zps9a647148.png

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/2_zps1a0b1ed8.png

Also I noticed when I click on the modal box the video will auto play. Which is good. However the music is muted. Is there a way to set the volume up? Also when you manually turn the volume up and then close the modal box the sound keeps playing. Is this a bug in the theme?

About the “Call to Action Button” it looks fine. But how do I add the red color and a white frame around it? I want it to be just like the modal box but the difference will be that the “Call to Action Button” can download a PDF file and the modal box will see video.

Let me know ..

Please, contact administrator
for this information.

#24825 Copied
Eva Kemp

Participant

November 17, 2014 at 16:26
Hello,

I’ve checked the video and the sound is started automatically, also when I close the video it stops playing and there is no more sound. I’ve added a border using this code in Custom CSS block of Visual Composer editor:

button.btn.btn-primary.btn-sm.overlay-show.ult-align-left { border: white solid 2px !important; }

To change color of “Call to Action” button I’ve added this code to custom css block:

.cta-block .button-right { background-color: #e05945; } .cta-block a.btn {color: white;}

Please check.
Regards,
Eva Kemp.
#24929 Copied
Libardo

Participant

November 18, 2014 at 00:21

Thanks Eva.

I seem not to get e-mail notification when you post a reply. Can you please check this?

#25016 Copied

Libardo

Participant

November 18, 2014 at 02:13

Hi Eva,

Could you please check once more? The Modal Box button white frame disappear again. Also is it possible to use the modal box to link it to a document for download? for instance I would like to link a catalog pdf to it. This way both modal box button on this page will stay the same.

Please, contact administrator
for this information.

#25035 Copied

Libardo

Participant

November 18, 2014 at 02:32

In addition I also want to add that when I add the modal box other pages it does not show as the one above. Please check page in private vs the one above. Could you please assist by correcting this?

Thanks Eva.

Please, contact administrator
for this information.

#25037 Copied

Eva Kemp

Participant

November 18, 2014 at 15:49

Hello,

If you want to create a button for downloading a pdf document you need use Call to Action element instead of Modal Box.
I’ve edited the code in custom.css and the border is visible again.
Sorry, but your second question is unclear.
What do you mean by “when I add the modal box other pages it does not show as the one above.”?

Thank you.
Regards,
Eva Kemp.

#25146 Copied

Libardo

Participant

November 18, 2014 at 17:25

Hi Eva,

Thanks. What I refer to “when I add the modal box other pages it does not show as the one above.” is that if you see this page “http://www.bkbcuracao.com/comingsoon/kohler” and this one “http://bkbcuracao.com/comingsoon/subzero-wolf/” you will noticed both has the same layout but still this one “http://bkbcuracao.com/comingsoon/kohler” does not show the modal box as should. Its not align to the left.

Also can you check this >>> I seem not to get e-mail notification when you post a reply. Can you please check this?

#25166 Copied

Libardo

Participant

November 18, 2014 at 17:27

Also if >> ” a pdf document you need use Call to Action element instead of Modal Box.” can you also add the same button as the modal box for the Call to Action in the last row?

Thanks..

#25170 Copied
Eva Kemp

Participant

November 19, 2014 at 16:36
Hello,

On the page “KOHLER” I’ve added the following code into CSS block

button.ult-align-center { float: left !important; }

Now the buttons are aligned left.
On the page “SUBZERO WOLF” I’ve added “Call to Action Button 2” element in the last row and added this code in CSS code:

.vc_call_to_action { background-color: white; border: none; }

Concerning the notifications, have you subscribed to this topic to receive replied to your email address?

Thank you.
Regards,
Eva Kemp.
#25379 Copied
Libardo

Participant

November 20, 2014 at 01:16

Hi Eva,

Yes for all my replies I select the “Notify me of follow-up replies via email” but still I dont get notifications.

#25462 Copied

Libardo

Participant

November 20, 2014 at 01:32

Hi Eva,

I tried to add a reply in case# #24608 but seems like the case is closed. So I am replying in here ..

I’m using now the Posts Slider as recommended, but seems to have some problem with some things here:

– I would like to hide the next in red circle.
– The size of the thumbnail should be 450×600 which is at the moment but still not showing as should.
– How do I change the blue color? Can I use the same code:

.teaser_grid_container .post-thumb .zoom >i {
background-color: #0026FF !important;
}

– I would also like to have a link to View Large instead of More Details. Do I still need to go here:

More details

– I have also set to show 4 thumbnails but currently is 3. How do I fix this?

P.S the link is in private.

Thanks..

Please, contact administrator
for this information.

#25463 Copied

Libardo

Participant

November 20, 2014 at 02:06

Hi Eva,

The button looks fantastic. However how can we make it the same as this one?

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/hfghfgh_zpsc7d89727.png

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/gdfgdfg_zpsc32b32a9.png

I want to have it the same width, height, white frame, color.

Please let me know..

#25464 Copied

Libardo

Participant

November 20, 2014 at 02:07

Hi Eva,

Is there a way to repeat/loop the video once clicked on the ” Click Here To View Video “? Instead of showing Youtube thumbnails at the end of the video.

http://i1340.photobucket.com/albums/o728/LibardoBarreto/JUNK/fgdfg_zps8eeb0040.png

#25465 Copied
Eva Kemp

Participant

November 20, 2014 at 14:29
Hello,

I’ve edited the code for youtube video and related videos are no longer shown.
As those are 2 different buttons they won’t be displayed the same. I’ve tried to change the style of Call to Action button but it still has problems. You can check it.
I’ve added the following code into CSS block:

.vc_call_to_action.vc_cta_btn_pos_left .vc_cta_btn { background-color: #E05945 !important; width: 220px !important; height: 30px !important; } .vc_btn-lg { padding: 4px 30px; font-size: 15px; border-radius: 3px; }

Thank you.
Regards,
Eva Kemp.
#25670 Copied
Libardo

Participant

November 20, 2014 at 14:41

Thanks Eva.

I tried to add a reply in case# #24608 but seems like the case is closed. So I am replying in here ..

I’m using now the Posts Slider as recommended, but seems to have some problem with some things here:

– I would like to hide the next in red circle.
– The size of the thumbnail should be 450×600 and same style as the post grid above it.
– How do I change the blue color? Can I use the same code:

.teaser_grid_container .post-thumb .zoom >i {
background-color: #0026FF !important;
}

– I would also like to have a link to View Large instead of More Details. Do I still need to go here:

More details

– I have also set to show 4 thumbnails but currently is 3. How do I fix this?

P.S the link is in private.

Thanks..

#25674 Copied

Libardo

Participant

November 20, 2014 at 14:49

….

Please, contact administrator
for this information.

#25676 Copied
Eva Kemp

Participant

November 20, 2014 at 16:07
Hello,

You’ve been already replied in other topic:
You can change hover color with this code in custom.css file:

.teaser_grid_container .post-thumb .zoom >i { background-color: your_color_value !important; }

You can remove “More details” button only in the file wp-content/themes/royal/framework/theme-functions.php (line 2300), delete the code More details, but it will be removed from all sections where you’re using this element. Unfortunately in css 2 buttons can be removed.

As I see 4 thumbnails are shown.

Regards,
Eva Kemp.
#25696 Copied
Libardo

Participant

November 20, 2014 at 16:18

Hi Eva,

You need to look into the following page at the bottom:

http://bkbcuracao.com/comingsoon/kohler/

I’m using now Post Slider in order to get the Arrows as navigation. I would like to know the following questions:

– I would like to hide the next in red circle.
– The size of the thumbnail should be 450×600 and same style as the post grid above it.
– How do I change the blue color? Can I use the same code:

.teaser_grid_container .post-thumb .zoom >i {
background-color: #0026FF !important;
}

– I would also like to have a link to View Large instead of More Details. Do I still need to go here:

More details

– I have also set to show 4 thumbnails but currently is 3. How do I fix this?

#25699 Copied

Libardo

Participant

November 20, 2014 at 19:43

Hi Eva,

Just wanted to check if you had a chance to look into my last request?
Thanks..

#25759 Copied
Eva Kemp

Participant

November 21, 2014 at 00:05
Hello,

1. I’ve removed the text you marked in the red circle adding this code in CSS block of VC editor on the Kohler page :
.caption {display: none;}
2. The size is the same as you set in the settings.
3. To change background color use this code in CSS block:

.thumbnails-x .zoom > i { background-color: #0CB3D7; }

Replace the color value with the one you need.
4. To change “More details” text edit the file wp-content/themes/royal/framework/theme-functions.php (line 2770), find the code echo '<a href="'.get_permalink().'" class="btn btn-black xmedium-btn">'.__('More details', ETHEME_DOMAIN).'</a>'; and replace “More details” with your text.
5. I have set 4 items to display in Posts Slider settings. Please check now.

Regards,
Eva Kemp.
#25793 Copied
Libardo

Participant

November 21, 2014 at 00:10

THANKS EVA. It looks perfect. Going to do this for the rest as well.

#25795 Copied

Eva Kemp

Participant

November 21, 2014 at 00:17

Hello,

You’re welcome.

Regards,
Eva Kemp.

#25799 Copied

Libardo

Participant

November 21, 2014 at 00:18

Only one thing. At the moment it shows the More Details which you provided the steps to change this but what I would like is when click on the image it shows large. How do this ?

Meaning I would like the option ” View Large ” so when click on the image it shows a bigger size of the image.

#25800 Copied

Eva Kemp

Participant

November 21, 2014 at 13:25

Hello,

Sorry, but as the posts are displayed in the slider they can’t be linked to larger image. You may create portfolio projects and use etheme_portfolio instead of the posts.

Regards,
Eva Kemp.

#25926 Copied

Libardo

Participant

November 21, 2014 at 15:03

Hi Eva,

Thanks. But how do I create that? Or can you create one in the Subzero Wolf page and and from there I will copy paste the rest to be the same?

#25950 Copied

Eva Kemp

Participant

November 21, 2014 at 16:23

Hello,

Unfortunately there is the same thing with portfolio slider.
Please update the theme to the latest version – 1.5 as some bugs were fixed there:
https://www.8theme.com/demo/docs/royal/#!/installation_upgrade (paragraph “1.5 Theme Upgrade”).

Don’t forget to create a back up of your files and database.

Thank you.
Regards,
Eva Kemp.

#25963 Copied
1 2 →

Viewing 30 results - 1 through 30 (of 33 total)