Skip to main content

Customize the product page / Front-end CSS File

More
13 years 2 weeks ago #123916 by mindstorm
-- 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.

More
13 years 2 weeks ago #123948 by Xavier
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.

More
13 years 2 weeks ago - 13 years 1 week ago #124002 by mindstorm
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: 13 years 1 week ago by Jerome.

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

More
13 years 2 weeks ago #124059 by Xavier
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:
Code:
.hikashop_product_right_part{ width: 48%;}

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

More
13 years 1 week ago #124910 by mindstorm
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.

More
13 years 1 week ago #124913 by mindstorm
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.

More
13 years 1 week ago #124914 by mindstorm
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.

More
13 years 1 week ago #124916 by mindstorm
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.

More
13 years 1 week ago #124982 by Jerome
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.

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

More
13 years 1 week ago #125075 by mindstorm
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.

More
13 years 6 days ago #125152 by Xavier
Hi,

Thanks to change your css property in the frontend css file by:
Code:
.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.212 seconds
Powered by Kunena Forum