Magento

I was trying to modify the form.phtml in the contact directory in the template system.

I put a div called backgroundContact around the form

I then proceeded to do my css in boxes.css and there was no change. However, when i did the same css as inline css in the phtml file it worked to change the look.

Is it just me or is this the way it works?

Has anybody had similar experiences with the whole css during your templatinmg?

Look forward to hearing a solution/explanation

Could be cause by a number of things:
1.  The DIV ID is not spell the same (case sensitive) as defined in box.css
2.  Double-check how you defined the stylesheet. It should be named, #backgroundContact, according to your description.
3.  The box.css stylesheet is not loaded for that page.
4.  The div tag is not properly closed (/div)
5.  Browser incompatibilities - try using a different browser

It may also help to use a Firefox extension like Firebug to help debug the CSS code.

Hey Steve,

I did all the correct case etc.
Is it possible that boxes.css does not load on that page?

I have checked out all the showcase sites and i notice beside a slight hue change that users are not able to radically change the contact us , the log in and register, the account management infact anything to do with forms really.

Also i have noticed really little customization on those sidebar elements namely the compare products, the poll and the newsletter modules.

My suggestion is that boxes.css or some other CSS file should control the above mentioned elements that is however, if i am correct that it does not!
This will make customization down to the minutest detail possible.

I await comments explanations

roskolnikov- what is the link to your store?

In line CSS takes precedence over called css files or external files

Dis engage your cache in the admin backend

This info could have saved 3 hours alone the caching system works great in fact to great because any changes with this Cache system enabled will not show the changes in the layout .xml file that you have uploaded also hitting ctrl f5 does not clear the cache

Step One Turn off all Caching in your demo store >>system>>cache management
Step Two Disable all cache controls except Configuration
Step Three Check Mark Refresh Cache

Ominhu,

I got it on my XAMPP....
kinda sensitive due to NDA
but I can PM you later today

Oh yeh billy even when i take away the inline and do the correct CSS it does not affect those phtml files which have forms etc.
To me the only workaround would be to edit the images that make up the background of those forms in photoshop or somethin or maybe replace the images with the desired image from my designer. will let you know how it goes

R

Magento does give you a lot of control over the how things appear on a page.  There are plenty of DIV tags and ID attributes to be found throughout.  Your issue may also be due to a simple typo, invalid attribute, or a missing semi-colon or improper syntax.  There is simply a lot of things that can go wrong with stylesheets.  The browser does its best (to a fault) to deal with these issues and rarely complains. 

There are web tools you can use to quickly find HTML and CSS issues.  Try http://www.totalvalidator.com/.  Hope this information is helpful.

Well what can i say, I was at fault. I was using the wrong selectors to get to the HTML: element.
This removes my last barrier for total customization of magento.

My advice to all future designers is to become masters of HTML and CSS and basic PHP and you’re well on your way to making the most creative e-commerce frontends the internet has seen.

Thanks for all the help guys

Ciao
Roskolnikov

Hey Guys,

While we’re at it… where do i put the CSS to control my HTML mark up in my CMS pages. Is it in boxes.css as well?

I await your explanations

R