I am just wandering what are the settings of the main page appearance on the front page of this site (moodle.org)? I like the way how headings ("Welcome to Moodle!"," Moodle Community" etc) look like. Could any one explain, is it just new look of labels or it is just custom code?? How can it be done?
Martin showed me how to do this a couple of weeks ago....
In 1.4.* put a label on the front page and use the <fieldset></fieldset> tags. The title is in <legend></legend> tags within the fieldset. Then add styles to change the way they are displayed.
On my crteacher.com site I just added legend { background-color: #something; } and fieldset {background-color:#somethingelse;} to the styles.php file.
Same thing for 1.5, but instead of Label, you can use the "Show Arbitrary HTML" in the site settings.
As Martin said... "it is a often underused bit of html..."
Jeff
In 1.4.* put a label on the front page and use the <fieldset></fieldset> tags. The title is in <legend></legend> tags within the fieldset. Then add styles to change the way they are displayed.
On my crteacher.com site I just added legend { background-color: #something; } and fieldset {background-color:#somethingelse;} to the styles.php file.
Same thing for 1.5, but instead of Label, you can use the "Show Arbitrary HTML" in the site settings.
As Martin said... "it is a often underused bit of html..."
Jeff
Thanks Jeff,
Your explanation made that "click" into place. Tried it out and there it was.
Next challenge, add a background image.... I had a look in 1.5 Standard "styles_color.css" and worked out how to add a background image. Feeling VERY pleased with myself I tried to view the page in IE - no background image.
Any ideas on what I need to do so it works in IE?
Your explanation made that "click" into place. Tried it out and there it was.
Next challenge, add a background image.... I had a look in 1.5 Standard "styles_color.css" and worked out how to add a background image. Feeling VERY pleased with myself I tried to view the page in IE - no background image.
Any ideas on what I need to do so it works in IE?
It is very possible that IE has not refreshed correctly. What is the url of your site? I will go look. Also, post the code you used to put a background image in...
Jeff
Jeff
Jeff,
You were right. Just loaded IE and looked at the course again (on laptop) back ground image is displayed OK.
Here's the code anyway:
legend { background-color: #ffffff; }
fieldset {background: url('../../pix/cloud1.jpg') right;
}
Thanks.
p.s. in F/F the corners of the box do not quite meet, in IE they're perfect. Any thoughts on that? Code used below:
<fieldset><legend> Title of this section
</legend>Here is the text for this one </fieldset>
You were right. Just loaded IE and looked at the course again (on laptop) back ground image is displayed OK.
Here's the code anyway:
legend { background-color: #ffffff; }
fieldset {background: url('../../pix/cloud1.jpg') right;
}
Thanks.
p.s. in F/F the corners of the box do not quite meet, in IE they're perfect. Any thoughts on that? Code used below:
<fieldset><legend> Title of this section
</legend>Here is the text for this one </fieldset>
Can you show me an example?
Jeff
Jeff
Here's a small screenshot from Firefox. If you would like the theme files, let me know and I'll post them, but it'd just a Standard theme with the above code included. I noticed the same thing in Koen's post below.
Thank you very much for your explanations. Now everything is clear.
Hi,
Martin is using the <fieldset> tag in a very creative way .
W3C Definition of Fieldset
The <fieldset> and <legend> tag validates without containing form elements - surprisingly.
What about using them to clean up the admin pages?
Urs
And background images/colours too, perhaps images/colours for particular course topics....
I wonder why simply modifying the sitetopiccontent class does not work and one has to add fieldset and legend tags with custom class. I have tried that unusuccessfully in 1.4.4. It seems to be that this class should govern the appearance of the text in top topic box.
Because fieldset and legend are very specific tags that your browser renders differently to a plain box.
But this explains why fieldset and legend work but not why sitetopiccontent style does not work. There is no fieldset and legend in the default code in 1.4.4 and sitetopiccontent is the class of the td element bracketing the plain text. Yet, the class definition seems to be ignored.
Martin (anyone),
The only thing I've not figured out in trying to replicate your moodle.org middle-section setup is how to vertically align that section so it coincides horizontally with the tops of the adjacent sideblocks. On mine, it appears that the middle section, whether a fieldset or table, sits about 1px lower than the surrounding blocks. I know (I think) this has to do with the sitetopiccontent, but I've not been able to alter it successfully.
Thanks,
Stuart
The only thing I've not figured out in trying to replicate your moodle.org middle-section setup is how to vertically align that section so it coincides horizontally with the tops of the adjacent sideblocks. On mine, it appears that the middle section, whether a fieldset or table, sits about 1px lower than the surrounding blocks. I know (I think) this has to do with the sitetopiccontent, but I've not been able to alter it successfully.
Thanks,
Stuart
Jeff (anyone),
Can you elaborate on this a little? Be warned, I'm totally new to PHP and CSS, but I think I'm beginning to understand it. I'm running 1.5 and setup the site to use arbitrary HTML, added the fieldset and legend bits you mentioned to the summary of the default section, and this basically lays things out correctly in the middle of the main page. Where I'm getting stuck is on getting the theme elements to apply to this section so it looks like one of the adjacent sideblocks. My issues/problems:
1) For the life of me, I've not been able to replicate the theme (formal white) elements from the side blocks (header, title, background, and so forth). This is where I'd like more detail from you about which styles.php file you edited and exactly what changes you made.
2) After having saved the summary, if I go back into edit it, the fieldset and legend tags have been stripped and the HTMl view doesn't reflect that formatting...any clue why?
Thanks!
Can you elaborate on this a little? Be warned, I'm totally new to PHP and CSS, but I think I'm beginning to understand it. I'm running 1.5 and setup the site to use arbitrary HTML, added the fieldset and legend bits you mentioned to the summary of the default section, and this basically lays things out correctly in the middle of the main page. Where I'm getting stuck is on getting the theme elements to apply to this section so it looks like one of the adjacent sideblocks. My issues/problems:
1) For the life of me, I've not been able to replicate the theme (formal white) elements from the side blocks (header, title, background, and so forth). This is where I'd like more detail from you about which styles.php file you edited and exactly what changes you made.
2) After having saved the summary, if I go back into edit it, the fieldset and legend tags have been stripped and the HTMl view doesn't reflect that formatting...any clue why?
Thanks!
Hi Stuart,
Re. 1) I'd highly recommend you check the Moodle Themes documentation and, if you've not done so already, get Firefox and install the web developer extension. Its "Edit CSS" feature allows you to easily check styles.php and experiment with changes to it.
Re. 1) I'd highly recommend you check the Moodle Themes documentation and, if you've not done so already, get Firefox and install the web developer extension. Its "Edit CSS" feature allows you to easily check styles.php and experiment with changes to it.
Thanks Helen.
I hadn't tried the FF extension, pretty slick, but I had been looking at all of what it showed in Dreamweaver, so it didn't give me any answers.
It's a bit frustrating...I've reviewed the source for the main moodle.org page, and am following the structure of the fieldset and legend tags (I'm trying to apply the existing sideblock styles from the formal white theme) but it's just not taking. I guess I need to keep plugging away at this...I must not be referring to the classes I need correctly (class="sideblock", class="sideblock_header", and class="sideblock_content" haven't gotten me anywhere).
Interestingly, problem 2) went away after upgrading to 1.5.2
I hadn't tried the FF extension, pretty slick, but I had been looking at all of what it showed in Dreamweaver, so it didn't give me any answers.
It's a bit frustrating...I've reviewed the source for the main moodle.org page, and am following the structure of the fieldset and legend tags (I'm trying to apply the existing sideblock styles from the formal white theme) but it's just not taking. I guess I need to keep plugging away at this...I must not be referring to the classes I need correctly (class="sideblock", class="sideblock_header", and class="sideblock_content" haven't gotten me anywhere).
Interestingly, problem 2) went away after upgrading to 1.5.2
OK...after doing a LOT more messing with this, I've had some minimal success in changing how this section appears (editing the summary of the default "topic" in the middle of the main page when you set your site to use "arbitrary HTML"). I have two stumbling blocks to overcome:
1) Why can I change the border-color and background-color of the "sitetopiccontent" class in the copy of the formal white fw_color.css file but I can't override it by adding my own mymoodle.css file?
2) How to make the "header" of the section look like that of the adjacent sideblocks.
The best I've been able to achieve, and this follows Martin's lead by using the fieldset and legend tags, was to get the legend formated into a "box" with the correct border-color but not the correct background-color or font (not the same as the sideblocks). I'm still tracking down the classes that control this, but if someone could point me there I'd be eternally greatful.
1) Why can I change the border-color and background-color of the "sitetopiccontent" class in the copy of the formal white fw_color.css file but I can't override it by adding my own mymoodle.css file?
2) How to make the "header" of the section look like that of the adjacent sideblocks.
The best I've been able to achieve, and this follows Martin's lead by using the fieldset and legend tags, was to get the legend formated into a "box" with the correct border-color but not the correct background-color or font (not the same as the sideblocks). I'm still tracking down the classes that control this, but if someone could point me there I'd be eternally greatful.
Nothing like talking to yourself online... 
As for 1), who cares? After all, the copy of the style you're customizing IS your own .css file. Duh.
So...you CAN make the "sitetopiccontent" class border-color and background-color match the overall colors to make them "invisible", just like Martin did with the moodle.org site. One problem down...yea!
As for 2), here I've created new classes "topiclegend" and "topiccontent" and setup the border-color, background-color, font-family, font-size, font-weight, etc. to match those of the copied theme components I'm trying to emulate (sideblocks). I'm getting VERY close now...yea!
Who knows, at this rate I'll actually be able to contribute some code to this project in a few years...
As for 1), who cares? After all, the copy of the style you're customizing IS your own .css file. Duh.
So...you CAN make the "sitetopiccontent" class border-color and background-color match the overall colors to make them "invisible", just like Martin did with the moodle.org site. One problem down...yea!
As for 2), here I've created new classes "topiclegend" and "topiccontent" and setup the border-color, background-color, font-family, font-size, font-weight, etc. to match those of the copied theme components I'm trying to emulate (sideblocks). I'm getting VERY close now...yea!
Who knows, at this rate I'll actually be able to contribute some code to this project in a few years...
Stuart,
Can you post a link to your site? I'll take a look and help any way I can with this.
I do the same thing with the SiteTopicContent stuff... basically make it invisible.
I should be able to help with the css if I know exactly what you are trying to do.
Regards,
Jeff
Can you post a link to your site? I'll take a look and help any way I can with this.
I do the same thing with the SiteTopicContent stuff... basically make it invisible.
I should be able to help with the css if I know exactly what you are trying to do.
Regards,
Jeff
Jeff,
Unfortunately the site is still in development on my PC, but I'm getting close enough on the layout stuff to start thinking about hosting. At this point, the only things I've not been able to figure out via css is how to adjust the height/width of the legend. I have the border and background colors correct, and am getting close on the font...haven't quite matched it to the sideblock headers exactly yet. On the legend sizing, I've tried overtly stating the height/width in the tag and in the class for that tag, but nothing has changed yet. Martin's code for the moodle.org main page only lists a class for his legend tag, so it must be doable solely in css.
Also, as I noted above, the disappearing fieldset/legend tags "feature" went away after I upgraded to 1.5.2...no clue if that was a fix, or if my 1.5+ install was a little twitchy. I'm just glad it's stable now.
Edit: was reading your other response and saw your padding statements...that answers my issue about sizing the legend, thanks!
Thanks!
Stuart
Unfortunately the site is still in development on my PC, but I'm getting close enough on the layout stuff to start thinking about hosting. At this point, the only things I've not been able to figure out via css is how to adjust the height/width of the legend. I have the border and background colors correct, and am getting close on the font...haven't quite matched it to the sideblock headers exactly yet. On the legend sizing, I've tried overtly stating the height/width in the tag and in the class for that tag, but nothing has changed yet. Martin's code for the moodle.org main page only lists a class for his legend tag, so it must be doable solely in css.
Also, as I noted above, the disappearing fieldset/legend tags "feature" went away after I upgraded to 1.5.2...no clue if that was a fix, or if my 1.5+ install was a little twitchy. I'm just glad it's stable now.
Edit: was reading your other response and saw your padding statements...that answers my issue about sizing the legend, thanks!
Thanks!
Stuart
Stuart,
E-mail me your theme and I will drop it in one of my test sites and you can play with it live.
Jeff
E-mail me your theme and I will drop it in one of my test sites and you can play with it live.
Jeff
Thanks, but I have it all sorted out now. I was unable to figure out how to alter the fieldset border attributes, so I gave up and used a table instead. This was necessary for another reason, namely getting the header and overall structure to match that of the sideblocks.
All is well on this end, and I think I finally have the hang of themes and css (woohoo!).
All is well on this end, and I think I finally have the hang of themes and css (woohoo!).
Sorry Stuart for the delay in answering, I just now saw this post.
In one of your stylesheets, I use the color one, you need to add the following:
fieldset {
border-top: 1px solid #6A7898;
border-right: 1px solid #6A7898;
border-bottom: 2px groove #ddd;
border-left: 1px solid #6A7898;
background-color: #FFFFFF;
}
legend {
font-size: 14px;
color:#FFFFFF;
border: #DDD solid 1px;
background-color:#bdd3eb;
padding: 1px 10px;
}
Now you can change the colors or add graphics the way you normally would in a stylesheet.
I do not know why it strips the tags when you go back into the editor. It does it to me too, I just replace the tags. I guess it might be a bug and should be reported.
Jeff
In one of your stylesheets, I use the color one, you need to add the following:
fieldset {
border-top: 1px solid #6A7898;
border-right: 1px solid #6A7898;
border-bottom: 2px groove #ddd;
border-left: 1px solid #6A7898;
background-color: #FFFFFF;
}
legend {
font-size: 14px;
color:#FFFFFF;
border: #DDD solid 1px;
background-color:#bdd3eb;
padding: 1px 10px;
}
Now you can change the colors or add graphics the way you normally would in a stylesheet.
I do not know why it strips the tags when you go back into the editor. It does it to me too, I just replace the tags. I guess it might be a bug and should be reported.
Jeff