Product Highligt / border

Quote

Post by iangregson » Sun Jan 17, 2010 7:20 pm

Hi
Am using version 1.4 Want to change look of Latest Products etc
Need to change product Background, Border, highlight etc

Love Opencart, but just starting to find my way round it

Thanks
iangregson
Newbie
Posts
19
Joined
Sun Jan 17, 2010 4:50 pm
Top

Re: Product Highligt / border

Quote

Post by bebaspromo » Sun Jan 17, 2010 7:28 pm

try to play with :

.list td {
text-align: center;
vertical-align: top;
padding-bottom: 10px;
}

in your stylesheet.css :)
User avatar
bebaspromo
Active Member
Posts
186
Joined
Tue Dec 22, 2009 9:14 pm
Top

Re: Product Highligt / border

Quote

Post by iangregson » Sun Jan 17, 2010 7:32 pm

Will that change border / back ground in individual product listed ?
iangregson
Newbie
Posts
19
Joined
Sun Jan 17, 2010 4:50 pm
Top

Re: Product Highligt / border

Quote

Post by bebaspromo » Sun Jan 17, 2010 7:59 pm

iangregson wrote:Will that change border / back ground in individual product listed ?
Nop,
the example below :

Image

border :

Code: Select all

border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
to make/change default border to rounded border, put :

Code: Select all

-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px; 
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
background hover color:

Code: Select all

}
.list td:hover {
	background: #F0F3F4;
}
User avatar
bebaspromo
Active Member
Posts
186
Joined
Tue Dec 22, 2009 9:14 pm
Top

Re: Product Highligt / border

Quote

Post by iangregson » Sun Jan 17, 2010 8:22 pm

Great stuff, thanks for your help
iangregson
Newbie
Posts
19
Joined
Sun Jan 17, 2010 4:50 pm
Top

Re: Product Highligt / border

Quote

Post by bebaspromo » Sun Jan 17, 2010 8:24 pm

you're welcome ...
User avatar
bebaspromo
Active Member
Posts
186
Joined
Tue Dec 22, 2009 9:14 pm
Top

Re: Product Highligt / border

Quote

Post by NewMethod » Mon Jan 18, 2010 8:15 am

bebaspromo wrote:
iangregson wrote:Will that change border / back ground in individual product listed ?
Nop,
the example below :

Image

border :

Code: Select all

border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
to make/change default border to rounded border, put :

Code: Select all

-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px; 
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
background hover color:

Code: Select all

}
.list td:hover {
	background: #F0F3F4;
}
I like this... how compatible is it though.. don't think it will work with Safari or Internet Explorer 6/7. Not tested though.
NewMethod
New member
Posts
41
Joined
Sun Jan 17, 2010 11:12 pm
Top

Re: Product Highligt / border

Quote

Post by iangregson » Mon Jan 18, 2010 8:36 am

Have managed to change all items, hover background OK

Have a thumbnail border but only works in front page.
How to make it work on all pages,

Thanks
iangregson
Newbie
Posts
19
Joined
Sun Jan 17, 2010 4:50 pm
Top

Re: Product Highligt / border

Quote

Post by bebaspromo » Mon Jan 18, 2010 5:43 pm

NewMethod wrote: I like this... how compatible is it though.. don't think it will work with Safari or Internet Explorer 6/7. Not tested though.
yeaaah .... it's call : "Free Template" ... ;D
just tested with FF, Opera/Chrome ...
Last edited by bebaspromo on Mon Jan 18, 2010 6:02 pm, edited 1 time in total.
User avatar
bebaspromo
Active Member
Posts
186
Joined
Tue Dec 22, 2009 9:14 pm
Top

Re: Product Highligt / border

Quote

Post by bebaspromo » Mon Jan 18, 2010 5:49 pm

iangregson wrote:Have managed to change all items, hover background OK

Have a thumbnail border but only works in front page.
How to make it work on all pages,

Thanks
in my stylesheet.css (template above) :

Code: Select all

.list {
	margin-bottom: 10px;
	width: 100%;
}
.list td {
	text-align: center;
	background:	#FFFFFF;
	vertical-align: top;
	padding-bottom: 10px;
	padding-top:0px;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px; 
	-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px; 
}
.list td:hover {
	background:	#F3F3F3;
}
it's work to all .list class such as "product/category" thumb...
User avatar
bebaspromo
Active Member
Posts
186
Joined
Tue Dec 22, 2009 9:14 pm
Top

Re: Product Highligt / border

Quote

Post by PalMultimedia » Wed Feb 02, 2011 9:20 pm

This is what I am looking fore... great but I have a problem with the rounded corner.
it shows squat corner insted of rounded one.

any suggestion ??
User avatar
PalMultimedia
New member
Posts
29
Joined
Wed Feb 02, 2011 9:17 pm
Top

Re: Product Highligt / border

Quote

Post by KuriN » Fri Apr 08, 2011 6:42 pm

Thats great stuff, Thanks a lot!!!!
KuriN
New member
Posts
23
Joined
Mon Jan 31, 2011 6:15 pm
Top

Re: Product Highligt / border

Quote

Post by dee-efx » Wed Jul 13, 2011 4:38 am

Hi,

Do you think this would work on Version 1.4.9.

I am wanting a border round all of my photos across the whole site and this looks really good.

Thanks in advance. Darren
dee-efx
New member
Posts
30
Joined
Wed Jul 06, 2011 2:10 am
Top

Re: Product Highligt / border

Quote

Post by nosecret » Wed Jul 13, 2011 7:17 am

dee-efx wrote:
Do you think this would work on Version 1.4.9.
Yes, that is work on OC version 1.4.9.
nosecret
Active Member
Posts
245
Joined
Tue Dec 28, 2010 12:28 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 18 guests