Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 03/26/2021 in Posts

  1. Hi, Without knowing anything about the images (size ect) you intend to use i can only give a vague example. Assuming the images you plan on using are all the same size/dimensions then you could do something like: 1) Upload the 4 images to your site (for the example below i've used square images and uploaded them to root > images > source ) 2) Admin > Documents > Select the document which is your homepage 3) Select the "Content" tab and then click the "Source" button on the text editor. 4) Add some html to display your image "buttons" - For the example i am using square images so layout might need changing if you use rectangular images. <div class="home-blocks"> <div class="row"> <div class="col-xs-12 col-sm-3"> <a href="http://www.google.com"> <img class="img-responsive" src="images/source/mens_sale.png" title="Shop Mens Sale" /> </a> </div> <div class="col-xs-12 col-sm-3"> <a href="http://www.google.com"> <img class="img-responsive" src="images/source/womens_sale.png" title="Shop Womens Sale" /> </a> </div> <div class="col-xs-12 col-sm-3"> <a href="http://www.google.com"> <img class="img-responsive" src="images/source/childrens_sale.png" title="Shop Childens Sale" /> </a> </div> <div class="col-xs-12 col-sm-3"> <a href="http://www.google.com"> <img class="img-responsive" src="images/source/clearance.png" title="Clearance Sale - All Stock Must Go!" /> </a> </div> </div> </div> 5) Add a small bit of css When adding custom css styling i recommend you create a custom css file so that they don't get lost during any updates. To create a custom css file go to skins > basix > css and make a copy of the cubecart.default.css file and rename it cubecart.custom.css Open cubecart.custom.css and add the following .home-blocks{ text-align:center; } .home-blocks a { display:inline-block; margin: 10px 0px; } .home-blocks a img{ max-width:100%; } @media (max-width: 767px){ .home-blocks .col-xs-12 { width: 50%; } } then go to skins > basix > templates > element.css.php and add <link rel="stylesheet" href="{$ROOT_PATH}skins/{$SKIN_FOLDER}/css/cubecart.custom.css"> And clear your site cache via your admin panel.
    1 point
×
×
  • Create New...