[Skip to main content](#vessel-content)

#   altering CSS for different style

##

- **[HansP](/forum/user/34339-hansp "View HansP's Profile")**
- [![HansP's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34339-hansp "View HansP's Profile") Topic Author
- [ Offline](/forum/user/34339-hansp)

Less More

- Posts: 2
- Thank you received: 0
-
-

12 years 3 weeks ago -  12 years 3 weeks ago [\#173732](#173732) by [HansP](/forum/user/34339-hansp "View HansP's Profile")  *[altering CSS for different style](/forum/26-product-category-display/871982-altering-css-for-different-style#173732 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3 -- Error-message(debug-mod must be tuned on) -- : no error  Is there any easy way to see the product info as following  now it is just like this  picture small thumbs price description  I want to do something as following  picture | price thumbs | Description  I have limited knowledge of CSS and have no clue where to start.  i was happy i could change the Price text , remove each after it and alter some of the DIV settings allready :)  Thanks !")* was created by *[HansP](/forum/user/34339-hansp "View HansP's Profile")*

-- HikaShop version -- : 2.3.2
-- Joomla version -- : 3.3
-- Error-message(debug-mod must be tuned on) -- : no error

Is there any easy way to see the product info as following

now it is just like this

picture
small thumbs
price
description

I want to do something as following

picture &#124; price
thumbs &#124; Description

I have limited knowledge of CSS and have no clue where to start.

i was happy i could change the Price text , remove each after it and alter some of the DIV settings allready ![:)](/media/kunena/emoticons/8.png ":)")

Thanks !

Last edit: 12 years 3 weeks ago by [HansP](/forum/user/34339-hansp "View HansP's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE5ODItYWx0ZXJpbmctY3NzLWZvci1kaWZmZXJlbnQtc3R5bGU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")**
- [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")
- [ Offline](/forum/user/6861-mohamed-thelji)

Less More

- Posts: 12953
- Thank you received: 1778
-
-
-

12 years 3 weeks ago [\#173746](#173746) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")  Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[altering CSS for different style](/forum/26-product-category-display/871982-altering-css-for-different-style#173746 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3 -- Error-message(debug-mod must be tuned on) -- : no error  Is there any easy way to see the product info as following  now it is just like this  picture small thumbs price description  I want to do something as following  picture | price thumbs | Description  I have limited knowledge of CSS and have no clue where to start.  i was happy i could change the Price text , remove each after it and alter some of the DIV settings allready :)  Thanks !")*

Hello,

> now it is just like this
>
> picture
> small thumbs
> price
> description
>
> I want to do something as following
>
> picture \| price
> thumbs \| Description

To do that the best solution will be to directly edit the "show_default" file of the "product" view of your front-end template via "Hikashop-&gt;Display-&gt;Views".
Also, checking that documentation will probably help you : [ www.hikashop.com/support/documentation/1...-display.html#layout](http://www.hikashop.com/support/documentation/153-customize-the-display.html#layout)

> i was happy i could change the Price text , remove each after it and alter some of the DIV settings allready ![:)](/media/kunena/emoticons/8.png ":)")

You can check that documentation : [ www.hikashop.com/download/languages.html#translate](http://www.hikashop.com/download/languages.html#translate)
You'll have to edit the "PER_UNIT" translation key word.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE5ODItYWx0ZXJpbmctY3NzLWZvci1kaWZmZXJlbnQtc3R5bGU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[HansP](/forum/user/34339-hansp "View HansP's Profile")**
- [![HansP's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34339-hansp "View HansP's Profile") Topic Author
- [ Offline](/forum/user/34339-hansp)

Less More

- Posts: 2
- Thank you received: 0
-
-

12 years 3 weeks ago -  12 years 3 weeks ago [\#173826](#173826) by [HansP](/forum/user/34339-hansp "View HansP's Profile")  Replied by *[HansP](/forum/user/34339-hansp "View HansP's Profile")* on topic *[altering CSS for different style](/forum/26-product-category-display/871982-altering-css-for-different-style#173826 "-- HikaShop version -- : 2.3.2 -- Joomla version -- : 3.3 -- Error-message(debug-mod must be tuned on) -- : no error  Is there any easy way to see the product info as following  now it is just like this  picture small thumbs price description  I want to do something as following  picture | price thumbs | Description  I have limited knowledge of CSS and have no clue where to start.  i was happy i could change the Price text , remove each after it and alter some of the DIV settings allready :)  Thanks !")*

Hey thanks !!
after allmost an hour due to my limited knowledge i did it ![:)](/media/kunena/emoticons/8.png ":)")

it still strange that if i change the Span of the left part ( image ) to 3 instead of 6 it works fine but if i change it from 6 to 2 or just span&gt; it scrambles the text

this is how it is now Code:

&lt;div id="hikashop_product_left_part" class="hikashop_product_left_part span3"&gt; &lt;?php if(!empty($this-&gt;element-&gt;extraData-&gt;leftBegin)) { echo implode("\r\n",$this-&gt;element-&gt;extraData-&gt;leftBegin); } $this-&gt;row = &amp; $this-&gt;element; $this-&gt;setLayout('show_block_img'); echo $this-&gt;loadTemplate(); if(!empty($this-&gt;element-&gt;extraData-&gt;leftEnd)) { echo implode("\r\n",$this-&gt;element-&gt;extraData-&gt;leftEnd); } ?&gt; &lt;/div&gt; &lt;div&gt; &lt;div id="hikashop_product_description_main" class="hikashop_product_description_main"&gt; &lt;?php echo JHTML::_('content.prepare',preg_replace('#&lt;hr *id="system-readmore" */&gt;#i','',$this-&gt;element-&gt;product_description)); ?&gt; &lt;span id="hikashop_product_price_main" class="hikashop_product_price_main"&gt; &lt;?php if ($this-&gt;params-&gt;get('show_price')) { $this-&gt;row = &amp; $this-&gt;element; $this-&gt;setLayout('listing_price'); echo $this-&gt;loadTemplate(); } ?&gt; &lt;/span&gt; &lt;/div&gt;

Last edit: 12 years 3 weeks ago by [Jerome](/forum/user/80-jerome "View Jerome's Profile"). Reason: [code] is nice !!

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzE5ODItYWx0ZXJpbmctY3NzLWZvci1kaWZmZXJlbnQtc3R5bGU/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.225 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
