Hello,
There is a thing bothering me in the (excellent) customizable Chameleon theme: the text on the input buttons is left aligned when shown in iexplorer:
In Firefox the alignment seems somewhat better:
The devil is in the detail, and I have been trying to find in the css files how to center-align the button texts, but without success. Could anyonbe help me solve this little nagging thing? Thanks!
H. Pelissier
Well, as a matter of fact the jpegs I incorporated in my first posting show the problem: the words "Login" and "Search" appear to be aligned to the left of their buttons, instead of in the center.
H.P.
Thanks for the response! I have tried to add your suggestion to various "input" elements in the different stylesheets (chameleon and standard) but without success. Oddly enough the text appears neatly in the center of the button in Firefox, Safari and Netscape browsers. Perhaps sth. to do with IE7?!? Hopefully a chameleon theme creator/user knows the answer to this anomaly...
http://elcole.freehostia.com/leftbuttons.html
H.P.
Sure. I attach my user_styles.css of the chameleon theme. Besides this there are of course also the styles_layout.css (which definitely plays a role) and styles_ie7.css sheets of the standard theme. Thanks for the bother,
H. Pelissier
Here is the front page:
The text in login button is not centered in firefox either - margin and padding are just smaller.
I should still test this but after a quick look it looks like
div.sideblock div.content * {
text-align: left;
}
is causing the problem.
Of course you could add all kinds of tags to styles_ie7.css and styles_ie6.css (or to the end of user_styles.css) like
.block_login .loginform div.c1.btn {
text-align:center;
}
but try first to take that * tag away from user_styles.css...
There is also one small mistake in div#azul tag but I guess you don't need it anywhere.
And what a quick look it is: right on target! Deleting that asterisk (probably some debris from temporarily deactivating that piece of code with /*) puts the button tags right in the center again. Funny how one can overlook such a thing while scanning all those css tags.
Thank you very much (and to the other helpful contributions to my question - they all stimulate and sharpen the mind)!
H. Pelissier
Hi again Henri,
I'm totally baffled by the "chronology" of the messages exchanged in this thread:
It looks like I posted my second message before my first one.
And now I can see the screen shot in your first message, which I could not see when I posted my previous messages...
It would be easier to help you if you could post side by side what things look like in MSIE and in FireFox, and if you could provide the URL of your site online so we can see exactly what things look like "in vivo". Which version of Moodle are you using?
Anyway, using Windows XP, moodle 1.8.4 with the Chameleon theme I have exactly the same display of correctly centered button text in both FireFox 2 and MSIE 7 (see attached). Your problem may come from either using a different configuration from mine of from having modified things in Chameleon. Have you tried with a completely "fresh" Chameleon theme?
All the best,
Joseph
div.sideblock div.content * {
text-align: left;
}
The * has not been forgotten but is a usual CSS way to apply styles to all elements within a range - in this case to replace all Moodle centred text with left-aligned text in the sideblocks. This way you don't need to add "text-align: left" to several CSS definitions but only use one for al.
When you remove the asterix several texts in the sideblocks may be centred again.
I have checked the browser rendering case. The main issue was that the button had the same wide width as the input fields attached. Now one noticed that Firefox renders the buttons with some padding and IE doesn't. Therefor it looked strange.
I had a long and hard struggle to convince my enemy IE6. The struggle took some hours and this time I won using some hacks to force it to play nice with the buttons.
After creating the tracker issue MDL-13329 I updated the CSS to optimise padding and centring of the button text for IE and now the buttons look similar in the different browsers for 1.8.4, 1.9 and 2.0.
Urs,
* is often useful but it also "cuts both ways".
Here in chameleon user_styles.css
div.sideblock div.content * {
text-align: left;
}
replaces one text-alignment from standard theme styles_layout.css:
.sideblock .content div.info {
text-align:center;
}
but at the same time this * drops all text-alignments from all elements inside all sideblock content css tags defined before (for example all buttons) and changes text-alignment to left. 