![]() |
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 |
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 :(
|
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:
|
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 |
Re: css editing program
Thank you I will read it!!!
Thanks for your help! Quote:
|
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 :) |
Re: css editing program
Quote:
Is that kind of like the old dog new trick saying? :mrgreen: |
Re: css editing program
Ugg well this old dog better get cracking and learn it!!
Quote:
|
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
|
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. |
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. |
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 |
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:
|
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. |
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:
|
Re: css editing program
Quote:
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. :? |
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:
|
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....... |
Re: css editing program
Shoot I figured as much, I was just hoping I was missing something.
Thanks so very much!! :) Quote:
|
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
|
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:
|
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 |
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. |
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:
|
Re: css editing program
Topstyle 4 is a good one.
|
Re: css editing program
UltraEdit looks like it is really difficult to maneuver
Quote:
|
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:
|
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! |
Re: css editing program
Is there a way to change the templete you are working on when viewing it in firebug?
|
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
|
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:
|
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........... |
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 |
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: |
Re: css editing program
Thank you so much I will check those out as well!!
Quote:
|
Re: css editing program
Quote:
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 |
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.