News:

Looking for documentation? Take a look on our wiki

Main Menu

How to add a border arround the products

Started by aanuarr, September 18, 2012, 14:36:38 PM

Previous topic - Next topic

aanuarr

Hello,

Can anyone help me on how to add a border around the products in the product list. Or something to separate them from each other by a line or a border.
I made an example with Photoshop (borderproductsollution.jpeg) so that you can see what i mean.
How can it be done with css and does anyone know witch file I have to edit.

Thank you
Jaouad

[attachment cleanup by admin]

stuart.prevos

you can make a HTML override of the file /views/category/tmpl/default.php

around line 221
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
you could put in something like
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>" style="border-color:##E9E8E8; border:1px solid;">


aanuarr

Quote from: stuart.prevos on September 18, 2012, 15:38:15 PM
you can make a HTML override of the file /views/category/tmpl/default.php

around line 221
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
you could put in something like
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>" style="border-color:##E9E8E8; border:1px solid;">

Thank u so much for your reply.

I replaced the code but it didn't work .
A the moment I'm using a custom template ( iceTheme thestore4) is that maybe why the code not working?

aanuarr

(Update)
I have  installed a demo shop online with the default template and  the code works perfectly
The problem is the template that I have installed and I don't know how to get the borders on it...

ivus


bytelord

Hello,

You could use just firebug to examine your files and use some css to apply the style without edit the php files. You could find more information using firebug here: http://forum.virtuemart.net/index.php?topic=102850.0
Examine your files and make necessary changes, if you have difficulties please post back with a live url to examine it. Btw, it will be good to learn some css styling will help to make and other changes.

Regards
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

aanuarr

#6
hello,

Thanks for the reply guys
I had the firebug already installed and tried it out but didn't succeed.
I didn't know what file I had to get
In the firebug1.jpeg is the blue part exactly what I have to edit but I have no idea

It says Reset.css but I don't know where to set the border settings.


My site live url :  http://htelecom.nl/index.php/en/dvd-branders/sata

[attachment cleanup by admin]

bytelord

#7
Hello,

your css file is virtuemart.css, around line 1729 add the following code, e.g.:

border-style:solid;
border-width:1px;

but you should place and some margin also to leave space between products. So you could add also

margin:10px;

or,

margin-left:10px;


So, three small lines inside your css. These lines should be place inside the property

.category-view .row .category .spacer, .featured-view .spacer, .latest-view .spacer, .topten-view .spacer, .related-products-view .spacer, .browse-view .row .product .spacer, .manufacturer-view-default .row .manufacturer .spacer {

..here is your extra css code ...

}

The virtuemart.css is simple located under your_joomla_folder/templates/it_thestore4/css

Next time take a closer look :)

some css reference: http://www.w3schools.com/css/css_border.asp

Hope helps you out.

Regards.
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

ivus

OK here a quick and dirty tutorial on FireBug... the rest you can find on google or youtube in your own time.

step 1 - open your website
step 2 - find the area you want to inspect (SONY SATA) picture, then right click, select "Inspect Element with Firebug"
step 3 - in the left panel of the inspector (HTML TAB) hover your mouse pointer over each element and notice the actual website will highlight the region accordingly. Stop when you have found your region. See attached image 1.
step 4 - click on the region in the left panel of the inspector, and take note of the classes/styles (in this case "product floatleft width33 vertical-separator"). You should notice that each time you click on a region in the left panel, the styles in the right panel updates... contextually.
step 5 - find the style in the left hand panel (in your case .width33) and hover above it and right click, select "New Property..." see attached image 2
step 6 - type "border", press "tab key", type "1px solid #f0f", press "enter key"
step 7 - see the changes that have dynamically been applied without having to open your code page..... WOW!!! see attached image 3
step 8 - once you are happy that that is the style... you can now see the EXACT location and line of your style. see attached image 4

Firebug is amazing once you learn how to use it. I suggest you read up on it.

[attachment cleanup by admin]

aanuarr

#9
Thanks guys

You have helped me with a big problem I appreciate all the help.

I will look at the firebug addon and will take your advice seriously.
Next for me now is to learn  CSS.


There only  another problem and that is the image of my stocks is gone. After. It is  no longer visible.  :-[??

This is how the code looks like now:

.category-view .row .category .spacer,.featured-view .spacer,.latest-view .spacer,.topten-view .spacer,.related-products-view .spacer,.browse-view .row .product .spacer,.manufacturer-view-default .row .manufacturer .spacer {
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
border-width:1px;
margin-left:10px;
text-align:center;
}

bytelord

hello,

just test it and works fine. Please take a look may be you forget any ";" at the end of the property or any "}" ... examine your changes

take a look on the shot

[attachment cleanup by admin]
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

aanuarr

Thank u for testing

The images seems to be back again when I restore the original virtuemart.css file.
But when I modify it again and replaced it, it disappears again.
Also on the other computer i cant see the images. Is it maybe somthing else the the css file.
Like u sad I will look at the files if something is missing.

aanuarr

Forgot the image :-[

[attachment cleanup by admin]

bytelord

Hello,

Try to clean the cache of your browser and reload the page.
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

aanuarr

I cleared the cash of firefox and IE
still no results