Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / header image for responsive classic?

header image for responsive classic?

Locked

Views: 14,981

Results 21 to 37 of 37
This thread is locked. New replies are disabled.
31 May 2016, 2:45 PM
#21
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

header image for responsive classic?

it appears there are inline styles on the headerWrapper

<div id="headerWrapper" style="max-width: 100%; margin: auto;">

extend that to be

<div id="headerWrapper" style="max-width: 100%; margin: auto; background-image: url("includes/templates/responsive_classic/images/bg2.png");">

Then in the stylesheet_colors.css (~line 18) remove #logoWrapper from there and add a new style below it for #logoWrapper as below

#logoWrapper {background-color: transparent;}

attached image is what I see when playing in my browser
Attachment 16384

1 Jun 2016, 10:34 PM
#22
pixelpadre avatar

pixelpadre

Suspended

Join Date:
Jun 2007
Location:
Eustis, Florida, USA, EARTH
Posts:
868
Plugin Contributions:
0

Re: header image for responsive classic?

[QUOTE=barco57;1312170]it appears there are inline styles on the headerWrapper

<div id="headerWrapper" style="max-width: 100%; margin: auto;">

Where might someone find that?

1 Jun 2016, 10:52 PM
#23
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

[QUOTE=pixelpadre;1312285]> barco57:

it appears there are inline styles on the headerWrapper

<div id="headerWrapper" style="max-width: 100%; margin: auto;">

Where might someone find that?
Have you tried using the developer's toolkit in the tools section of the admin? Search for headerWrapper case sensitive on the catalog.

2 Jun 2016, 1:09 AM
#24
pixelpadre avatar

pixelpadre

Suspended

Join Date:
Jun 2007
Location:
Eustis, Florida, USA, EARTH
Posts:
868
Plugin Contributions:
0

Re: header image for responsive classic?

With advice like yours, I can see how you have 8k posts. Big ego has no place here.

Now I have 1+ closer to 8000 too

2 Jun 2016, 1:25 AM
#25
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

pixelpadre:

With advice like yours, I can see how you have 8k posts. Big ego has no place here.

Now I have 1+ closer to 8000 too

Wow... Interesting for you to say that I'm the one that has the ego... try to show someone how they can find something and this is the response they give? Take it as you like considering you have already drawn your own opinion.

2 Jun 2016, 5:41 AM
#26
vvomble avatar

vvomble

Zen Follower

Join Date:
Feb 2013
Posts:
111
Plugin Contributions:
1

Re: header image for responsive classic?

Thanks Barco that has helped a lot much appreciated sorry I've not posted sooner

2 Jun 2016, 12:00 PM
#27
pixelpadre avatar

pixelpadre

Suspended

Join Date:
Jun 2007
Location:
Eustis, Florida, USA, EARTH
Posts:
868
Plugin Contributions:
0

Re: header image for responsive classic?

Your answer was thoughtless.

Firstly I have been using ZC for a very long time before you showed up. Quick look at my reg date would have clued most people in.

Secondly, maybe you should try to run developer tool kit and see if you have better luck than the rest of us finding it.

Thirdly, I have a local file search that scanned the entire ZC files directory.

Don't assume that people are stupid and lazy.

2 Jun 2016, 3:29 PM
#28
siem avatar

siem

New Zenner

Join Date:
Mar 2015
Posts:
28
Plugin Contributions:
0

Re: header image for responsive classic?

If the background image is only supposed to go behind the logo, than maybe changing #logoWrapper in stylesheet_colors.css might do the trick?
Changing

body, #mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #contentMainWrapper, #headerWrapper, .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}

to

body, #mainWrapper, #headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #contentMainWrapper, #headerWrapper, .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}
#logoWrapper{background-image:url("../images/bg2.png");}

did the trick for me, localhost, fresh install of 1.5.5

I think it was line 18?

Using the webmaster tools, I thought ```

<div id="logoWrapper" class="group onerow-fluid"> ``` highlighted the correct part of the site? As far as I can see locally, the part behind the logo in the top part is the only part of the site that now has a different background.
2 Jun 2016, 4:55 PM
#29
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

pixelpadre:

Your answer was thoughtless.

Firstly I have been using ZC for a very long time before you showed up. Quick look at my reg date would have clued most people in.

Secondly, maybe you should try to run developer tool kit and see if you have better luck than the rest of us finding it.

Thirdly, I have a local file search that scanned the entire ZC files directory.

Don't assume that people are stupid and lazy.

