Carlisle Fresh Template Support Thread

picaflor-azul:

I would recommend adding the large header image as a background image on the element #headerWrapper. In general, you can make background images responsive by adding background-size: 100%;
Thanks,
Anne

Hi Anne - oy, i must be doing something wrong because that made things worse. Here's the code I used:
#headerWrapper {margin:0;padding:0;background:transparent url(../images/asn-header-feather.png) no-repeat 100% center;}

With the full width image in #headerWrapper's background, it lowered itself on the page. On home page it practically disappears behind the sliders, with the login/cart/checkout links hanging in the middle of nothing way up above it. On 2-column pages it's maybe 50-100 pixels lower than it should be (this brings it closer to the main nav, which i like, but too far from top of screen, which i don't like). Also, main column is still below the left instead of next to it. I haven't yet tried making the header image clickable so it links to home page...

BTW, this is NOT a new ZC install, I'm switching from the Classic template, and I do have a bunch of plugins. I haven't yet copied their template-specific files to Carlisle folders - should I do that before I mess with anything else? Maybe active plugins that can't find their template-specific files are interfering?

Thank you!
Magz

magz:

Hi Anne - oy, i must be doing something wrong because that made things worse. Here's the code I used:
#headerWrapper {margin:0;padding:0;background:transparent url(../images/asn-header-feather.png) no-repeat 100% center;}

With the full width image in #headerWrapper's background, it lowered itself on the page. On home page it practically disappears behind the sliders, with the login/cart/checkout links hanging in the middle of nothing way up above it. On 2-column pages it's maybe 50-100 pixels lower than it should be (this brings it closer to the main nav, which i like, but too far from top of screen, which i don't like). Also, main column is still below the left instead of next to it. I haven't yet tried making the header image clickable so it links to home page...

BTW, this is NOT a new ZC install, I'm switching from the Classic template, and I do have a bunch of plugins. I haven't yet copied their template-specific files to Carlisle folders - should I do that before I mess with anything else? Maybe active plugins that can't find their template-specific files are interfering?

Thank you!
Magz

I would add the background-size:100%; as a separate declaration.

If you post a link to your site I can take a look.

Thanks,

Anne

grakowsky:

Anne, any thoughts on this problem??

Try adding this to the bottom of the responsive.css file:

.ie8 .content1{display:block !important;}

Thanks,

Anne

picaflor-azul:

I would add the background-size:100%; as a separate declaration.
If you post a link to your site I can take a look.
Thanks,
Anne

Hi Anne - I tried that, too, with the same result. Also, forgot to mention earlier, when I totally removed the logo, the #headerWrapper bgd image became cut off on the top, and login/cart/checkout links jumped up to the very top of the page (above my shipping banner), and on home page the bgd image jumped below the main nav menu and was almost completely hidden behind the slider. So I added a transparent logo file, just 1 px wide but 150 px tall. That fixed the cutting off issue, but not the issues I described previously. Also, whether the transparent logo is there or not, on home page the area with category thumbnails appears pushed to the right (Featured Products carousel and everything below it seems fine, I love the carousel feature BTW).

The link to the testing site (my only one with Carlisle at this point) is http://test.allstringsnylon.info - thank you!
Magz

picaflor-azul:

Try adding this to the bottom of the responsive.css file:

.ie8 .content1{display:block !important;}

> 
> Thanks,
> 
> Anne

Unfortunately that didn't work. I'm surprised this hasn't been brought up before... does anyone else out there have any ideas? My footer links are not showing in IE8 when the page javascript is enabled, they show fine in Firefox and Safari and Chrome though.

grakowsky:

Unfortunately that didn't work. I'm surprised this hasn't been brought up before... does anyone else out there have any ideas? My footer links are not showing in IE8 when the page javascript is enabled, they show fine in Firefox and Safari and Chrome though.

