Site Designer menu over image or...

User 2699991 Photo


Registered User
2,398 posts

Wayan Jaya wrote:
Phil wrote:
Thanks for your help. I located and downloaded the orbit slider. In SD I am using Bootstrap, and there is a components icon at the top center. When I click on components it opens a window, similar to the resources window. At the bottom is a button to get more components, which takes you to the CoffeeCup site and the page says components are coming soon. I also tried to drag and drop the orbit download into the components box but could not do so. Am I missing something?


Inger I believe has a bootstrap slider component on her sharing site

I only use foundation so can't help but I have a video of one that I just did still uploading to youtube, but you can have a look see if you want I will put the link up when it's ready


https://youtu.be/abhVtTf2qH8
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,398 posts

Phil wrote:
Thanks for your help. I located and downloaded the orbit slider. In SD I am using Bootstrap, and there is a components icon at the top center. When I click on components it opens a window, similar to the resources window. At the bottom is a button to get more components, which takes you to the CoffeeCup site and the page says components are coming soon. I also tried to drag and drop the orbit download into the components box but could not do so. Am I missing something?


Orbit won't work with Bootstrap

The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,398 posts

To make a component
open the project
select the container holding the slider (whatever its called ??
go to the "Elements " tab
select components from the tab underneath
choose "create component" from the button choice
give it a meaningfull title from the po up that appears
hit the upload icon
create a new catagory ((gve it a name) from the pop up that appears

hit the done button

in it goes

now you can then put the component in your other project by going to the "Components tab (as before) choose add component

select it and in it comes to your project

I assume it's the same process in bootstrap as it is in foundation for adding bootstrap components
The Help You Need: When You Need It The Most
User 122279 Photo


Senior Advisor
12,370 posts


The Bootstrap slider is called Carousel. I have it on the same page as I mentioned above.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 179977 Photo


Registered User
130 posts

Thanks Inger & Wayan. I am having little success. The carousel slider does not appear to have a way to place the menu over the slide show, or else I am missing something. The WOW slider that I normally use is very similar to carousel, but again there is no way to make the menu overlay the slideshow and there is no way to create hot spots on the images.

I had hoped that by using negative margins or some other slight of hand, that I could place the menu over the slideshow. I will keep trying. As they say where there is a will, there is a way.
User 2699991 Photo


Registered User
2,398 posts

Phil wrote:
Thanks Inger & Wayan. I am having little success. The carousel slider does not appear to have a way to place the menu over the slide show, or else I am missing something. The WOW slider that I normally use is very similar to carousel, but again there is no way to make the menu overlay the slideshow and there is no way to create hot spots on the images.

I had hoped that by using negative margins or some other slight of hand, that I could place the menu over the slideshow. I will keep trying. As they say where there is a will, there is a way.

use foundation then :)

seriously though, in order to place the menu and other thimgs as overlays, the images need to be backgtound images in the respective containers
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,398 posts

Wayan Jaya wrote:
Phil wrote:
Thanks Inger & Wayan. I am having little success. The carousel slider does not appear to have a way to place the menu over the slide show, or else I am missing something. The WOW slider that I normally use is very similar to carousel, but again there is no way to make the menu overlay the slideshow and there is no way to create hot spots on the images.

I had hoped that by using negative margins or some other slight of hand, that I could place the menu over the slideshow. I will keep trying. As they say where there is a will, there is a way.

use foundation then :)

seriously though, in order to place the menu and other thimgs as overlays, the images need to be backgtound images in the respective containers


Phi; I just took Ingers component carousel
I have done it with the menu overlay (took me 5 mins)

The images need to be baclground images rather than picture elements

Uou then place a |Div| inyo yjr container classes = container-fluid carousel-inner

set that container to position absolute, with z index 1000 units and top set to wherever you want it to be in the view

populate it with text headers links is up yo you

make the background image containers height = 100 vh and the background image = custom horizontal =100% or whatever is needed to make it fit (not recommended to use cover except at large viewports

There you have it a slider with menu overlay

I don't know if that carousel has a fading effect built in or even if you or your client would prefer (like the example you showed) if not I have a little CSS code to make that happen, (not exactly a true cross over fade but pretty neat as you would have seen had you seen the video demo I put up onto youtube yesterday
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,398 posts

https://youtu.be/d8AoLJb_hiE

That is the link to show Ingers carousel component with menu overlay
The Help You Need: When You Need It The Most
User 122279 Photo


Senior Advisor
12,370 posts

Here is my BS carousel with text overlay. No problem at all. But negative margins won't help you much. Here I gave the container .main relative positioning and placed a H1 heading on top, using absolute positioning. Instead of the heading, I could have made a menu without a background, but it is late and I want to find my bed.

https://www.dropbox.com/s/po3gpw33oe9zi … y.zip?dl=0
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 122279 Photo


Senior Advisor
12,370 posts

So now he's got two carousels ;)
My carousel does not have any fading effect. I made it fairly early on in my 'component creation career' and did not know of anything that sophisticated :lol:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.