hi all
google has not helped
Opencart 2x
i have a theme where the logo is set in the styles.css file unusually and does need seem to scale especially on mobile
the normal settings edit logo seems disabled by the theme authot
so i need to comment it out in the styles file and set it in the feader.tpl file
i would appreciate any code i need including positioning to add it and how to make it responsive
i cn edit fies upload them etc but i do not understand code so please be as precise as possible.. i will learn
thanks
george
For an any code request, a URL is required. Forum rules.i would appreciate any code i need including positioning to add it and how to make it responsive
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
https://www.themeatshack.shop
Note currently the logo is poor on mobile and set in styles. Css
Note currently the logo is poor on mobile and set in styles. Css
Nice site ..
The problem is not the header.tpl, its the css
The media section needs some attention ..
At a quick look and a quick fix
styles.css
header div#logo a
line 2743
remove -> background-size : 100%;
add -> zoom:0.9;
line 2744
remove -> background-size: 100%;
That should solve your problem
The problem is not the header.tpl, its the css
The media section needs some attention ..
At a quick look and a quick fix
styles.css
header div#logo a
line 2743
remove -> background-size : 100%;
add -> zoom:0.9;
line 2744
remove -> background-size: 100%;
That should solve your problem
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Hi
thanks for the suggestion however I'm avoiding making changes to production and have a mirrored site at http://www.themeatingjoint.shop/tmja/
the relevant css section I changed as you suggested is
header div#logo a {
display: block;
width: 167px;
height: 112px;
background-image:url(../image/the-meat-shack.png);
/* background-size: 167px 112px;*/
zoom: 0.9;
background-repeat: no-repeat;
margin:1px 0px 0px 5px;
}
full screen pc looks ok... resizing is poor
on mobile it chops off parts of the logo
additional info
in the theme header.tpl i have tried to make image be responsive
<div id="logo" class="top"><a href="<?php echo $home; ?>" title="Meat Shack" class="img-responsive" /><img src="<?php echo $logo; ?>" alt="" /></a></div>
thanks for the suggestion however I'm avoiding making changes to production and have a mirrored site at http://www.themeatingjoint.shop/tmja/
the relevant css section I changed as you suggested is
header div#logo a {
display: block;
width: 167px;
height: 112px;
background-image:url(../image/the-meat-shack.png);
/* background-size: 167px 112px;*/
zoom: 0.9;
background-repeat: no-repeat;
margin:1px 0px 0px 5px;
}
full screen pc looks ok... resizing is poor
on mobile it chops off parts of the logo
additional info
in the theme header.tpl i have tried to make image be responsive
<div id="logo" class="top"><a href="<?php echo $home; ?>" title="Meat Shack" class="img-responsive" /><img src="<?php echo $logo; ?>" alt="" /></a></div>
header div#logo a
line 2476
width : 100% -> remove
background-size: 100%; -> remove
line 2480
width: 100%; -> remove
line 2745
width : 100%; -> remove
background-size : 100%; -> remove
background-size and background-cover is the opposite you want - that is for fitting an image into a space and cropping it to fit the screen or container.
You need to remove css not add it. The zoom:0.9; should not be necessary either, but a quick fix, there is something overlapping, not as obvious as the background-size and width, but it is somewhere in
header div#logo.top
header div#logo a
header div#logo
- maybe padding or margin -
line 2712 - 2721 - 2744 - trying to force something
I kept:-
THIS IS MY LOGO
line 253
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}
FIT THE CONTAINER TO THE FULL WIDTH
line 2713 @media
header div#logo {
width: 100%;
}
CENTRE MY LOGO TO THE CONTAINER
line 2723 @media
header div#logo a {
margin: 0 auto;
}
To my knowledge I removed all the other instances of your css with regards to your logo fitting it into the maximum space available at all times and looks perfect on all screens. Changing the container and the placement is also responsive
line 2476
width : 100% -> remove
background-size: 100%; -> remove
line 2480
width: 100%; -> remove
line 2745
width : 100%; -> remove
background-size : 100%; -> remove
background-size and background-cover is the opposite you want - that is for fitting an image into a space and cropping it to fit the screen or container.
You need to remove css not add it. The zoom:0.9; should not be necessary either, but a quick fix, there is something overlapping, not as obvious as the background-size and width, but it is somewhere in
header div#logo.top
header div#logo a
header div#logo
- maybe padding or margin -
line 2712 - 2721 - 2744 - trying to force something
I kept:-
THIS IS MY LOGO
line 253
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}
FIT THE CONTAINER TO THE FULL WIDTH
line 2713 @media
header div#logo {
width: 100%;
}
CENTRE MY LOGO TO THE CONTAINER
line 2723 @media
header div#logo a {
margin: 0 auto;
}
To my knowledge I removed all the other instances of your css with regards to your logo fitting it into the maximum space available at all times and looks perfect on all screens. Changing the container and the placement is also responsive
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Mona
the test site looks pretty good (apart from the overlap which is ok really)
http://www.themeating,shop/tmja/
however applying the same header.tpl and styles.css to production and that site the logo seems to zoomed out (in particular for mobile phones) and so is cropped by the container i think
Mona can you check and advise please
thanks
george
the test site looks pretty good (apart from the overlap which is ok really)
http://www.themeating,shop/tmja/
however applying the same header.tpl and styles.css to production and that site the logo seems to zoomed out (in particular for mobile phones) and so is cropped by the container i think
Mona can you check and advise please
thanks
george
Hi
Ok taking a look at the test site - I am not sure you understood my suggestion - All css code relating to header div#logo (etc) needs removing keeping just the three lines of code above (placed exactly where they are now so commenting out is great).
It is position: absolute; that is causing your problem now
Just realised what the real site link is -
same issue and more code - same advice as above. Try to remove it all as suggested keeping only those css directives.
You do not add the @media - that was to explain that it MUST be placed exactly where it is ie. within the @media section it is already (when the browser detects screen change ) - I know it is all a little frightening ok - but copy the css file - rename it as a back up and bite the bullet.
Ok taking a look at the test site - I am not sure you understood my suggestion - All css code relating to header div#logo (etc) needs removing keeping just the three lines of code above (placed exactly where they are now so commenting out is great).
It is position: absolute; that is causing your problem now
Just realised what the real site link is -
same issue and more code - same advice as above. Try to remove it all as suggested keeping only those css directives.
You do not add the @media - that was to explain that it MUST be placed exactly where it is ie. within the @media section it is already (when the browser detects screen change ) - I know it is all a little frightening ok - but copy the css file - rename it as a back up and bite the bullet.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Mona
I will understand eventually...
just refer to my test site for now ... I need line references please
just the three lines of code above (placed exactly where they are now so commenting out is great).
Q: which three lines are these?
It is position: absolute; that is causing your problem now
Q: how do I fix?
You do not add the @media - that was to explain that it MUST be placed exactly where it is
Q: so I should remove text @media but leave the rest where I typed it?
Q: what indicates the start and end of the media section?
and thanks for taking time out to help...
george
I will understand eventually...
just refer to my test site for now ... I need line references please
just the three lines of code above (placed exactly where they are now so commenting out is great).
Q: which three lines are these?
It is position: absolute; that is causing your problem now
Q: how do I fix?
You do not add the @media - that was to explain that it MUST be placed exactly where it is
Q: so I should remove text @media but leave the rest where I typed it?
Q: what indicates the start and end of the media section?
and thanks for taking time out to help...
george
Q1. which three lines are these?
Answer:
ON LINE 253 you want (and nothing else)
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}
ON LINE 2713 you want (and nothing else)
header div#logo {
width: 100%;
}
ON LINE 2723 you want (and nothing else)
header div#logo a {
margin: 0 auto;
}
You do not want ANYTHING ELSE for any of the directives for logo ON ANY LINE -
header div#logo.top { no code inside this }
header div#logo a { no code inside this }
header div#logo { no code inside this }
EXCEPT THE THREE LINES ABOVE
239 - gone
245 gone
253 edited
2472 gone
2476 gone
2581 gone
2643 gone
2713 - leave but remove the @media above it
2717 - already gone
2727 - leave but remove the @media above it
2730 - I kept that line - it is a repetition of the above
2753 - gone
At worst case scenario, you might want to add padding: 2px somewhere - no big deal -
Q2. It is position: absolute; that is causing your problem now
Answer - REMOVE IT
Q3. so I should remove text @media but leave the rest where I typed it?
Answer
Line 2712 @media - remove
Line 2726 @media - remove
Q3.
Answer
Line 2702 @media blah blah blah {
some code
Line 2778 }
MEANS
@media - Hello media
blah blah blah - if you detect user is visiting using this
{ - please to the following
} - ok finished this section
Pleasure - I was very lucky to have a couple of people walk me through opencart at the beginning - and now I understand how lucky I was
Answer:
ON LINE 253 you want (and nothing else)
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}
ON LINE 2713 you want (and nothing else)
header div#logo {
width: 100%;
}
ON LINE 2723 you want (and nothing else)
header div#logo a {
margin: 0 auto;
}
You do not want ANYTHING ELSE for any of the directives for logo ON ANY LINE -
header div#logo.top { no code inside this }
header div#logo a { no code inside this }
header div#logo { no code inside this }
EXCEPT THE THREE LINES ABOVE
239 - gone
245 gone
253 edited
2472 gone
2476 gone
2581 gone
2643 gone
2713 - leave but remove the @media above it
2717 - already gone
2727 - leave but remove the @media above it
2730 - I kept that line - it is a repetition of the above
2753 - gone
At worst case scenario, you might want to add padding: 2px somewhere - no big deal -
Q2. It is position: absolute; that is causing your problem now
Answer - REMOVE IT
Q3. so I should remove text @media but leave the rest where I typed it?
Answer
Line 2712 @media - remove
Line 2726 @media - remove
Q3.
Answer
Line 2702 @media blah blah blah {
some code
Line 2778 }
MEANS
@media - Hello media
blah blah blah - if you detect user is visiting using this
{ - please to the following
} - ok finished this section
Pleasure - I was very lucky to have a couple of people walk me through opencart at the beginning - and now I understand how lucky I was
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Mona
I think I screwed up somewhere...
I think I followed your steps ... but something is wrong on the test site
http://www.themeatingjoint.shop/tmja/
thanks
george
I think I screwed up somewhere...
I think I followed your steps ... but something is wrong on the test site
http://www.themeatingjoint.shop/tmja/
thanks
george
yes - your stylesheet is missing ...
check you actually uploaded it and to the correct place
check you actually uploaded it and to the correct place
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
GREAT
right all you need to do is remove
1. /* position: absolute; */
2. /* top: 2px; */
3. /* left: 0px; */
from line 264
because
1. position:absolute is overlaying it and not relative to the rest
2. top 2px has no effect because it is to the top, maybe you want margin-top: 2px;
3. left: 0px; - if you are trying to push it to the left .. remove /* margin: 0 auto; */ from 2639 which is centering it
right all you need to do is remove
1. /* position: absolute; */
2. /* top: 2px; */
3. /* left: 0px; */
from line 264
because
1. position:absolute is overlaying it and not relative to the rest
2. top 2px has no effect because it is to the top, maybe you want margin-top: 2px;
3. left: 0px; - if you are trying to push it to the left .. remove /* margin: 0 auto; */ from 2639 which is centering it
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
it happens sometimes .. now you know .. just upload again
re: niggling full screen laptop the categories menu is hidden
well that is in the @media line 2481
read it @media only screen and (min-width: 0px) and (max-width: 1200px) {
so your laptop is screen width 1200px or less - that is not an error - just a cut off point
- you can change that to be 1px less that you laptop !
Your menu is quite long, you can do whatever fits the menu - or push the menu onto two lines if that is what you want.
EDITED - I might have misunderstood - Do you not have the menu icon to dropdown on your laptop? - the solution is the same - but I am not sure I understand the problem.
I can not reproduce - browsers do not read css the same - However, your code states @media 1200 and over as well as @ media 1200 and under - so there is a conflict at 1200 point -
change
@media only screen and (min-width: 0px) and (max-width: 1200px) {
to
@media only screen and (min-width: 0px) and (max-width: 1199px) {
a better way to write it anyway
re: niggling full screen laptop the categories menu is hidden
well that is in the @media line 2481
read it @media only screen and (min-width: 0px) and (max-width: 1200px) {
so your laptop is screen width 1200px or less - that is not an error - just a cut off point
- you can change that to be 1px less that you laptop !
Your menu is quite long, you can do whatever fits the menu - or push the menu onto two lines if that is what you want.
EDITED - I might have misunderstood - Do you not have the menu icon to dropdown on your laptop? - the solution is the same - but I am not sure I understand the problem.
I can not reproduce - browsers do not read css the same - However, your code states @media 1200 and over as well as @ media 1200 and under - so there is a conflict at 1200 point -
change
@media only screen and (min-width: 0px) and (max-width: 1200px) {
to
@media only screen and (min-width: 0px) and (max-width: 1199px) {
a better way to write it anyway
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
yes I see what you mean...
for completeness I have changed it to 1199 to remove the otential conflict
firefox and edge both on laptop do not display the menu but chrome does...
i think chrome deals with css better
if i zoom firefox to 90% the menu appears...
its annoying..
anyway.... once again thanks for all your help!!!
george
for completeness I have changed it to 1199 to remove the otential conflict
firefox and edge both on laptop do not display the menu but chrome does...
i think chrome deals with css better
if i zoom firefox to 90% the menu appears...
its annoying..
anyway.... once again thanks for all your help!!!
george
you are welcome
I believe you should mark the title of this post as [SOLVED] as that is a different issue ..
I would take a look at the script site.js
// RESET THE MAIN MENU IF SCALING UP
if ($(window).width() >= 1200) {
$('nav#main_navigation > ul#main_links').show();
$('#js_mobile_sidebar').show();
}
// SOME STRANGE ISSUE IN IE8 WITH BODY OVERFLOW - SO HAD TO CAPTURE IT HERE
if (!$("html").hasClass("lt-ie9")) {
if ($(window).width() <= 1200) {
$('nav#main_navigation > ul#main_links').hide();
$('#js_mobile_sidebar').hide();
$('nav#main_navigation > ul#mobile_menu_trigger a strong').html('Main Menu');
$('#mobile_sidebar_trigger a strong').html('Show Categories');
}
}
I believe you should mark the title of this post as [SOLVED] as that is a different issue ..
I would take a look at the script site.js
// RESET THE MAIN MENU IF SCALING UP
if ($(window).width() >= 1200) {
$('nav#main_navigation > ul#main_links').show();
$('#js_mobile_sidebar').show();
}
// SOME STRANGE ISSUE IN IE8 WITH BODY OVERFLOW - SO HAD TO CAPTURE IT HERE
if (!$("html").hasClass("lt-ie9")) {
if ($(window).width() <= 1200) {
$('nav#main_navigation > ul#main_links').hide();
$('#js_mobile_sidebar').hide();
$('nav#main_navigation > ul#mobile_menu_trigger a strong').html('Main Menu');
$('#mobile_sidebar_trigger a strong').html('Show Categories');
}
}
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
interesting... on the basis that edge and ie have moved on and fixed stuff i commented out the section re ie8... and edge is now fine....
need to figure out firefox.... but pretty damn cool girl... pretty damn cool... you are GOOD
need to figure out firefox.... but pretty damn cool girl... pretty damn cool... you are GOOD
Who is online
Users browsing this forum: No registered users and 5 guests
