Add background to product details and somewhere else.

[vasington]

Hi All,

I have got really hard problem, which I can't solve.

On pages www.obchod-kingfisher.cz I would like to change background e.g. on the first page below Nové zboží(New products if you use google translator to English) in three pictures, which are there. If I look at in Opera browser I can see, that this field is called <div class="latest-view"> and this I would love to make everywhere, which is similar to this. Such as Nejprodávanější zboží(Bestsellers), which is below this and also Kategorie(Category).

I would like to also change the same background in details of the product, here I can see <div class="productdetails-view">. It's when you click on the name of the product. You can see prices and something else, but on the green(transparent) background and I would love to make something looks like a border which would be white. So it will be something like rectangle with white color inside.

Please help me somebody.
I would be really grateful for any help!

Thanks, I am running Joomla 2.5.6 and VM 2.0.8e
Vasek

[langtu1412]

Hi there,

What's the template which you are using?

You can go to css folder of that template. Open the personal.css file then search containarea, containarea2 and put the background setting into this.

[ivus]

Hi vasington,

langtu1412 is half correct.

Correct css file. Wrong class.

You know the two you want to change, to target those divs specifically.

Code Select Expand



div.latest-view {
   border:1px solid #f0f;
   background-color:#0f0;
}

div.productdetails-view {
   border:1px solid #ff0;
   background-color:#0ff;
}



I hope this helps. 

[langtu1412]

Ivus,

I'm using virtuemart 2.0.8e and I want to change the background of category list of VM Category module. I tried vmsite-lye.css file but don't see any config for that. Could you please help me?

Thank a lot.

[vasington]

Thanks for help. I am using VMblend-green. There is reset.css which I think is used there, so how can I change it step by step please?

I am really not good in css, I am starting with this and I can change what is type, but I don't know how to create new css style and make it functional on this.

Thanks

[vasington]

I have got there these files in css folder of my template: layout.css, vm-vmblend.css, reset.css, text.css, template.css, nav.css, ie.css, ie8.css, slideshow.css, typography.css, grid.css, ie6.css

Actually, I think, that it refers to reset.css, but if I open this file I can see only this:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

[vasington]

Hi vasington,

langtu1412 is half correct.

Correct css file. Wrong class.

You know the two you want to change, to target those divs specifically.

Code Select Expand



div.latest-view {
   border:1px solid #f0f;
   background-color:#0f0;
}

div.productdetails-view {
   border:1px solid #ff0;
   background-color:#0ff;
}



I hope this helps. 

I think i know what you mean, but I didn't find any of these two :-(.

So I think I will have to create it, but I don't know where and how and I also don't know what should I do to make it functional, this is my biggest problem :-(

[ivus]

@vasington,

Firstly you shouldn't touch the reset.css file. Reset will do exactly as the name suggests, "RESET" the styles so that they are the same across all browsers. It is meant to be used as the base style and then extended beyond that.

Also, this isn't a forum to learn how to use CSS, there are plenty of sites out there that can help you understand how to use CSS, you'll simply need to do a google search, but read further...



@langtu1412 & @vasington,

I wasn't suggesting you change an existing style. Obviously if the designers of the template you're using wanted the backgrounds to change, they would have defined a style already. What I was suggesting is that you create new styles that will do what you want.

To achieve this for both you guys, create a new style sheet file called "my-layout.css" and include it in your template's index.php file. Then you can define all the styles you want to change.



@vasington,

I'm using virtuemart 2.0.8e and I want to change the background of category list of VM Category module. I tried vmsite-lye.css file but don't see any config for that. Could you please help me?

CSS is pretty much universal. In your first post you knew the class names of the target div you wanted to change, use my suggestion to create your own.

.classname {
   etc:etc;
}
The FULLSTOP means you're trying to target a class element, so any element that has the class assigned to it will inherit the properties of that class.

#classid {
   etc:etc;
}
The HASH means you're trying to target an element's ID. You can only use ID once per element, so if you're planning on repeating elements assign a class to it.

div.classname,
div#classname
{
   etc:etc;
}
The ELEMENT prefix means you're specifically trying to target an element (in this case a DIV with the CLASS, as well as a DIV with the ID). You can target explicitly pretty much any html object.



To summarise, you don't need to "change" styles to achieve what you want. Most of the time, unless already predefined, you'll need to create your own.

CSS is by far the easiest thing to learn after HTML (I assume you already know that). Give it a go.

[vasington]

YOU ARE SUCH A BIG KING =)...This helps. I didn't know, that if I create newone, I must use div.productview...etc. I only wrote {
   etc:etc;
}

and that was the reason, now everything is great except of my blank page, which shows, when I confirm my order. But I will try to find solution.

Thanks one more time, please make this thread as solved.
Thx

[ivus]

Hi vasington.

Thanks one more time, please make this thread as solved.

Thank you. I'm glad you've got it working...

BTW you need to edit your original post and change the icon to SOLVED.

Cheers.