CSS Customization

Hello,

Can you please help me to change two problems I am having when trying to customize the look of the shopping cart?

1) I would like to have the text wrap around the picture and be directly underneath the add to cart button. (see picture) Is this possible and if so, how do I do this?



2) I would like to know how I can edit the text of the category listing.



3) How can I modify the look of this shopping cart module. For exmple if I want to add extra text underneath 'your shopping cart' or place the total in the same line as the title.




Thank you so much for yor help

1. You can't do that in CSS. You need to edit the file show of the view product via the menu Display->Views. There, you need to move the description area from the bottom area:
<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>
to the right area, after :
<span id="hikashop_product_id_main" class="hikashop_product_id_main">
<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
</span>

2.The test there, is the name of your categories. You can change your categories name if you want to change the text. If you want to style the text, you can use the CSS class name hikashop_category_name.
You can edit the CSS of HikaShop via the interface in the tab Display of the configuration.

3. The "Your shopping cart" text is the name of your hikashop cart module. That is displayed by your template when displaying the content of the module because you activated the "show module title" option of the module via the joomla module manager. So HikaShop does not have control on that title.
What you can do though is to change your CSS to have both on the same line. That should be possible but the CSS to do that will depend on your template CSS so I can't give you more information without seeing the page.
You can also change the text of the module content as all the text in HikaShop can be overriden using the interface in the config under the tab languages.

Hello Nicolas,

Thank you for the rapid response.

I am having trouble implementing the advice.

1) I have found the file to edit -- Display->Views->product_show. I found where it says:
<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>

and I replaced all of that with:

<span id="hikashop_product_id_main" class="hikashop_product_id_main">
<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
</span>

but when I do that the description doesn't show up anywhere on the front end. I removed the customization and now the text shows up again below the images.
What am I missing? Sorry I have no php knowledge.

2)I open the frontend css file to customize but I can not find a class 'hikashop_category_name' Do you mean I have to create it?
When I open firebug I can see that the class already exists but I can't find where it is to edit it.

1. Please read again my message.Nowhere did I wrote that you should replace something. I told you to MOVE the description AFTER the other piece of code.

2. Yes, you have to create it.Just add a new class:
.hikashop_category_name{
//your CSS
}

Hello Nicolas,

Thank you for the rapid response.

I am having trouble implementing the advice.

1) I have found the file to edit -- Display->Views->product_show. I found where it says:
<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>

and I replaced all of that with:

<span id="hikashop_product_id_main" class="hikashop_product_id_main">
<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
</span>

but when I do that the description doesn't show up anywhere on the front end. I removed the customization and now the text shows up again below the images.
What am I missing? Sorry I have no php knowledge.

2)I open the frontend css file to customize but I can not find a class 'hikashop_category_name' Do you mean I have to create it?
When I open firebug I can see that the class already exists but I can't find where it is to edit it.



3) If you have time and or inclination -- here is the link to the page dni-tango.com/us/store/virtual-store-test/
I was able to edit the language file.

Thank you for your help it is greatly appreciated.

Sorry about the double post. Not quite sure what happened there.

I have gone back and read your instruction and moved the first bit of code directly below the second bit of code but it has just moved the add to cart button and variant dropdown list underneath the images.

3. You can add the CSS:

#maintop h3 {float:left;}
.hikashop_cart_module{
margin: 0px 0px 5px 0px;
height: 25px;
line-height: 25px;
text-align: left;
font-weight: bold;
font-size: 125%;
color: #646464;}

That's because you need to add some CSS to fix the width of the right part because the description make it too big and it goes below the image:
.hikashop_product_description_main{
display: block;
width: 400px;
}

I have placed this --


#maintop h3 {float:left;}
.hikashop_cart_module{
margin: 0px 0px 5px 0px;
height: 25px;
line-height: 25px;
text-align: left;
font-weight: bold;
font-size: 125%;
color: #646464;}


in my general.css file for my template without effect. Should it go somewhere else? Apologies for my incompetence. Once again thank you as this help is truly appreciated.

I have placed this:

.hikashop_product_description_main{
display: block;
width: 400px;
}

in my custom frontend css file.

I don't see the CSS in your template's CSS files... Please make sure that you removed your template's css cache.

Okay. It has worked!
But now the two texts are 'touching' How can I make the total float all the way to the right or at least have some padding between it and the title?

The description has also moved! Hooray!
But it doesn't look so good.
Is it posible to move: the add to cart button the variant drop down menu and the price below the pictures?
Do I do this by again just changing the order of the php code?

If you want to add padding, you should add padding...like that:
.hikashop_cart_module{ padding-left: 10px}

You can indeed move the other parts of the right area in the left area by moving their code in the show file of the view product, like you did for the description.

I have tried everything I can think of but I cannot get the description text to float to the right side of the images. I have no reordered the hikashop_product_left_part divs below the hikashop_product_bottom_part divs in the product show view.

Also the css:
hikashop_product_description_main{
display: block;
width: 400px;
}

which you posted earlier is also in effect.


Here is the link to the page I am working on:
dni-tango.com/us/store/online-store/prod.../category_pathway-13



Thanks for your help.

We already provided a lot of help regarding your customization. It's just about moving the different blocks of code in the view. We can't provide a full customization of the view via the forum support. If you want that, please use our contact us form to get a quote and we will do it for you.