Author Topic: Need responsive custom logo  (Read 1159 times)

Offline chaoticKym

  • Newbie
  • *
  • Posts: 8
  • Karma: +3/-0
    • View Profile
    • ChaoticKym
Need responsive custom logo
« on: June 08, 2017, 03:15:03 PM »
I want to use a custom logo rather than the anbantecart logo; however, the logo doesn't properly resize when viewing my site (chaotickym.com) on a mobile device.  The logo gets pushed down below the toggle button.

My logo is 300x57.  Since the height is a little smaller than the abantecart logo, I added in my custom CSS code to change the background color to blend in with the existing background color.

I created a SVG version of my logo, but discovered SVG is not a supported format for abantecart.

The only 2 solutions I can think of are:
1. Use a responsive image
2. Create multiple versions of the image and swap them out based on screen size

I'd rather go with the first option since that would require less coding changes.  Plus I've no idea how to achieve the second option in the abantecart code and if I ever update abantecart to another version I would lose my customization.

I've attached a screenshot for reference; the screen size width is 500px.  Any guidance would be greatly appreciated, thanks!!

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 3458
  • Karma: +167/-0
    • View Profile
Re: Need responsive custom logo
« Reply #1 on: June 09, 2017, 01:31:59 AM »
Hello.

AbanteCart resource library support almost any format. By default we limited images for png,jpg,ico.
It is very easy to add svg in the allowed format. Login to AbanteCart Admin > Catalog > Media Manager > in the top right click 'gear' icon to see "Edit  image resource type" window.

But not sure did you know but browser will not load svg if you put it to img src like regular images.
The correct way to insert svg is something like this
Code: [Select]
<svg width="256px" height="206px" viewBox="0 0 256 206" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M159.9687,131.8189 C157.1197,129.8819 153.2367,130.6219 151.2977,133.4709 L136.2677,155.5839 C133.7217,154.7319 131.0057,154.2519 128.1737,154.2519 C125.3667,154.2519 122.6737,154.7209 120.1477,155.5579 L95.1857,120.6849 C99.7967,116.0669 102.6497,109.6919 102.6497,102.6489 C102.6497,88.5529 91.2227,77.1259 77.1257,77.1259 C63.0297,77.1259 51.6027,88.5529 51.6027,102.6489 C51.6027,109.2499 54.1287,115.2459 58.2407,119.7759 L35.0887,156.1219 C32.1327,154.9249 28.9087,154.2519 25.5237,154.2519 C11.4277,154.2519 -0.0003,165.6789 -0.0003,179.7749 C-0.0003,193.8719 11.4277,205.2989 25.5237,205.2989 C39.6197,205.2989 51.0477,193.8719 51.0477,179.7749 C51.0477,173.5909 48.8467,167.9229 45.1887,163.5059 L68.6357,126.6959 C71.2947,127.6349 74.1447,128.1729 77.1257,128.1729 C79.6637,128.1729 82.1107,127.7909 84.4237,127.0999 L109.6147,162.2899 C105.3077,166.8599 102.6497,173.0009 102.6497,179.7749 C102.6497,193.8719 114.0767,205.2989 128.1737,205.2989 C142.2697,205.2989 153.6977,193.8719 153.6977,179.7749 C153.6977,173.0229 151.0557,166.8999 146.7737,162.3359 L161.6227,140.4899 C163.5617,137.6399 162.8207,133.7569 159.9687,131.8189" fill="#3E7EBC"/>
<path d="M230.4766,-0.0004 C216.3796,-0.0004 204.9526,11.4266 204.9526,25.5236 C204.9526,31.9966 207.3816,37.8896 211.3536,42.3886 L188.1106,78.8756 C185.2436,77.7606 182.1356,77.1256 178.8736,77.1256 C176.0266,77.1256 173.2956,77.6116 170.7386,78.4736 L145.8016,43.6376 C150.4616,39.0126 153.3506,32.6066 153.3506,25.5236 C153.3506,11.4266 141.9226,-0.0004 127.8266,-0.0004 C113.7306,-0.0004 102.3026,11.4266 102.3026,25.5236 C102.3026,32.5766 105.1636,38.9606 109.7886,43.5806 L94.3776,66.2516 C92.4396,69.1036 93.1796,72.9856 96.0316,74.9236 C98.8826,76.8596 102.7636,76.1216 104.7036,73.2706 L120.5366,49.9766 C122.8476,50.6646 125.2916,51.0466 127.8266,51.0466 C130.3226,51.0466 132.7276,50.6726 135.0076,50.0046 L160.2376,85.2496 C155.9766,89.8106 153.3506,95.9166 153.3506,102.6486 C153.3506,116.7456 164.7776,128.1736 178.8736,128.1736 C192.9706,128.1736 204.3976,116.7456 204.3976,102.6486 C204.3976,96.3386 202.0956,90.5726 198.2996,86.1176 L221.6576,49.4496 C224.4096,50.4646 227.3716,51.0466 230.4766,51.0466 C244.5726,51.0466 255.9996,39.6196 255.9996,25.5236 C255.9996,11.4266 244.5726,-0.0004 230.4766,-0.0004" fill="#4C96DF"/>
</g>
</svg>

 :) AbanteCart support this so what you need is to add Logo as HTML Resource please take a look on second screenshot.


“Chuck Norris is so amazing.”
― Mother Teresa

Offline chaoticKym

  • Newbie
  • *
  • Posts: 8
  • Karma: +3/-0
    • View Profile
    • ChaoticKym
Re: Need responsive custom logo
« Reply #2 on: June 12, 2017, 02:04:34 PM »
Thank you so much for your help! I have not worked much with SVGs so thank you also for posting the information on how to add one.

Offline sultanali

  • Newbie
  • *
  • Posts: 6
  • Karma: +1/-1
    • View Profile
Re: Need responsive custom logo
« Reply #3 on: December 29, 2017, 07:06:01 AM »
Hello Basara,

i try the solution, as you told, but its not working for me.
first i try to make SVG logo then import to AC, done without any problem.

and then try to add the code as HTML res, but doesn't work instead of logo there is pictures of "molecules" hahah maybe i did stupid!

please help how to do it correctly.
Thanks

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 3458
  • Karma: +167/-0
    • View Profile
Re: Need responsive custom logo
« Reply #4 on: January 03, 2018, 12:32:25 AM »
doesn't work instead of logo there is pictures of "molecules" hahah maybe i did stupid!

You see pictures of "molecules" because this is what in EXAMPLE svg. You should have your own SVG image
“Chuck Norris is so amazing.”
― Mother Teresa

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 147
  • Karma: +26/-3
    • View Profile
Re: Need responsive custom logo
« Reply #5 on: March 03, 2018, 02:36:10 PM »
Bump. 

This is a valuable thread. 

I can't believe how long I messed around with raster logo files trying to make them look good at all sizes, before finally discovering that the solution is a vector logo image format. 

I made my vector (svg) logo file in Inkscape. 

Open the finished svg file with a text editor, copy the file's code; that code is what you paste into the AC HTML Resource box as shown in the example above.   

Also as shown above, you apparently should not specify a ".svg" file extension on the filename of your svg file when you name it (different than adding a jpeg or png to the media library).

The final step is to change the logo file specified in Admin>System>Settings>Appearance.  Unlink the raster file, then add the vector file from your media library. 

It worked immediately, but I need to re-evaluate my css to see exactly what is happening at breakpoints. 

Thanks. 


 

LoliPromDress.com Prom dresses 2018