Customize the product page / Front-end CSS File

  • Posts: 69
  • Thank you received: 5
11 years 10 months ago #123916

-- url of the page with the problem -- : croftgateusa.com/component/hikashop/product/8-multi-clean
-- HikaShop version -- : HikaShop Business: 2.2.1
-- Joomla version -- : 2.5.14
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : Any browser
-- Error-message(debug-mod must be tuned on) -- : Error_message

hello! I have used your forum and found ways to modify the front line products page for my site however I want to move things around:

on my product pages i want the descriptions to the right of the photo then the price and add to cart below the description.

How do I move the descriptions up?
Does you front end 'HikaShop Styles' do this? I didn't see any template examples that did this?

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

  • Posts: 13201
  • Thank you received: 2322
11 years 10 months ago #123948

Hi,

For that you will have to edit the view "product / show_default" and move the description part of that view from the hikashop_bottom to hikashop_right part.

Here is some documentation about layout customisation:
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 69
  • Thank you received: 5
11 years 10 months ago #124002

Thanks for the quick reply... I read your link prior to submitted this question in the forum. I'm sure I'm missing something simple...

When I moved the description up to the 'right' side it pushes everything down below the photo:
croftgateusa.com/productsnew/product/22-micro-fiber-towels

is my photo too big?

here is the 'show_default'... I highlighted what I moved up :

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">
<span id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</span>

<?php
if(!empty($this->element->extraData->rightBegin))
echo implode("\r\n",$this->element->extraData->rightBegin);

Last edit: 11 years 9 months ago by Jerome.

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

  • Posts: 13201
  • Thank you received: 2322
11 years 9 months ago #124059

Hi,

Thanks to use the [ code] ... [ /code] tags (without space) when you post some code.
What you need is just a css property on the class "hikashop_product_right_part" to set a width, for example:

.hikashop_product_right_part{ width: 48%;}

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

  • Posts: 69
  • Thank you received: 5
11 years 9 months ago #124910

thanks that fixed it... now I can't seem to align the price??

It seems to be center on the page?
croftgateusa.com/productlist/product/10-...ess-car-wash-and-wax

How can I get this left align?

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

  • Posts: 69
  • Thank you received: 5
11 years 9 months ago #124913

GOT IT:

modified this in the price_listing:

<span class="hikashop_product_price_full<?php echo $class; ?>" style="text-align:left">

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

  • Posts: 69
  • Thank you received: 5
11 years 9 months ago #124914

took it a little further:
<span class="hikashop_product_price_full<?php echo $class; ?>" style="color: white; font-size: 16pt; text-align:left">

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

  • Posts: 69
  • Thank you received: 5
11 years 9 months ago #124916

oh snap... now the left align has changed my 'category listings'...

croftgateusa.com/productlist

I want the price text-align=left on the product pages however I want it text-align=center on the category pages?

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

  • Posts: 26256
  • Thank you received: 4041
  • MODERATOR
11 years 9 months ago #124982

Hi,

Your link is broken.
But after that, you have to know that we are developers, not designers.

Please read these documentation pages about styling :
www.hikashop.com/support/2013-08-08-00-1.../84-css-styling.html
www.hikashop.com/support/documentation/1...ize-the-display.html

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 69
  • Thank you received: 5
11 years 9 months ago #125075

I reviewed the links that you sent and tried to add a 'text-align=center" to the price however It's not fixing it.

I want the price on the product pages to be left align - which is working:
croftgateusa.com/component/hikashop/product/8-multi-clean

however now the modules the price is left and I need it centered:
towards the bottom of the page: croftgateusa.com

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

  • Posts: 13201
  • Thank you received: 2322
11 years 9 months ago #125152

Hi,

Thanks to change your css property in the frontend css file by:

.hikashop_product_right_part .hikashop_product_price_full{ text-align:left !important;}
By this way, the modification will only be applied on the product page.

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

Time to create page: 0.092 seconds
Powered by Kunena Forum