How to edit html or inline CSS in 4.4.1
 

I've run into this problem a few times today: I cannot control how an element is displayed by editing the style sheet because inline CSS is all mashed into the HTML. Arrrghh inline CSS should be outlawed! haha

For example, below is code from 1 product thumbnail cell on the product list/category page. I want the div on the third line have a width of 200px, but it already has 214px inline, and that overrides anything I do on the external style sheet:



The tpl file that I believe I need to edit (product_thumbnail.tpl) is everything but HTML. I am guess that this HTML doesn't exist in any file, but is generated, and I might not have the skills to track down where it's coming from.

So I guess I'm asking how to fix the above problem, but also, in general, how to fix similar problems as they come.

Hope that makes sense. I'm using firebug, webmaster mode, fashion mosaic skin, aspirin, and the caffeine is wearing off.

Thanks for having a look.

Re: How to edit html or inline CSS in 4.4.1
 

I apologize right up front for this long-winded post, but I like to know Why, Where, When and (the biggie) What If? That makes me explain in detail, or so I believe.

Stop using webmaster, unless you want to start ordering aspirin by the case. It may not happen today, and it may not happen for a while, but some day when you least expect it, webmaster is going to FUBAR the template you're working on and maybe a few that are just minding their own business in the background.

You're using the fashion mosaic template-set, right? I'm guessing at that (with good certainty), cuz that's the only skin templates with this: class="image-border"

How did I know that? By searching the xcart V4.4.1 directory that I have on my pc. You need this functionality also, in addition to firebug, etc. Unzip the xcart package with winzip onto your pc's hard drive. Be sure to set the winzip option for "smart CR/LF" in the misc option settings.

Winzip is great for this usage, but this very thing is why you don't want to use it for your online copy of the store - it puts too many cr/lf into the files. (cr = carriage return ; lf = line feed) A Winrar extracted xcart is ideal for the server, but the files have no CR/LF, which means everything is jammed together. That sucks if you're human and you want to read them.

If you have WinXP, you need to set the system to be able to "read" (and search!) tpl and php file types, If you don't have winxp (vista, mac, etc) search for similar settings. Click the following link to the Microsoft site and do Method #2 near the bottom of the page - or, modify the registry with the simple entry.. if you're comfortable working with the registry. ;-)

http://support.microsoft.com/default.aspx?scid=KB;EN-US;309173

From then onward, you can search within likely folders within the xcart directory (ie skin/fashion_mosaic_blue, etc), or search the entire xcart directory for "a word or phrase in the file" and leave the filename section blank. Yes, it will take a LONG time to search for a particular text-string in all 5434 files - it took 28 seconds on my old Athlon 2.2ghz to find the occurrences of (class="image-border") in 3 files, in each of the Fashion Mosaic template-sets.

======

Which brings us to your current problem. These files contain that string (class="image-border"): cart.tpl , products_list.tpl and products_t.tpl - all of them reside within the fashion_mosaic_xxxx\customer\main folder. The first two files have a simple DIV statement with that css class statement and no inline style attribute. The products_t.tpl file, however, has this:


The developers saw fit to put a "math" command into that code when it isn't necessary; a simple "+14" at the end of both x-variables would have sufficed. (e.g. $product.tmbn_x+14|default:$config.Appearance.imag e_width+14 ) It would have saved a bit of code-execution time, but that's another story, for another day. :-)

They did put that 14 extra Pixels in there for a reason, and it may not hurt taking it out.. and it may totally screw up the placement of images. Do what you want and then check it every way possible. And then check it some more.

I hope this lengthy novella may help you. It is just the basics, in how to search for certain phrases, strings, etc., but knowing which string to search for is partly guess and partly experience. Sometimes Firebug and WM (ugh!) don't tell the whole story and sometimes the bit of story they do tell, doesn't tell you enough. Searching through the actual files can be enlightening.

Re: How to edit html or inline CSS in 4.4.1
 

Dude, Ralph, man... Incredibly awesome and helpful post. I do appreciate the long-windedness and, you really made this a billion easier for me. You learned me good.

I see the code now that you posted, with the +14. Got rid of that. Now my site looks beautiful, and everybody is gonna buy my stuff, and Im gonna be rich. :D/

Also indexed my tpl files, as you suggested.

Now I realize there are 3 things you need to track down what you need to edit to change the design. That is firebug, WM, Windows search of file contents. Fellow rookies, take note.

Regarding NOT using Webmaster Mode: I assume you mean don't WM it for editing, but it's okay to use it to track which templates are being used, right? I don't think WM will mess up shtuff as long as you don't click the tpls in the debug window and start editing them directly, true?

Regarding using Winzip or Winrar: All the files look messy in notepad, but have pretty indentations and are easy to read with Notepad++ and UltraEdit. I think I unpacked the tzp on the server and downloaded that.

Regarding searching file contents: CSS files are indexed automatically by Windows 7, but tpl files are not, so I'm glad you brought that up, as that is exactly what I needed to start doing at this stage.

I just figured out how to index tpl with Win 7 and it works pretty darn fast. For any Windows 7 users who want to know how to allow Windows to search the text within tpl files, here's How:

Control Pannel > Search for "Indexing Options" > Indexing Options > Advanced > Tile Types > Select tpl from the list > Change "how should this file be indexed" to "Index Properties and File Contents

Thanks again, Ralph.

Re: How to edit html or inline CSS in 4.4.1
 

Evan, you are very welcome and I am humbled by your praise. :oops:

Ah so, grasshopper, you have the newest windoze offering! And now the teacher has learned a thing or two. Sounds like it's a breeze to set up "weird file" indexing in Win7. Good to know! Does PHP have an entry in that list? You'll probably get around to wanting/needing to search those also - some html is built within php files and you'll be pulling yer hair out looking for a text-string in tpl files.

I also have all those files set to open in Notepad, on a mouse dbl-click, except for a CSS file which MS has evidently locked to HTML purposes (as it should be). No matter, I set the CSS file options with a new command, View, and assigned that to Notepad. It takes a right-click menu to access it, and I already have Notepad as a right-click, send-to menu item, but the View option saves me .0004 seconds of mouse/cursor/movement time. :mrgreen:

Yes, you are correct about my meaning concerning WM. Analyzing which template = OK. Actual editing of templates = pending FUBAR. Part of my opinion on that matter comes from what some of the seasoned vets have said about the newer releases of xcart (V4.3, 4.4). In my original version, 4.1.8, it wasn't even safe to use WM for viewing - simply coming out of WMode could have devastating effects. I learned that the hard way.

Another app that I find invaluable is PSPad. It has a multitude of uses, but I mainly use it for file comparisons and to merge CSS files. It also "cleans up" those files that lack cr/lf for us humans that get tired of looking at run-on sentences with little square boxes embedded. :lol:

Your Notepad++ and UltraEdit may offer the same functionality - heck, they might be better than PSPad, but I just can't learn anything new. Tweaking V4.4.1 is consuming all remaining brain cells and the two empty cells I had allotted for today are now filled with Win7 indexing info. Oh well, miller time!

Remember the little people when you become a gazillionaire!

Re: How to edit html or inline CSS in 4.4.1
 

Yup, Win7 can index PHP contents, but you gotta configure it, which I did just now. CSS and HTML are indexed by default.

I wonder if PSPad is better than the others I mentioned. I'll try it when the others start to get on my nerves.

Well, back to removing the ulgy from the the template. . Good luck with yours Ralph ;)

Re: How to edit html or inline CSS in 4.4.1
 

Webmaster mode has never given me a problem.