Oh my goodness.... I did it. Thank you, Anne, you pointed me in the right direction. At the bottom of stylesheet.css in the carlisle_fresh css directory, you had already put ```
.ie8 .content{display:block !important;}

so I put this beneath it: ```
.ie8 .content1{display:block !important;}
```.

Is this problem because of the carousel and this line of code in the beginning of tpl_footer_menu.php? ```
$(document).ready(function() {
        jQuery(".content1").hide();
        //toggle the componenet with class

If so, what does that portion of the code do? (I'm just curious)

Thanks again!!

Hi, I'm having an issue with displaying the 'Conditions' on my website (is there a SQL patch to solve this). Also is there any way of making the featured products on the main page responsive for hand held devices? I'm using Zen Cart 1.5.1 and am very new to this.
http://www.view-jepsons.com/
Kind regards

View Jepsons:

Hi, I'm having an issue with displaying the 'Conditions' on my website (is there a SQL patch to solve this). Also is there any way of making the featured products on the main page responsive for hand held devices? I'm using Zen Cart 1.5.1 and am very new to this.
http://www.view-jepsons.com/
Kind regards

The featured products on the main page is responsive.

See the demo:

http://zenlyzen.com/responsive_demo/index.php?main_page=index&template_switch_id=carlisle_fresh

There should be no problems with the define pages content.

Thanks,

Anne

grakowsky:

Oh my goodness.... I did it. Thank you, Anne, you pointed me in the right direction. At the bottom of stylesheet.css in the carlisle_fresh css directory, you had already put ```
.ie8 .content{display:block !important;}

> 
> so I put this beneath it: ```
.ie8 .content1{display:block !important;}
```.
> 
> Is this problem because of the carousel and this line of code in the beginning of tpl_footer_menu.php? ```
$(document).ready(function() {
        jQuery(".content1").hide();
        //toggle the componenet with class

If so, what does that portion of the code do? (I'm just curious)

Thanks again!!

It is not really related to the javascript. I mistakenly used the content class which is already used by zen cart, so it has been changed to content1.

Thanks,

Anne

magz:

Hi Anne - I tried that, too, with the same result. Also, forgot to mention earlier, when I totally removed the logo, the #headerWrapper bgd image became cut off on the top, and login/cart/checkout links jumped up to the very top of the page (above my shipping banner), and on home page the bgd image jumped below the main nav menu and was almost completely hidden behind the slider. So I added a transparent logo file, just 1 px wide but 150 px tall. That fixed the cutting off issue, but not the issues I described previously. Also, whether the transparent logo is there or not, on home page the area with category thumbnails appears pushed to the right (Featured Products carousel and everything below it seems fine, I love the carousel feature BTW).

The link to the testing site (my only one with Carlisle at this point) is http://test.allstringsnylon.info - thank you!
Magz

If I were you, I would restore the original stylesheet and tpl_header.php file. Just add your logo as the logo should be added and then adjust the other header elements using css to suit your needs.

If you will not be using the tagline, there is a patch posted earlier in the thread with corrected code for the tpl_header.php file.

Thanks,

Anne

picaflor-azul:

If I were you, I would restore the original stylesheet and tpl_header.php file. Just add your logo as the logo should be added and then adjust the other header elements using css to suit your needs.
If you will not be using the tagline, there is a patch posted earlier in the thread with corrected code for the tpl_header.php file.
Thanks,
Anne

Thanks Anne,

Turns out the tagline was indeed causing the problem, but when I replaced its content in header.php with a space rather than leave it totally blank, that fixed the header position issue.

But...now that my logo/header image goes across the entire width, one can't enter anything in the search field - looks like it's underneath the logo (as are the login/cart/checkout links and the main menu, but those somehow function properly). I tried applying z-index values of 9000 and 1, respectively, to #headerWrapper and #navMainWrapper, but that didn't help. What do you suggest?

Thanks!
Magz

magz:

Thanks Anne,

Turns out the tagline was indeed causing the problem, but when I replaced its content in header.php with a space rather than leave it totally blank, that fixed the header position issue.

But...now that my logo/header image goes across the entire width, one can't enter anything in the search field - looks like it's underneath the logo (as are the login/cart/checkout links and the main menu, but those somehow function properly). I tried applying z-index values of 9000 and 1, respectively, to #headerWrapper and #navMainWrapper, but that didn't help. What do you suggest?

Thanks!
Magz

You need to add a width to the overlapping elements. I would add borders of different colors to the elements to see which is overlapping.

Thanks,

Anne

I am having problems with the login/cart/checkout links at the top of the page. My page shows just the bottoms of each of them and they are not legible, I was wondering if there was a way to fix this. Site https://www.lutheranshirts.com

Todder:

I am having problems with the login/cart/checkout links at the top of the page. My page shows just the bottoms of each of them and they are not legible, I was wondering if there was a way to fix this. Site https://www.lutheranshirts.com

You can change the stylesheet.css from:

#navMain ul {float: right;line-height: 1.5em;list-style-type: none;margin: -80px 0 0;padding: 0 0 0.5em;text-align: right;}

to

#navMain ul {float: right;line-height: 1.5em;list-style-type: none;margin: -40px 0 0;padding: 0 0 0.5em;text-align: right;}

Thanks,

Anne

picaflor-azul:

You need to add a width to the overlapping elements. I would add borders of different colors to the elements to see which is overlapping.
Thanks,
Anne

Hi Anne - maybe I didn't say what I meant - the vertical and horizontal position on the screen is now good for all elements, it's the depth that seems to be a problem. Instead of the header/logo image being in the background of the search field, the search field appears to be in the background of the (semi-transparent) logo image. As a result, although I can see the search field, when I try typing in it, instead I'm hovering over the logo. I noticed that in Firefox and Opera I can actually type in the field, but then clicking the magnifying glass icon does nothing. Pressing "enter" does complete the search, but that's only FF and Opera, in Chrome and Safari I can't even type the search term (haven't checked IE yet...) My guess is this is a layer issue, but I don't seem to be able to figure out what's in what layer and how to put the search field in front of the header/logo. What file(s) and element(s) should I be editing?
Thanks!
Magz

magz:

Hi Anne - maybe I didn't say what I meant - the vertical and horizontal position on the screen is now good for all elements, it's the depth that seems to be a problem. Instead of the header/logo image being in the background of the search field, the search field appears to be in the background of the (semi-transparent) logo image. As a result, although I can see the search field, when I try typing in it, instead I'm hovering over the logo. I noticed that in Firefox and Opera I can actually type in the field, but then clicking the magnifying glass icon does nothing. Pressing "enter" does complete the search, but that's only FF and Opera, in Chrome and Safari I can't even type the search term (haven't checked IE yet...) My guess is this is a layer issue, but I don't seem to be able to figure out what's in what layer and how to put the search field in front of the header/logo. What file(s) and element(s) should I be editing?
Thanks!
Magz

There is no problem. The search glass is not an icon or button, just a background image.

Thanks,

Anne

picaflor-azul:

There is no problem. The search glass is not an icon or button, just a background image.
Thanks,
Anne

Hi Anne,
OIC, never mind the icon then, but I'm still unable to enter a search term into the search field in Chrome or Safari (on Windows 7)... How do I move the search gizmo in front of the header image? Or is there some browser-specific code I need? (Works in Firefox, Opera and IE.) In case you'd like to take a look, it's at http://test.allstringsnylon.info/
Thank you,
Magz

magz:

Hi Anne,
OIC, never mind the icon then, but I'm still unable to enter a search term into the search field in Chrome or Safari (on Windows 7)... How do I move the search gizmo in front of the header image? Or is there some browser-specific code I need? (Works in Firefox, Opera and IE.) In case you'd like to take a look, it's at http://test.allstringsnylon.info/
Thank you,
Magz

I have already given you my best advice on how to trouble shoot this. My guess is that there is a width or height that is covering the search. See my previous post for trouble shooting tips.

Thanks,

Anne

Hi Anne, i really love this theme. i have only one question that i simply can't find.
(new to the responsive i guess) I have my banners all a lot larger, in height.
Where can i change that? i just can't find it. ( its a first in your great templates that I have to ask for help!)

Hi Anne, thanks for this great template!!

here comes the most dumb of the questions in this thread... I'm configuring the template but I cannot find the "Carousel Featured Products Configuration" option right under Carlisle Fresh in the Configuration drop down menu.
(may be I eventually missed an SQL patch, but I am afraid of running them again because of the warnings)

Can you figure out my mistake?

Thanks a lot :smile: