Customize the product page / Front-end CSS File
13 years 2 weeks ago #123916
by mindstorm
Customize the product page / Front-end CSS File was created 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?
-- 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.
13 years 2 weeks ago #123948
by Xavier
Replied by Xavier on topic Customize the product page / Front-end CSS File
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
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.
13 years 2 weeks ago - 13 years 1 week ago #124002
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
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);
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.
13 years 2 weeks ago #124059
by Xavier
Replied by Xavier on topic Customize the product page / Front-end CSS File
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:
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.
13 years 1 week ago #124910
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
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?
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.
13 years 1 week ago #124913
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
GOT IT:
modified this in the price_listing:
<span class="hikashop_product_price_full<?php echo $class; ?>" style="text-align:left">
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.
13 years 1 week ago #124914
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
took it a little further:
<span class="hikashop_product_price_full<?php echo $class; ?>" style="color: white; font-size: 16pt; text-align:left">
<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.
13 years 1 week ago #124916
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
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?
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.
13 years 1 week ago #124982
by Jerome
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
Replied by Jerome on topic Customize the product page / Front-end CSS File
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,
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.
13 years 1 week ago #125075
by mindstorm
Replied by mindstorm on topic Customize the product page / Front-end CSS File
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
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.
13 years 6 days ago #125152
by Xavier
Replied by Xavier on topic Customize the product page / Front-end CSS File
Hi,
Thanks to change your css property in the frontend css file by:
By this way, the modification will only be applied on the product page.
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;}
Please Log in or Create an account to join the conversation.
Time to create page: 0.212 seconds