Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 CSS tips
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Andy
Administrator

95440 Posts

Posted - 11/21/2006 :  06:47:03  
This is where we'll be adding some tips for using the CSS features from http://www.ecommercetemplates.com/help/css.asp

How to put a border around your products

In your style sheet, style.css add this

div.product {
border:1px solid #000;
background-color:#FFF;
}

...see an example here http://www.ecommercetemplates.com/dreamweaverecommerce.asp

Jazz up your cross selling layout

Here's an example of a cross selling layout on the product detail page http://www.ectdemostore.net/proddetail.asp?prod=fscanner001

Add this to your css file

.cstitle {
font-size: 13px;
font-family : Verdana,Arial,sans-serif;
font-weight : bold;
background: #fdedc9;
border: 1px solid #e69d01;
color : #333;
padding: 4px;
}

and this to your proddetail.asp page (in this example)

<style>div.product {
border:1px dotted #e69d01;
background-color:#FFF;
}</style>
<%
crosssellaction="recommended"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->

or to your proddetail.php page

<style>div.product {
border:1px dotted #e69d01;
background-color:#FFF;
}</style>
<?php
$crosssellaction='recommended';?>
<?php include "vsadmin/inc/inccrosssell.php" ?>

Make your product blurb easier to read

If you have long descriptions in paragraphs then it's easier on the eye if the line spacing is given a tweak so try adding this to style.css to help readability

.proddescription, .detaildescription{
line-height: 1.3;
font-size: 12px;
font-family : Verdana,Arial,sans-serif;
color : #000;
}

-------------------------


Ecommerce templates

Check out our ecommerce template hosting
Check out our regular templates

Updater help


Andy
Administrator

95440 Posts

Posted - 05/06/2008 :  12:56:02  
Here's a very neat one from Repair_Guy

http://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=53534

Sometimes you may want to add text after the price, in this case to add (inc VAT) but you may need something like "per yard" or similar.

Adding this to the css file will add the text of your choice following the price

.price:after {content: " inc. VAT";}

Very neat solution.

clivewalker
Ecommerce Template Expert

United Kingdom
656 Posts

Pre-sales questions only
(More Details...)

Posted - 10/10/2008 :  04:15:27  
[Admin: Please move this to a new topic if appropriate]

One tip that might be useful to some people is that you can easily target specific styles to a particular page by using an id attribute on the <body> tag of the page. This allows you to specify styles that change from page to page whilst keeping all your style rules in the same style sheet. For example, you could style an <hr> element differently on one page from another page. You can also highlight 'current page' navigation items in this way. It may also allow you to style elements on a page that do not have a class assigned. For example, if the page has a table without a class name. And...if you are using style sheets to specify the width of common layout elements, these can also be changed eg the width of #column1 on one page might be a different width to #column1 on another page.

Add the id attribute to your page using your normal web page editor [this is possible in Dreamweaver templates as well using the 'make attribute editable' command].

eg <body id="yourpageid">

Then add your style rules in your style sheet like this:

#yourpageid element/class {style declaration here;}

Hope this makes sense. I've found this to be really useful

CVW Web Design
www.cvwdesign.co.uk | web design, web hosting and templates
www.cvwdesign.com | ecommerce templates
www.kmeliteproducts.co.uk and www.toysandlearning.co.uk | websites built with ecommerce templates

Edited by - clivewalker on 10/10/2008 04:28:10

Andy
Administrator

95440 Posts

Posted - 03/23/2011 :  06:25:36  
Here's a video tutorial on tweaking the css file and previewing it in Firefox without the changes going live until you are ready

http://www.youtube.com/watch?v=Xn1rM5JcOhM

Requires Firefox with the Developer Toolbar installed https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Andy

Ecommerce templates

ECT newsletter
Dreamweaver templates

Follow us on Twitter and Facebook


Andy
Administrator

95440 Posts

Posted - 11/24/2011 :  07:15:19  
Styling the buy button

We've just switched to css styling for our add to cart buttons - you can see them in action here for example

http://www.ectdemostore.net/products.asp

The should degrade nicely in older browsers.

This is following and tweaking a simple tutorial here http://dave.abovebored.co.uk/post/5366867789/hardest-button-to-button

Andy

Ecommerce templates

ECT newsletter
ECT hosting suggestions

Dreamweaver templates

Follow us on Twitter, Facebook, Google + and YouTube

Andy
Administrator

95440 Posts

Posted - 11/25/2011 :  06:30:11  
Testing your tweaks

After making any major design changes it's important to check across major browsers. At a minimum that would be checking locally in Firefox, Chrome, Internet Explorer, Opera and Safari.

As you can't always check older versions, it's handy to periodically check against the amazing array of browser versions at http://browsershots.org - obviously many there might be considered superfluous but checking the browser stats in your analytics program should give you a good idea of what your visitors are using and what you need to check against.

Andy

Ecommerce templates

ECT newsletter
ECT hosting suggestions

Dreamweaver templates

Follow us on Twitter, Facebook, Google + and YouTube



clivewalker
Ecommerce Template Expert

United Kingdom
656 Posts

Pre-sales questions only
(More Details...)

Posted - 11/25/2011 :  06:35:02  
Just one tip to add to that about browser testing. If you want to test in Internet Explorer 7 to 9 and you only have IE9 installed locally, use the Web Inspector in IE9 by clicking F12, then change 'Browser Mode' in the Web Inspector panel to IE7 or IE8 to see how your site looks in these older versions. This is normally a good representation of older IE7 and IE8 browsers

CVW Web Design
www.cvwdesign.co.uk | web design, web hosting and ecommerce templates
www.cvwdesign.com | web design blog
www.thelalacardcompany.co.uk and www.toysandlearning.co.uk | websites built with ecommerce templates

Andy
Administrator

95440 Posts

Posted - 02/20/2013 :  05:57:21  
Override Inline Styles with CSS

Sometimes you may see that an inline style has been applied to an element in the code. That can be overwritten in your external style sheet using !important

http://www.w3.org/TR/CSS2/cascade.html#important-rules

for example

<div style="background: #000;">
The inline styles for this div should make it black.
</div>

adding this to your external css file file would override that and change the background to white

div {
background: #FFF !important;
}

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube



Andy
Administrator

95440 Posts

Posted - 05/17/2013 :  03:27:15  
cssmatic

http://www.cssmatic.com/

Some very cool tools here.

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube



Andy
Administrator

95440 Posts

Posted - 03/13/2014 :  08:16:05  
I've been updating the demo stores and have added a feature I was playing around with a while ago.

Scroll here for example

http://www.ectdemostore.co.uk/products.asp

and see how the top menu fixes to the top of the screen.

Maybe not everyone's cup of tea but it certainly has its uses.

Here's a tutorial (there are many others and some more complex but this one is simple)

http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/

Basically add

<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>

before the closing </head> tag on the page

and then add this before the closing </body> tag

<script type="text/javascript">
var div = $('#topnav');
if(div.size()) {
var placehoder = $('<div>').hide();
div.after(placehoder);

var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
//console.log(start,p);
if (p > start) {
placehoder.height(div.height()).show();
} else {
placehoder.hide();
}
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
}
</script>

change #topnav to the id of the div on your page that needs fixing.

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube



   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000