X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   css editing program (https://forum.x-cart.com/showthread.php?t=52271)

Bearsnum34 02-10-2010 01:37 PM

css editing program
 
Hi Everyone,

I am a newbie to xcart and css, I was wondering if there was a program out there some where that I could use to edit my templetes.

Thanks,
Fel

balinor 02-10-2010 02:54 PM

Re: css editing program
 
Afraid not - you can't use a standard html editor because the templates are built on Smarty. There was a plug-in for Dreamweaver a while back, but I never found it to be fully functional. If you don't know CSS, it is very difficult to edit the X-Cart templates :(

Bearsnum34 02-10-2010 03:06 PM

Re: css editing program
 
:( Thanks I guess I am stuck learning css....hope that doesn't take 2 years! LOL

Wait I found this will it work: http://www.blumentals.net/rapidcss/



Quote:

Originally Posted by balinor
Afraid not - you can't use a standard html editor because the templates are built on Smarty. There was a plug-in for Dreamweaver a while back, but I never found it to be fully functional. If you don't know CSS, it is very difficult to edit the X-Cart templates :(


balinor 02-10-2010 03:11 PM

Re: css editing program
 
Not really no. You should read through this, which refers to the older version of X-Cart, but the same principles still apply:

http://forum.x-cart.com/showthread.php?t=21529

Bearsnum34 02-10-2010 04:24 PM

Re: css editing program
 
Thank you I will read it!!!

Thanks for your help!


Quote:

Originally Posted by balinor
Not really no. You should read through this, which refers to the older version of X-Cart, but the same principles still apply:

http://forum.x-cart.com/showthread.php?t=21529


ARW VISIONS 02-10-2010 06:08 PM

Re: css editing program
 
Been working with CSS for almost 10 years and still learn new tricks all the time.

It's a work in progress :)

hoosierglass 02-10-2010 06:21 PM

Re: css editing program
 
Quote:

Originally Posted by Ashley
Been working with CSS for almost 10 years and still learn new tricks all the time.


Is that kind of like the old dog new trick saying? :mrgreen:

Bearsnum34 02-10-2010 06:26 PM

Re: css editing program
 
Ugg well this old dog better get cracking and learn it!!

Quote:

Originally Posted by Ashley
Been working with CSS for almost 10 years and still learn new tricks all the time.

It's a work in progress :)


cflsystems 02-10-2010 08:03 PM

Re: css editing program
 
Get Notepad++. It has lots of addons/language support one of which is smarty tpl so when you open tpl file you get a nice highlighting of the text and code words

Sparks 02-11-2010 05:14 AM

Re: css editing program
 
If you use firefox then look for an addon called Firebug. This will allow you to inspect pages and css elements. I often get ideas on how to code by looking at other sites and then just tinkering.

It will also let you change the css on a given webpage in realtime so you can see what things will look like.

dwpers 02-11-2010 08:50 AM

Re: css editing program
 
Firefox + Firebug is a great tool.

For local development, if on a PC, I use Dreamweaver (there's a plugin floating around for {Smarty} integration) and if on a MAC I use CODA.

gizmo 02-11-2010 09:18 AM

Re: css editing program
 
Css is great, as it's a real challenge. All software controlling styling does it in many different ways, But the css being used in principle is the same.

A good start is to understand where each element of css is controlling what, then you can design away to your hearts content.

Understand this and then it's down to making it browser compatible, then valid csss, and so on.

Go on try it, it's a great challenge, and lately I think is becoming easier to control css, it's just the various software developers that will make it very difficult to find where and what's going on there's the challenge for you. X-cart is a prime example, but I have learnt there really isn't that much to x-cart css once you crack what's controlling what. The buttons are the worse css I have ever seen.


As to your question, we all use diffrent software for css, etc, most of us will use a combination of aids. Notepad, and Dreamweaver is top of my list, but I use many others. It's down to personal taste etc.

I'm waffling on now.
Good Luck

Bearsnum34 02-11-2010 09:56 AM

Re: css editing program
 
Well I have downloaded both programs and I do have dreamweaver (but I read somewhere that dreamweaver doesnt work with xcart).

I guess the first thing is to backup everything up first.

Thanks so much for everyones help, I will let you know what happens.

I am working with variants oh a pain in the behind, I also want to remove the weight from the customers side....oh so many wants and needs, tell me where is the time for it all!!!




Quote:

Originally Posted by gizmo
Css is great, as it's a real challenge. All software controlling styling does it in many different ways, But the css being used in principle is the same.

A good start is to understand where each element of css is controlling what, then you can design away to your hearts content.

Understand this and then it's down to making it browser compatible, then valid csss, and so on.

Go on try it, it's a great challenge, and lately I think is becoming easier to control css, it's just the various software developers that will make it very difficult to find where and what's going on there's the challenge for you. X-cart is a prime example, but I have learnt there really isn't that much to x-cart css once you crack what's controlling what. The buttons are the worse css I have ever seen.


As to your question, we all use diffrent software for css, etc, most of us will use a combination of aids. Notepad, and Dreamweaver is top of my list, but I use many others. It's down to personal taste etc.

I'm waffling on now.
Good Luck


gizmo 02-11-2010 10:03 AM

Re: css editing program
 
Well, there really is no specific program, where you can fully design php, software, what you do is look for what's controlling each element of the design, and then use various aids, IE dreamweaver, notepad etc to redesign etc.

You cannot just edit say for example One controlling page of x-cart and everything changes as, css sheet also controls the design elements.

Wish you luck anyway.

Bearsnum34 02-11-2010 01:47 PM

Re: css editing program
 
So what you are saying is that I can not change the home page and then all the other pages will look the same. Is that what I am understanding.

Quote:

Originally Posted by gizmo
Well, there really is no specific program, where you can fully design php, software, what you do is look for what's controlling each element of the design, and then use various aids, IE dreamweaver, notepad etc to redesign etc.

You cannot just edit say for example One controlling page of x-cart and everything changes as, css sheet also controls the design elements.

Wish you luck anyway.


gizmo 02-11-2010 02:18 PM

Re: css editing program
 
Quote:

Originally Posted by Bearsnum34
So what you are saying is that I can not change the home page and then all the other pages will look the same. Is that what I am understanding.



By Far Nope............... It's all controlled via css, and different page templates, calling a combination of various css element styles.

The only way to do this is, if you create a pure html page from scratch, then that would make it a normal html page with no programming added, then all your other pages would look the same yes..

To sum up learn where and what each template does in x-cart and start from there. :?

Bearsnum34 03-16-2010 12:54 PM

Re: css editing program
 
Quick question.....I know when I use FrontPage I can preview the changes I made to a webpage that is HTML coded. I have downloaded notepad++ and firebug as recommended. When I put the copy and paste the page into Notepad++ is there a way to view what it would look like? I have looked and can not seem to find it, also with firebug the same thing.

I guess were I am going with this is I would like to be able to see what the changes look like before I make the change.

Many Thanks,



Quote:

Originally Posted by gizmo
By Far Nope............... It's all controlled via css, and different page templates, calling a combination of various css element styles.

The only way to do this is, if you create a pure html page from scratch, then that would make it a normal html page with no programming added, then all your other pages would look the same yes..

To sum up learn where and what each template does in x-cart and start from there. :?


gizmo 03-16-2010 02:56 PM

Re: css editing program
 
1. Can you view within Notepad++ (Nope)
2. Can you view code in real time (Nope) it's all smarty and other bits

The way to view changes are to upload, and see the changes, if you don't like you keep editing.

Another way is editing on a home server, you can see the changes just via save, and change very quickly.

Dreamweaver has live view but this is aimed at html pages, unless you have a server setup..

People still use front page blimey...

It's all a learning curb.......

Bearsnum34 03-16-2010 02:59 PM

Re: css editing program
 
Shoot I figured as much, I was just hoping I was missing something.

Thanks so very much!! :)

Quote:

Originally Posted by gizmo
1. Can you view within Notepad++ (Nope)
2. Can you view code in real time (Nope) it's all smarty and other bits

The way to view changes are to upload, and see the changes, if you don't like you keep editing.

Another way is editing on a home server, you can see the changes just via save, and change very quickly.

Dreamweaver has live view but this is aimed at html pages, unless you have a server setup..

People still use front page blimey...

It's all a learning curb.......


cflsystems 03-16-2010 03:03 PM

Re: css editing program
 
You can view how changes will look like with Firebug . Just load the page and start changing values in Firebug - you will see the change

Bearsnum34 03-16-2010 03:11 PM

Re: css editing program
 
REALLY!! So before anything is permently changed I can view it and if I don't like it I don't change it (for a lack of better terms).

Quote:

Originally Posted by cflsystems
You can view how changes will look like with Firebug . Just load the page and start changing values in Firebug - you will see the change


gizmo 03-16-2010 03:20 PM

Re: css editing program
 
You will soon find though with what steves saying is you are limited, and also, you must know what your looking for.

Great for little touchups I suppose. (Don't forget to hit refresh, after you make a change otherwise you'll think you have mesed your site up|) lol

ADDISON 03-16-2010 09:40 PM

Re: css editing program
 
Initially I used jEdit. Now I am using UltraEdit in my projects. It has a lot of wordfiles (tags recognition) for most known file extensions you can add. Smarty, PHP, CSS, HTML are a few of them.

Notepad++ is great tool too.

Bearsnum34 03-22-2010 12:47 PM

Re: css editing program
 
When I go to Firebug and try to change things it seems I can only change the css syles on the right side of the firebug when its open.

I want to move the bestsellers box to the right under customer log in and I see where it is but can not seem to figure out how to move it???


Quote:

Originally Posted by am2003
Initially I used jEdit. Now I am using UltraEdit in my projects. It has a lot of wordfiles (tags recognition) for most known file extensions you can add. Smarty, PHP, CSS, HTML are a few of them.

Notepad++ is great tool too.


PhilJ 03-22-2010 12:55 PM

Re: css editing program
 
Topstyle 4 is a good one.

Bearsnum34 03-22-2010 02:31 PM

Re: css editing program
 
UltraEdit looks like it is really difficult to maneuver


Quote:

Originally Posted by am2003
Initially I used Jedi. Now I am using UltraEdit in my projects. It has a lot of wordfiles (tags recognition) for most known file extensions you can add. Smarty, PHP, CSS, HTML are a few of them.

Notepad++ is great tool too.


Bearsnum34 03-22-2010 02:54 PM

Re: css editing program
 
WOW topstyle 4 looks pretty cool but intense! I guess I am so used to frontpage that anything I look at looks hard to figure out.

Quote:

Originally Posted by PhilJ
Topstyle 4 is a good one.


Bearsnum34 03-22-2010 03:59 PM

Re: css editing program
 
If x-cart uses all programing types then why is it that only css is showing up in the edit templetes section???

I am trying to move the bestsellers to the right under the customer log in section.

Sorry if I am sound rash but I have been working on this for 2 days now and I am very frustrated!

Bearsnum34 03-24-2010 07:02 PM

Re: css editing program
 
Is there a way to change the templete you are working on when viewing it in firebug?

cflsystems 03-25-2010 03:14 AM

Re: css editing program
 
Firebug cannot change it, it only shows you what is in the browser and lets you change that view but it doesn't work with the template

Bearsnum34 03-25-2010 08:47 AM

Re: css editing program
 
Thanks so much, I figured as much but I just wanted to be sure. I have been able to change the colors but because I don't know smarty I am not able to move the BestSellers box to the right side above the news. :( I guess for now it will have to stay where it is until I have more time to invesitage.

One other thing, I was able to change the color in main.css but do I have to change it in these as well

CSS file (main.IE6.css)
CSS file (main.IE7.css)
CSS file (main.FF.css)
CSS file (main.popup.css)
CSS file (main.popup.IE6.css)


Quote:

Originally Posted by cflsystems
You can view how changes will look like with Firebug . Just load the page and start changing values in Firebug - you will see the change


gizmo 03-25-2010 01:55 PM

Re: css editing program
 
If your using one of x-carts templates for example say Light and lucid 3 column, just go to

1. skin1/customer/home.tpl
2. Now you will see the code
Now you can move best sellers by following:

ORIGINAL CODE
<div id="left-bar">

{if $categories && ($active_modules.Flyout_Menus || $config.General.root_categories eq "Y" || $subcategories)}
{include file="customer/categories.tpl" }
{/if}

{if $active_modules.Bestsellers}
{include file="modules/Bestsellers/menu_bestsellers.tpl" }
{/if}

{if $active_modules.Manufacturers ne "" and $config.Manufacturers.manufacturers_menu eq "Y"}
{include file="modules/Manufacturers/menu_manufacturers.tpl" }
{/if}

{include file="customer/special.tpl"}

{if $active_modules.Survey && $menu_surveys}
{foreach from=$menu_surveys item=menu_survey}
{include file="modules/Survey/menu_survey.tpl"}
{/foreach}
{/if}

{include file="customer/help/menu.tpl"}

</div>
<div id="right-bar">

{if $active_modules.SnS_connector}
{include file="modules/SnS_connector/button.tpl"}
{/if}

{if $active_modules.Feature_Comparison && $comparison_products ne ''}
{include file="modules/Feature_Comparison/product_list.tpl" }
{/if}

{include file="customer/menu_cart.tpl" }

{if $login eq "" }
{include file="customer/auth.tpl" }
{else}
{include file="customer/authbox.tpl" }
{/if}

{include file="customer/news.tpl" }

{if $active_modules.XAffiliate && $config.XAffiliate.partner_register eq 'Y' && $config.XAffiliate.display_backoffice_link eq 'Y'}
{include file="partner/menu_affiliate.tpl" }
{/if}

{if $active_modules.Interneka}
{include file="modules/Interneka/menu_interneka.tpl" }
{/if}



</div>

CHANGED CODE HIGHLIGHTED NOW THIS WILL GIVE BESTSELLERS ON THE RIGHT ABOVE NEWS:

CODE RED IS ADDED TO RIGHT
CODE GREEN IS ORIGINAL AND COMMENTED OUT SO IT WON'T SHOW AND JUST REMOVE COMMENTED OUT TO HAVE IT APPEAR THERE AGAIN

<div id="left-bar">

{if $categories && ($active_modules.Flyout_Menus || $config.General.root_categories eq "Y" || $subcategories)}
{include file="customer/categories.tpl" }
{/if}

{*{if $active_modules.Bestsellers}
{include file="modules/Bestsellers/menu_bestsellers.tpl" }
{/if}*}


{if $active_modules.Manufacturers ne "" and $config.Manufacturers.manufacturers_menu eq "Y"}
{include file="modules/Manufacturers/menu_manufacturers.tpl" }
{/if}

{include file="customer/special.tpl"}

{if $active_modules.Survey && $menu_surveys}
{foreach from=$menu_surveys item=menu_survey}
{include file="modules/Survey/menu_survey.tpl"}
{/foreach}
{/if}

{include file="customer/help/menu.tpl"}

</div>
<div id="right-bar">

{if $active_modules.SnS_connector}
{include file="modules/SnS_connector/button.tpl"}
{/if}

{if $active_modules.Feature_Comparison && $comparison_products ne ''}
{include file="modules/Feature_Comparison/product_list.tpl" }
{/if}

{include file="customer/menu_cart.tpl" }

{if $login eq "" }
{include file="customer/auth.tpl" }
{else}
{include file="customer/authbox.tpl" }
{/if}
{if $active_modules.Bestsellers}
{include file="modules/Bestsellers/menu_bestsellers.tpl" }
{/if}

{include file="customer/news.tpl" }

{if $active_modules.XAffiliate && $config.XAffiliate.partner_register eq 'Y' && $config.XAffiliate.display_backoffice_link eq 'Y'}
{include file="partner/menu_affiliate.tpl" }
{/if}

{if $active_modules.Interneka}
{include file="modules/Interneka/menu_interneka.tpl" }
{/if}



</div>


That's it assuming light and lucid 3 column...........

xplorer 03-25-2010 11:03 PM

Re: css editing program
 
Hi!

For php/html/css editing in Windows I recommend either NetBeans or Eclipse

For testing:
- Firebug plugin for FireFox
- YSlow add-on to Firebug
- ColorZilla plugin for FireFox
- MeasureIt plugin for FireFox
- Web Developer add-on for FireFox
- development tools built into Google Chrome
- Developer Toolbar for IE

Bearsnum34 03-29-2010 03:51 PM

Re: css editing program
 
Hi Gizmo,

I just purchased a template with an install so I do not have the original x-cart template?? :(

[quote=gizmo]If your using one of x-carts templates for example say Light and lucid 3 column, just go to

1. skin1/customer/home.tpl
2. Now you will see the code
Now you can move best sellers by following:

Bearsnum34 03-29-2010 03:52 PM

Re: css editing program
 
Thank you so much I will check those out as well!!

Quote:

Originally Posted by xplorer
Hi!

For php/html/css editing in Windows I recommend either NetBeans or Eclipse

For testing:
- Firebug plugin for FireFox
- YSlow add-on to Firebug
- ColorZilla plugin for FireFox
- MeasureIt plugin for FireFox
- Web Developer add-on for FireFox
- development tools built into Google Chrome
- Developer Toolbar for IE


Jayk 03-29-2010 09:40 PM

Re: css editing program
 
Quote:

Originally Posted by xplorer
Hi!

For php/html/css editing in Windows I recommend either NetBeans or Eclipse


NetBeans just announced initial support for Smarty. It might be time for me to switch from Eclipse.

http://blogs.sun.com/netbeansphp/entry/initial_support_for_smarty_available

Jason

ADDISON 02-26-2013 01:15 PM

Re: css editing program
 
Netbeans remains my favorite because it is free. After using UltraEdit long time, I am in love with Sublime Text 2. Initially it was a little bit hard to understand why is it much better than the others. Too many developers recommend Sublime Text. Now I am looking forward for version 3.

So guys, give it a try, see some videos about what this powerful editor can do. It is just amazing. Just after installation install Package Control plugin, then all will come like a charm. Search with Google Tips&Tricks for being more advanced in using it. The best editor of the moment in my opinion, Notepad++ is also great, but this one is more powerful and the most important faster.

Here is a nice tutorial to learn Sublime: https://tutsplus.com/course/improve-workflow-in-sublime-text-2/.

I am looking for Snippets to X-Cart 4 (if anyone will create them it will be great)!


All times are GMT -8. The time now is 12:56 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.