Having got familiar with the workings of nopCommerce I’m about to start customising the look of my site in CSS. But as the master pages/default page are all loaded dynamically you can’t see the result until the page is rendered in the browser. So it seems to me the only way to amend and preview the CSS is either using F12 in IE or Firebug in FF. This makes all the CSS tools in Visual Studio and Expression Web a bit redundant.
Is this the best way (or the only way) to design nopCommerce in CSS ? or are there other products that can do the job. I’m using VS Express 2008 so I don’t have all the features of say VS Pro so maybe I’m missing something.
I’ve seen this question before on the forums but haven’t to date seen an answer. There are some good nopCommerce sites out there so I figure there are some experienced users around who might be able to help on this one.
How best to preview changes in CSS
- 77
- 913
- 2009/12/23
- United Kingdom
Yes I have. I use Expression web and I load the default.aspx (or any nopCom file) into preview from Visual Web Dev and the choose Open in Expression Web from the IE8 file menu.
This gives me all the tools to work on the CSS in Expression Web and a reasonable preview of the default.aspx in design mode. Then I save the updated style sheets after editing. I simply press F5 or Refresh in the browser window to see the results. The F12 developer screen helps to track down the elements too.
I have made some major changes especially to the product screen and all the menus and once you get into the routine it's pretty quick. You do have to go into the modules now and again if your creating new DIV's, etc. but it's easy to get a feel for the flow of nopCom this way.
The only other thing is that you sometimes need to save the default.aspx in Exp. Web in order to save the style sheet (to default2.aspx or similar) but you can't preview this version as a separate rendered file in Exp Web otherwise you could really play around with some design ideas.
Doing it this way you can open any page you want with all the style sheets attached and ready to edit, then refresh and preview.
I suppose you could do this in VWD but I'm more at home with the CSS tools in Exp Web and I find VWD a bit quirky with CSS, plus using the local ASP.NET development server it would take longer to keep previewing, it's simpler and quicker just to press F5 from the brower after an update in Exp Web.
This gives me all the tools to work on the CSS in Expression Web and a reasonable preview of the default.aspx in design mode. Then I save the updated style sheets after editing. I simply press F5 or Refresh in the browser window to see the results. The F12 developer screen helps to track down the elements too.
I have made some major changes especially to the product screen and all the menus and once you get into the routine it's pretty quick. You do have to go into the modules now and again if your creating new DIV's, etc. but it's easy to get a feel for the flow of nopCom this way.
The only other thing is that you sometimes need to save the default.aspx in Exp. Web in order to save the style sheet (to default2.aspx or similar) but you can't preview this version as a separate rendered file in Exp Web otherwise you could really play around with some design ideas.
Doing it this way you can open any page you want with all the style sheets attached and ready to edit, then refresh and preview.
I suppose you could do this in VWD but I'm more at home with the CSS tools in Exp Web and I find VWD a bit quirky with CSS, plus using the local ASP.NET development server it would take longer to keep previewing, it's simpler and quicker just to press F5 from the brower after an update in Exp Web.