CSS for Intelligent Shoe Module.

Hi

I trying to use the Intelligent Shoe module html from the Store template for my Restaurant template.

What CSS do I need to put in my Restaurant template override for the Intelligent Shoe module to display correctly?

Regards
Lucien

What is Intelligent Shoe module?

Hi Cyberek.

It's one of the custom html modules in the Store version of quark. I wish to use it in my Restaurant version of Quark but the css is not included. I've been using firebug to copy the css from the Store version but still can't get it to work. There is also no instructions in the Store version on how do create the Intelligent Shoe module. It's the css to place inside my override that I'm trying to figure out.

I solved it!
Copied some css from the ecommerce template and created some extra media queries.

Ok, I'm glad you could solve it out.
Is there anything else I can help you with regarding this topic?

Yes please.

1. I am trying to keep the big pictured centred in desktop and tablet view.

2. I’m also trying to add a text title over the picture.

See attachment…


Some code would be nice

Could you please post an url to your site?

Just sent you a pm

I don't see this element on your site.

Same element, just a different pic and text.

Could you please create a screenshot of its current presence?

Sure. The hammock is the center point.

I'm afraid it can't be done. This layout is made with an image putted as a source. If you could redesign it and use background image - then you could control how it displays, but without good knowledge of css html and js it is gonna to be a hard thing to do.

Hmm... I worked a little bit on the issue:

Code: Select all

.big-photo .big-photo-img {
  background: #eeaa33;
  height: 100%;
  position: absolute;
  background: url('http://quark.slfinest.com/images/hammok-new-grad-1615x1000-bright.jpg') 0 0 no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}


is the first step, and second is to remove image from html (only the image html tag, leaving all other stuff as they are).
Seems to do the trick.
Just remember, if you will change the domain, you need to correct the css as it uses absolute patch with domain in it, or use relative to override.css path (with ../../../images path beginning).

Thanks Cyberek, works great, I really appreciate your effort. Maybe this could be implemented in the next update because I think most of us would want it this way.

How do I solve the image now not showing in mobile view, should I use a media query with a max width or is there a better way?

I also don’t quite understand what you mean with the ¨use relative to override.css path (with ../../../images path beginning)¨

I have provided absolute path in background-image property. You can use relative one instead.
And media-queries are all you need to show the image in smaller screens.

Oh ok, now I understand.

Once again, thanks!

One more thing...

What attributes should I use in the mobile media query to make the BACKGROUND IMG appear on top. Just to disable this code doesn't work since I’m no longer using the html image?

Your homepage looks completely different now. Could you provide correct url?

Sorry, it's not my actual page since I'm on a localhost, but I have copied the module to the page now so you can see it. (The url for the image is no longer in the css, it's now in the html instead.)

Thanks

Please correct this declaration in override.css:

Code: Select all

@media (max-width: 840px) {
    .big-photo {
    display: block;
    height: 500px;
}


Hi All,

I've followed what is described in this thread and I managed to place a better appearance on the big-photo-img, specially when this image is in Internet Explor. To do so I included this code in override.css:

.intelligent .big-photo .big-photo-img {
background: #eeaa33;
height: 100%;
position: absolute;
background: url('../../../images/demo/ecommerce/shoes_bg.jpg') 0 0 no-repeat;
background-size: cover;
background-position: 50% 50%;
margin-left:10px;
}

.artesanas .big-photo .big-photo-img {
background: #eeaa33;
height: 100%;
position: absolute;
background: url('../../../images/demo/ecommerce/Antigua.jpg') 0 0 no-repeat;
background-size: cover;
background-position: 50% 50%;
margin-left:10px;
}

I have two custom html in my web site based on the "Intelligent shoe" module, that's why I had to use a page class sufix (intelligent and artesanas) so put different images.

The appearance is better now even in Internet Explorer but I have the problem when I fall in a display which is lower than 840px. Simplye the image dissapears. I know the image is there, behind the "desc", but I'm not able to create the same behaviour you have in the quark demo where the image goes on top before the desc section.

Anybody can help to understand how this works and if it's posible to recreate it in my site assuming the modifications I've already mentioned and were posted in the current thread?

I look forward your reply.
Thanks.

By the way, not URL live site to check the CSS but you can recreate this situation clearly by following what is described in the thread. Just put the code in the override.css:

.big-photo .big-photo-img {
background: #eeaa33;
height: 100%;
position: absolute;
background: url('../../../images/demo/ecommerce/shoes_bg.jpg') 0 0 no-repeat;
background-size: cover;
background-position: 50% 50%;
margin-left:10px;
}

Remove the <img> tag from the Intelligent Show Custom HTML module (keep the rest as it is) and then realize about the problem created by the suggestion.

Thanks you very much.

Hi,

I would like to know if anybody is able to help with this. There are some quite days since my post and nobody replied so I'm wondering if somebody read the post and is aware about the problem.

I look foward yor reply.
Thanks

No help? Do you preffer I create a new thread?

I would appreciate an answer even if it's a negative answer.

Thanks.