Add css to images in horizontal carousel

  • Posts: 53
  • Thank you received: 2
12 years 2 months ago #63882

I would like to add css classes to the horizontal slider. I can not find the <img for the horizontal slider to make a change to the code. The only thing I can find is some php in the horizontal slider_horizontal.php that seems to be where the <img is generated but I am not sure.

<?php } ?><?php
            echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->product_name), '' , '' , $width, $height);
            $main_thumb_x = $this->image->main_thumbnail_x;
            $main_thumb_y = $this->image->main_thumbnail_y;
            $horizontal = '0';
            $vertical = -'10';
            $this->classbadge->placeBadges($this->image, $this->row->badges, $vertical, $horizontal);
            $this->image->main_thumbnail_x = $main_thumb_x;
            $this->image->main_thumbnail_y = $main_thumb_y;
          if($this->params->get('link_to_product_page',1)){ ?>
            </a>
          <?php } ?>

Is there where I would input a css class? if so--how? If not, where is this image code being generated?

Here is my code:
<div id="hikashop_module_100" class="hikashop_module ">
<div id="hikashop_category_information_module_100" class="hikashop_category_information hikashop_products_listing_main">
			<div class="hikashop_products_listing">
		  <div class="hikashop_products">
  <div id="hikashop_main_slider_hikashop_category_information_module_100" class="hikashop_subcontainer " style="padding-bottom:0px; padding-top:0px; margin: auto; overflow:hidden; position:relative; width:940px;"><ul id="hikashop_only_products_hikashop_category_information_module_100" style="margin-top: 0px; padding-left: 0px; list-style: none; width: 2820px; margin-left: -940px; "><li style="float:left;width:940px; "><ul style="padding-left:0px;"><li style="margin: 10px; width:215px;float:left; list-style:none; text-align:center"><!-- PRODUCT IMG -->
<div style="height:116px;text-align:center;clear:both;" class="hikashop_product_image">
  <div style="position:relative;text-align:center;clear:both;width:215px;margin: auto;" class="hikashop_product_image_subdiv">
      <a href="/~shaggych/index.php/component/hikashop/product/98-margarita?Itemid=0" title="Margarita">
  <img src="/~shaggych/media/com_hikashop/upload/thumbnail_116x215/margarita.jpg" alt="margarita">    </a>
    </div>
</div>

The <img src="/~shaggych/media/com_hikashop/upload/thumbnail_116x215/margarita.jpg" alt="margarita"> is what I am trying to edit and add a class or two or three too.

Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 82818
  • Thank you received: 13364
  • MODERATOR
12 years 2 months ago #64011

You don't need to add any CSS class to it to add CSS styling on it.

You can directly do like that:

.hikashop_product_image_subdiv img{
//my css
}

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 2
12 years 2 months ago #64015

Got it. Ok, here's the last thing. I am trying to make my site responsive and I need to add a class to the image so that it can have a max-width percentage. Or perhaps I need to add this to both the container and the images. Please advise how to add this.

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 2
12 years 2 months ago #64018

So I have this:

.hikashop_subcontainer {
max-width:99%;
}

which makes the container responsive, but the images:

.hikashop_product_image_subdiv img

are not responding to the max-width I set in that class.

Please Log in or Create an account to join the conversation.

  • Posts: 82818
  • Thank you received: 13364
  • MODERATOR
12 years 2 months ago #64180

Yes. You should add it for the image too:
.hikashop_product_image_subdiv img{
max-width:99%;
}

Please Log in or Create an account to join the conversation.

Time to create page: 0.065 seconds
Powered by Kunena Forum