Change background colour of product descirption

-- url of the page with the problem -- : khatalapetlodge.com.au
-- HikaShop version -- : 2.2.3
-- Joomla version -- : 3.2
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : XXXXX x.x.x
-- Error-message(debug-mod must be tuned on) -- : Error_message

Hi, I want to create a box format around my product description, but cannot find a solution to my problem. There should either be aan outline surrounding my text, or the background should be white, whichever is possible!I have attached a photo of the current look.

Hi,

Your website is in maintenance so I cannot look at that product page.
Could you provide an access to that page so that we can see the CSS on the page in order to tell you what to do ?

Hi, I have changed the settings! you may now look at website, it is online! Thank you

Hi,
Using that CSS code will probably do the job :

Hi, just another quick question! I changed the colour of the 'add to cart' button, but now I want to change the colour of the ' Choose Options' button. I couldnt find the correct code for the 'Choose Options button'. The code I used for the 'Add to Cart' button was

.hikashop_product_stock .hikashop_cart_input_button{
background: #B51C05 !important;
}

Using that CSS code will do the job :

Hi!
I write here to avoid opening a new topic!

I'd like to add a Background image instead of an hex. color in the Category page that shows the products thumbnails
(this is the page on the site www.aswebgraph.com/vet/index.php/shop )
Does the same css work?

Hi,

You can use such CSS:
#hikashop_category_information_module_107 div.hikashop_subcontainer {
background-image: url(" mywebsite.com/myimage.png ");
}

oooh that's one great new!
It should be put inside the main css file of my template?

Hi,

Yes, or in the hikashop frontend css file which can be found through the menu Configuration > Display > CSS.

Tnx Xavier,
I tried to add it via frontend, but it didn't work.

I went to the Configuration, then "Display", then "CSS" and selected the "pencil" near the "Site CSS" (not sure about the translation, I read it in Italian, and opened the "frontend_custom.css"
This is the code i Added

#hikashop_category_information_module_107 div.hikashop_subcontainer {
background-image: url(" www.aswebgraph.com/vet/sfondo50.png ");
}

Here is the page showing the category
www.aswebgraph.com/vet/index.php/shop

Hi,

Please try to apply the property on:

Sorry for jumping in, but there seem to be some misunderstandings here... unless I'm completely wrong.

1. The URL in the "background" should be a proper relative or absolute one, meaning for the latter case it should include the "http://". So, the line should be
2. stefanobellu wrote:

I'd like to add a Background image instead of an hex. color in the Category page that shows the products thumbnails

Tells me, the image should not only sit behind the sub-containers (or thumbnails), which have a white background, preventing from the image being visible anyway, but as background of the entire page or at least the listing.
So, probably at least the div with ID "hikashop_category_information_menu_121" wants to be targeted instead, and the complete CSS would then need to be
@stefanobellu:
If you wanted a larger area to be covered by the background image, you should describe which one exactly, best by a screenshot including a frame drawn around the area, so we can get you the right CSS.

Ok, but before we go on:

THANKS

this is not what I usually see when I browse a forum looking for a non-standard solution, you are doing really a good Job..
That makes me want to switch to Hikashop for all my ecommerce websites, as soon as possible!

Back to the topic
www.dropbox.com/sh/kwlr1uzwf12eerd/AACnp...UOHA3W8B4MExjua?dl=0

Here's the screen you requested

@stefanobellu:
A whole lot could be said about your background image, but let me try to make it short. You may then use some of it, as well as try to use other sources for gaining more knowledge of CSS (e.g. the documentation here and elsewhere on the web) and using Firebug or another browser console, so you're able to solve this and other display mysteries yourself.

Please note that all CSS here will be limited to this exact product listing only!
To be safe the code works, you should add it at the very end of your HikaShop frontend_custom.css file.

1. Transparency of product thumbnails:
I don't think you want this (as the display would become "overloaded" with imagery, and the product titles very hard to read), but If you want the background image to "shine through" the thumbnails, too, you should try out such CSS:
2. Height of product thumbnails:
Maybe you did so on purpose, but with 300px the height seems quite huge, leaving a lot of white space in between product image and price/title. At least when making the background transparent, you may want to consider reducing it, and you could do so by changing or deleting the "Pane height" value in the settings for the listing (via HikaShop backend), or by applying such CSS: Eventually replace "auto" with a value in pixels.

3. Background image:
Yours is a single large file (almost 2MB !!!), unnecessarily slowing down your pageload. Since it's repetitive content, you should use a smaller file and repeat it with CSS. I'm attaching here a much smaller file which you should use, and I'll make the CSS code accordingly, assuming it'll be in the same location on the server as the one you're using now.

a) The following code will put the image repeatedly under the area marked in your screenshot - as far as I could see there. Note it does cover the pagination, but it won't cover the HikaShop footer and below.
b) By using the following instead, the pagination will be left out and probably remain better readable:
c) If you wanted to have the background of the entire page covered instead, it'll take some extra "tricks", which would lead too far here...

FYI, I used Firebug to analyse your website and simulate it right there. Again, I recommend you getting your head around this, too.

Thanks a lot "Lousyfool"

I'm just starting to get some grasp of CSS, but those works couldn't wait for my stubborn head to be ready!

I just revised something, and it already looks better (the panel height was unbearable, now it's much better).

For sure that BG wouldn't be the choosen one, I needed to find a solution as quick as possible so just didn't care about making the ultimate BG, just grabbed what I had and put it all together..

I'll make the right one right away so you can see the results of your precious help!

Thanks for helping everybody!