Jump to content

Amzin (Bootstrap Responsive Skin)


Recommended Posts

Me again! I need to make the category Images match the page width, if you look at the Steel Post Caps bar in blue you can see the photo doesn't match the width, this test image size is 850px X 450px which is spot on when used on the document pages, see here 

Your help is much appreciated.

imagecategorysize.PNG

Link to comment
Share on other sites

In the skin's config.xml, find the <image reference="category">. It is set for 800 pixels on the longest dimension.

Change this to 900. It will auto-scale down to fit the container (which is 848 px wide).

Next, you will need to find the CSS rule (I do not know where it would be.):

.cat-hdr-img img {
	margin: 0px auto 5px;
}

Change to:
.cat-hdr-img img {
	margin: 0 0 5px;
}

This CSS change will remove the margin that the browser adds to either side of the image, in equal part, to center the image in the slightly wider container.

Be sure to clear Cubecart's cache.

Edited by bsmither
  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Determine if the following statement already exists in the templates 'main.php' and 'main.checkout.php':

      <link href="{$ROOT_PATH}favicon.ico" rel="shortcut icon" type="image/x-icon">

If it is not there, add it just before the </head> tag.

Next, acquire a square image you want to use. Upload it to a free online ICO file maker, such as:

https://www.icoconverter.com/

Place the .ico file in CubeCart's main folder.

  • Like 1
Link to comment
Share on other sites

17 hours ago, bsmither said:

Determine if the following statement already exists in the templates 'main.php' and 'main.checkout.php':

      <link href="{$ROOT_PATH}favicon.ico" rel="shortcut icon" type="image/x-icon">

If it is not there, add it just before the </head> tag.

Next, acquire a square image you want to use. Upload it to a free online ICO file maker, such as:

https://www.icoconverter.com/

Place the .ico file in CubeCart's main folder.

That didn't work for some reason, I used the icon converter website to generate the favicon image and then placed it in the root directory, both mentioned files had the code in it. I've cleared the catch for the website and on my computer. Any ideas?

faviconissue.PNG

I converted a image size of 256 pixels with the following setting selected.

favconv.PNG

Edited by kiwi
Link to comment
Share on other sites

11 hours ago, bsmither said:

In my Firefox, I see the .ico image on the browser tab, but only has three "pages", 256, 128, and 64 pixels square.

 

Found a fantastic tool https://realfavicongenerator.net/ it generates all these favicons, its easy to use.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...