Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead.
Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead.
To start, create a class named "image1" specifically for the first <li></li> within your <ul></ul> featuring thumbnails. Set the width of both "col-sm-4" and "col-sm-8" divs to 50% for product images and product name/description respectively. Eliminate the float: left property from .thumbnails .image-additional in the stylesheet.css file and introduce a margin of 80%. Afterwards, establish a new class:
.thumbnails .image1 {
width:70%;
float:left;
}
To view the products in the catalog, follow these steps:
Navigate to catalog/view/theme/default/template/product/product.tpl
Find line No 24 and replace it with the following code snippet:
<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<?php if ($thumb) { ?>
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title;" /></a></li>
<?php } ?>
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
Replace lines 25 to 35 with this updated code:
<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<div class="row">
<div class="col-lg-9">
<?php if ($thumb) { ?>
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" id="zoom_01" data-zoom-image="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
</div>
<div class="col-lg-3">
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
</div>
</div>
Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...
.main_banner { background-image: url("../images/main_banner.png"); width: 100%; height: auto; } <!DOCTYPE html> <html> <heading> <title> ********** </title> <link rel="sty ...
When using ActionScript to dynamically create a tab, I noticed that the style is applied to the skins but not to the text of the newly created tab until I click on another tab and then go back to it. ActionScript private function clickAddTabHandler(event ...
I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...
I need help adjusting the positioning of the elements in this HTML code. How can I move the span element with the image to the right of the div tag? Here is the code snippet: <div style='width:600px;padding-top: 2px;padding-bottom: 1px'& ...
Can you help me with this issue I'm having with my website design? In Google Chrome, Opera, and Safari, everything looks great. But in Firefox and the latest version of IE, it's a different story. Here is the HTML code: <div id="navbar"> ...
In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...
After purchasing a RE/MAX franchise, I now need to make edits to the official logo found on remax.com using Adobe Photoshop. However, I have encountered a problem when trying to edit their logo in Photoshop. When I open their PNG logo, the layer appears d ...
My website is time-sensitive and I need it to prioritize displaying the page before loading any custom fonts. Essentially, I want the page to show up initially as if the fonts are not loaded. This way, the custom fonts (if already cached by the browser) w ...
I have successfully floated an image to the left of text with the following CSS. How can I achieve a similar effect with an image to the right of text on the same page? Do I need to use a clearfix between the left and right images? Thank you! .innercont ...
I'm working on implementing Conditional Tags to toggle a CSS class on or off based on the current displayed page. However, I'm running into an issue where the code isn't executing properly. There might be a syntax or logic error causing the ...
Struggling to accurately explain the process, so feel free to check out this helpful fiddle. In my form, there are several text input fields and a single submit button. The submit button becomes enabled once any of the form fields have been altered. If a ...
I am working on a layout design and my goal is to have the left sidebar, right sidebar, and header remain fixed in place. Here is the CSS code I am using : #container { padding-left: 200px; /* Left Sidebar fullwidth */ padding-ri ...
I'm currently working on a website and have noticed that the fonts appear larger on Mac's Safari compared to other browsers. We are using the 'Open Sans' font from Google Fonts for our website. For example, here is a CSS snippet for ti ...
Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...
Does max-width set to auto have the same result as setting max-width to 100% If not, what is the distinction between them? ...
Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...
I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...
My <div> contains multiple <img> elements, each wrapped in its own inner <div>. Despite setting the outer div's height to auto, it fails to adjust dynamically based on the content. To display the inner divs inline, I've applied ...
When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue ...