Re: ZCA Bootstrap 4 Template [Support Thread]
I have a set of manually added product images added into the product description like this:
HTML Code:
<div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_001.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_002.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_003.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_004.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_005.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_006.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_007.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_008.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_009.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_010.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_011.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_012.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_013.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_014.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_015.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div>
How would I make each image open full size in its own 'modal lightbox window' using the bootstrap scripts?
I've tried this:
HTML Code:
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-001.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-002.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-003.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
However that only opens the first image no matter what image you click on.
Re: ZCA Bootstrap Template
I am using the bootstrap template but would like to make some css modifications, how could i do that ?
Re: ZCA Bootstrap Template
Quote:
Originally Posted by
windsurfer
I am using the bootstrap template but would like to make some css modifications, how could i do that ?
Follow your sig, get chrome or Firefox, go to your page you want to change, hit F12
Re: ZCA Bootstrap 4 Template [Support Thread]
Quote:
Originally Posted by
Nick1973
I have a set of manually added product images added into the product description like this:
HTML Code:
<div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_001.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_002.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_003.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_004.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_005.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_006.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_007.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_008.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_009.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_010.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_011.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_012.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div><div class="productImagesRow"> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_013.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_014.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div> <div class="productImagesColumn"><img src="images/additional/red_arrows_canvas_015.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"></div></div>
How would I make each image open full size in its own 'modal lightbox window' using the bootstrap scripts?
I've tried this:
HTML Code:
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-001.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-002.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
<a data-toggle="modal" data-target=".image-modal-lg" href="#image-modal-lg"><img src="images/red-arrows-canvas-003.jpg" alt="Red Arrows A3 Canvas Prints" title=" Red Arrows A3 Canvas Prints " width="450" height="450"><div class="p-1"></div><span class="imgLink">larger image</span></a>
However that only opens the first image no matter what image you click on.
I've sorted this out now thanks
Re: ZCA Bootstrap Template
Anyone have any tips on how I'd go about making the ezpages header disappear on mobile? I don't mind the items being in the collapsable menu. I just don't want the big bar across the mobile screen. I like the the ezpages header only on desktop. Thank you
Re: ZCA Bootstrap Template
In your template overrides style sheet use "visibility : hidden" in the "@media size sections"
eg
@media (max-width: 480px) and (min-width: 320px) {
#expagesBarHeader { visibility: hidden; }
}
You will hide the bar but have a hole in the display so may need to add "height: 0em;"
environment Test: Zen Cart 157; Apache 2.4.46; PHP 7.3.21; MySQL 5.7.31; Linux 4.15.0
Re: ZCA Bootstrap Template
V1.5.7
PHP Version: 7.3.21
Server Apache
latest available ZCA Bootstrap Template
https://www.jrcdesigns.co.uk/
Have finally found a template that I will find easier to change colours to the ones I want and like the look of aswell.
I am wanting to move the tagline from the centre of the header, please can someone show me where and how, have read through the thread but cant see the info anywhere.
Thank you
Re: ZCA Bootstrap Template
There's a couple of ways. The design makes it difficult as it has a div surrounding a div for one line of text. To add to that, the stylesheet info that controls this is embedded in the file versus existing in a stylesheet. Finally, it is hard-coded as !important. That makes it more difficult.
Without having to change a template file, you can add a stylesheet_zcustom.css to your includes/templates/bootstrap/css/ folder with the following entry:
Code:
#tagline {text-align:left !important;}
We use this stylesheet as a way to keep track of changes made over time. Easy to find and generally loads last. The !important in this case is due to the fact !important was already used to set up the centering.
Re: ZCA Bootstrap Template
Thank you dbltoe that did the trick :)
Re: ZCA Bootstrap Template
V1.5.7
PHP Version: 7.3.21
Server Apache
latest available ZCA Bootstrap Template
Square payments
https://www.jrcdesigns.co.uk/
I have spent all day trying to figure this out and cant so am hoping someone can help please.
There is a grey bar near t he top centre of the page which has home on it and when you go to another page it adds that on so say contact us.
Is there a way of removing this at all?
Thank you