@pixelpadre
Again for some reason you take issue with me, at least three times now.

  1. there is/was no assumption of intelligence or desire to put forth effort. There simply was no claim of how one had tried to find it.
  2. I did try to find the class before posting and found it in two of the template files (line 40 of a default install of ZC 1.5.5 in both includes/templates/responsive_classic/common/tpl_header.php and includes/templates/template_default/common/tpl_header.php), but why provide the specific location out right instead of showing a way in which to find a solution. Further to offer more than one way to resolve the issue. Already two methods have been presented. A third would be to have a css file that loads after any of the previously identified ones having the same "command" as has been identified to provide the desired result.
  3. duration of time of having an account to the ZC forum is zero indication of one's ability to navigate the code, find specific details, or even to do so much as setup anything on one's own. At least a year ago I was PMd by someone that had an account since the early start of ZC. They had 0 posts to the forum, but needed help with something relatively minor. During discussion, asked them why they had never posted. Answer? Because too afraid of responses to be received. Considering the unwarranted response above, in part I don't blame them. If anything by trying to imply that there is an ego issue here, it really reflects back on yourself, in particular of the aggravation that the particular piece of information couldn't be found and that there was for an unknown/undisclosed reason to lash out at another. Certainly not representative of time on earth which as asserted in the previous message ought to be indicative of being in some way "better".

Please the next time you are frustrated, go exercise, read a book or something rather than unnecessarily berate someone.

3 Jun 2016, 1:24 AM
#30
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: header image for responsive classic?

@pixelpadre Too answer your question.

<div id="headerWrapper" style="max-width: 100%; margin: auto;">

seems to be specific to their template, as the headerWrapper div in a stock responsive classic doesn't have the additional inline styles. So my advice was specific to their circumstance.

3 Jun 2016, 1:34 AM
#31
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

barco57:

@pixelpadre Too answer your question.

<div id="headerWrapper" style="max-width: 100%; margin: auto;"> ``` > seems to be specific to their template, as the headerWrapper div in a stock responsive classic doesn't have the additional inline styles. So my advice was specific to their circumstance.

There's added foundation javascript that appends on the style="max-width: 100%; margin: auto;" portion of the div to help support the responsive aspect of the template and is reflected in the "analysis" of the page when using tools like firebug, etc...

3 Jun 2016, 1:37 AM
#32
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: header image for responsive classic?

Doh! you're correct...I keep forgetting about the javascript inserts of inline styles....sigh

3 Jun 2016, 1:43 AM
#33
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

barco57:

Doh! you're correct...I keep forgetting about the javascript inserts of inline styles....sigh

Well if means anything only came across it because of the developers toolkit search on headerWrapper... was the third "php" file found to have that specific piece of information.

3 Jun 2016, 2:09 AM
#34
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: header image for responsive classic?

I see what you did there... was that a body slam from the top ropes?....LOL :P Well done

3 Jun 2016, 2:35 AM
#35
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: header image for responsive classic?

barco57:

I see what you did there... was that a body slam from the top ropes?....LOL :P Well done

Not at all. The third php file was irrelevant to locating the headerWrapper portion of the template file, it just happens to explain why the rest of the content showed on the line and why I suggested a much smaller chunk of the total entry. Too many ways to "sneak" something into the final html code. Looking at some of the upcoming php for soon it's going to be hard to find some constants as they will be defined by inserting a small piece of data between two other parts to give a full constant...

Besides that, by applying the desired styling directly at the object it fulfills what I was previously describing. It is the last style information to be loaded and therefore whatever is there overrides anything previously pushed to the browser. The thing is, if the background image is put with the foundation javascript then devices that access the site without javascript enabled will not see that image. Can work for and against the desired outcome. Otherwise assuming the current foundation javascript doesn't undo any background image that "survives" all other previous css. And by survive again I mean that the background image has to be pushed after all other existing background styling that is in the current responsive template for that id because they all use the fully declared background css that includes none in the position for background image.

Anyways, looks like the OP has at least one solution that works.

11 Jun 2016, 7:40 PM
#36
pixelpadre avatar

pixelpadre

Suspended

Join Date:
Jun 2007
Location:
Eustis, Florida, USA, EARTH
Posts:
868
Plugin Contributions:
0

Re: header image for responsive classic?

Keep posting! You're on your way to 9000! I hear you get lollipops when you hit 9000.

I can search all of your 8000 posts and tell you exactly what percentage were worthless or of no value to anyone.

11 Jun 2016, 9:00 PM
#37
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: header image for responsive classic?

@pixelpadre enough