Editor background \ CSS styling... confused!

Editor background \ CSS styling... confused!

by Gerrard Shaw -
Number of replies: 0

Just been working on our new theme and pretty much sorted everything until I came to the HTML editor and made up some pages...

The theme overall background is a light grey, now when using the topic section on the frontpage you get a nice 1px border and white background for the topic area.

However when using the HTML editor it's as if it's transparent and just shows the background colour i.e. grey... which looks terrible with images etc. Tried to select all the text and change background in the editor but it only changes around the text and not around images \ line breaks... not good.

Tried turning on HTML purifier... made it work once then it kept changing on refreshes \ edits so not really the way forward.

Wanted to use CSS to style the HTML pages, tried the stuff here...

http://moodle.org/mod/forum/discuss.php?d=120834

http://moodle.org/mod/forum/discuss.php?d=31607

Making a new CSS file called aardvark_userstyles.css and editing the config.php to show this so it loads up...

$THEME->sheets = array('aardvark_layout','aardvark_color','aardvark_fonts', 'aardvark_topmenu', 'aardvark_default' , 'aardvark_userstyles');

In the CSS file had this (tried 2 methods)

/***
*** HTML Editor
***/


.html_box {
text-align:right;
background-color:#B0E0E6;
border:1px solid black;
font-size:12px;
}

#red_box {
margin:0px auto;
text-align:right;
padding:5px;
background-color: #FF6699;
border:1px solid black;
font-size:12px;
}

Then in the HTML editor edited the text from Frontpage and pasted it into the editor's code view...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>


<div class="html_box">

<img hspace="0" height="95" width="126" vspace="0" border="0" title="Train" alt="Train" src="http://localhost/file.php/2/train_to_gain.gif" /> <img hspace="0" height="66" width="129" vspace="0" border="0" title="matrix" alt="matrix" src="http://localhost/file.php/2/MATRIXs.gif" /> <img hspace="0" height="62" width="130" vspace="0" border="0" title="nextsteps" alt="nextsteps" src="http://localhost/file.php/2/next_steps.gif" /> <img hspace="0" height="79" width="101" vspace="0" border="0" src="http://localhost/file.php/2/IIPs.gif" alt="iip" title="iip" /><br /><br />

Some Text

</div>

<div id="red_box">Hello World</div>

</body>

</html>

But didn't do a thing sad

All I want to do is have a white background on the HTML pages and indent a bit from the edge of the margin... basically what it does in the topic section page!

So close to being finished and so far away... help!

Edit: I've found I can get around it using inline CSS

http://moodle.org/mod/forum/discuss.php?d=118697

<div style="border: 1px solid black; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); padding-left: 15px; padding-bottom: 3px; padding-top: 3px;">

But why not from an external CSS file?
Average of ratings: -