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]
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;">
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?
(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...
This should get you started on template overrides.
http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system (http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system)
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
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]
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.
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]
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;
}
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]
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.
Forgot the image :-[
[attachment cleanup by admin]
Hello,
Try to clean the cache of your browser and reload the page.
I cleared the cash of firefox and IE
still no results
ok, i thing you made something wrong by apply the css properties.
you should apply the extra line between { } ...
.
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 ...
}
you forget may be as i told before any "{" or "}" or ";" ...
Please examine your file better.
As i see is a custom template also and don't know how is been designed.
Sorry i do my best to follow your advise but i realy dont know wat to do
i don't understand.
This is how the code in my virtuemart.css is
.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;
}
[code]
[attachment cleanup by admin]
now the site showing something but not everything ::)
realy weird
[attachment cleanup by admin]
Hello,
I take a look on you css file and i see that some ';' is missing to other areas too, so may be you have cross platform issues (depends on how a browser reads the css files and where stops reading while found an error).
You should ask your template vendor to help you with that issues, especially if is a commercial product. If you test with vm default theme you will see that all css generated successfully.
Regards.
Okee ThanK U bytelord for everything.
that is the Fisrt thing that i will do.