CSS new to this.

[dedj]

Could someone please explain and show me the difference of using CSS buttons and when not using them?
I'm not hardcore when it comes to this, would like to see some example or get explained the difference, I read that the webshop will work faster with CSS buttons instead of not using it.

My next question is; how do I use it? I'm using a template now called Red_passion, that exists on zencart page under downloads.

thanks
Dejan

[TheMusician]

Hi,

Could you please clarify? What do you mean by CSS buttons? Roll-overs caused by css, sliding background images, etc... Or do you just mean a stylized link instead of an image wrapped in an anchor tag.

Willing to help once I know what you are talking about.

[clydejones]

Could someone please explain and show me the difference of using CSS buttons and when not using them?
I'm not hardcore when it comes to this, would like to see some example or get explained the difference, I read that the webshop will work faster with CSS buttons instead of not using it.

My next question is; how do I use it? I'm using a template now called Red_passion, that exists on zencart page under downloads.

thanks
Dejan

The buttons that come as default with Zen Cart and/or most of the templates in the download section are image based.

If you prefer not to use the default button images you can select to implement the use of CSS buttons admin -> configuration -> layout settings -> CSS Buttons (set to Yes or No)

CSS buttons are styled using "stylesheet_css_buttons.css"

[dedj]

themusician, reason I'm asking for CSS is that i read in a thread (can't remember which one sorry), i think ajeh or drbyte wrote and recommended a user in the thread to do something about his slow page.
they wrote a page where it tests your page on different speeds and show how long it takes to load your webshop for different internet connections, this site also gives you tips and recommendations if you have too many images on startup, if needed to lower image filesize, if recommended to try to use css buttons for faster load etc.

I tested this url with my webshop and it recommended me to use css buttons among lots of other things. so sad i can't remember the page. *sigh*

well, so thats why I decided to try to fasten up and trim my webshop in all ways possible.

if anyone has a clue on what url-page i mean that checks and gives you report about detailed speed on your webshop, please post url here.

about css buttons, I tried and saw the difference in css buttons, they are buttugly :) well maybe not when you do some changes, but the standard ones were ugly :) posting a picture hehe.

thanks

[clydejones]

themusician, reason I'm asking for CSS is that i read in a thread (can't remember which one sorry), i think ajeh or drbyte wrote and recommended a user in the thread to do something about his slow page.
they wrote a page where it tests your page on different speeds and show how long it takes to load your webshop for different internet connections, this site also gives you tips and recommendations if you have too many images on startup, if needed to lower image filesize, if recommended to try to use css buttons for faster load etc.

I tested this url with my webshop and it recommended me to use css buttons among lots of other things. so sad i can't remember the page. *sigh*

well, so thats why I decided to try to fasten up and trim my webshop in all ways possible.

if anyone has a clue on what url-page i mean that checks and gives you report about detailed speed on your webshop, please post url here.

about css buttons, I tried and saw the difference in css buttons, they are buttugly :) well maybe not when you do some changes, but the standard ones were ugly :) posting a picture hehe.

thanks

WebPage Analyzer

[TheMusician]

Hi dedj,

CSS buttons in bone stock trim can be a bit drab. If you tile a background image behind the button you can get some great effects.

http://www.oscaralexander.com/tutori...-with-css.html

That is a decent example. Just fire up your favorite image creation program, make some background images and voila.

Let us know if you need help,

TheMusician

[dedj]

clydejones ah yes there it is :) thanks.

I would like to ask what you guys think of this.
it keeps mentioning about css, and further down it complains I have css, I haven't even turned on the css in layout-settings.
Below is the result.



# Congratulations. This site is using HTTP compression, otherwise called content encoding using gzip. The sizes reported here are for compressed content sent from the server to the client.
* CSS alternate stylesheets may be referenced in the HTML but are not actually downloaded until they are needed and are therefore not included in the total page size.
Analysis and Recommendations

• TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.
• TOTAL_OBJECTS - Warning! The total number of objects on this page is 22 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
• TOTAL_IMAGES - Warning! The total number of images on this page is 17 , consider reducing this to a more reasonable number. Combine, refine, and optimize your graphics. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
• TOTAL_CSS - Caution. The total number of external CSS files on this page is 3 , consider reducing this to a more reasonable number. Combine, refine, and optimize your external CSS files. Ideally you should have one (or even embed CSS for high-traffic pages) on your pages.
• TOTAL_SIZE - Warning! The total size of this page is 118393 bytes, which will load in 28.00 seconds on a 56Kbps modem. Consider reducing total page size to less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider contacting us about our optimization services.
• TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 1 . External scripts are less reliably cached than CSS files so consider combining scripts into one, or even embedding them into high-traffic pages.
• HTML_SIZE - Congratulations, the total size of this HTML file is 5517 bytes, which less than 20K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your page to display content in well under 8 seconds, the average time users are willing to wait for a page to display without feedback.
• IMAGES_SIZE - Warning! The total size of your images is 92182 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
• SCRIPT_SIZE - Caution. The total size of your external scripts is 6061 bytes, which is above 4080 bytes and less than 8K. Consider optimizing your scripts and eliminating features to reduce this to a more reasonable size.
• CSS_SIZE - Warning! The total size of your external CSS is 14633 bytes, which is over 8K. Consider optimizing your CSS for size by eliminating whitespace, using shorthand notation, and combining multiple CSS files where appropriate.
• MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.

What do you guys reckon I should start off with to fix, and how?

thanks
Dejan

[dedj]

Hi dedj,

CSS buttons in bone stock trim can be a bit drab. If you tile a background image behind the button you can get some great effects.

http://www.oscaralexander.com/tutori...-with-css.html

That is a decent example. Just fire up your favorite image creation program, make some background images and voila.

Let us know if you need help,

TheMusician

thanks I will take a look into it, might be nice to change it, and they actually look alot nicer than the default ones :)