I've only thought about doing this but:
Each block has a unique id (e.g. block_participants), within the header there is a td with the class sideblockheading so it seems possible to create a unique header image to use as a background for that table cell.
#block_participants .sideblockheading { background-image: whatever.jpg;}
Then you could hide the heading text by setting display: none on the floated div that contains it. Therefore you could replace the hidden text with the same words embedded into the background image.
#block_participants .sideblockheading div { display: none;}
Unfortunately the edit controls for the block are also in a div immediately after the title and there is no differentiation between the two in the HTML at the moment. Also, display: none hides the text from screen readers and other accessability aids.
However, with a bit of fiddling with the HTML (just adding a span round the text to be replaced) you could probably use one of the more accessible versions of the Farhner Image Replacement technique.
thanks a lot.I've been playing with this and I've found that, for myself, these strings are correct and work with Firefox and IE both:
#block_private_messages .sideblockheading {
background-image: url(<?PHP echo "$themeurl"?>/whatyoulike.jpg);
height:22px;
}
#block_private_messages .sideblockheading div { display: none;}
Luca
Do you have a public server with this code working? I'd really like to see how it looks.
Also, an idea: It would be very neat if, since you already have PHP in the CSS, you checked the user's language code and looked for a localised image called whatyoulike_en_GB.jpg etc.
And even better would be if that file doesn't exist it defaulted to header_blank.jpg and didn't display:none the div text to allow standard display.
I hope that the results show up in the attached image (please consider that i've just started playing with this today, so please be kind
).The images used are jpg made with fireworks
Luca
wow..... cant wait until I have some free time to make some new themes!!!!
Very, Very, nice work!!!
Jeff
Any ideas... am I missing something elementary?
Jeff
I've made two templates with two diffent widths, it's the best solution I've found so far.
Luca
Hi Luca,
I did the same. The new template system will make all of this obsolete.
Great idea until then though....
Jeff
I think it's generally a bad idea to assume pixel-precise widths as that will break badly when users change text or window sizes.
You can take the easy way out and make the header as wide as you think it will ever need to be and position the text so it is still somewhat readable with the narrowest reasonable length.
However, this completely prevents you from doing what Luca has done in his screenshots which is to anchor things (the image and the text) to both sides of the header at the same time.
Unless you:
only put the image in the header, and position the text with standard CSS
create two images, attaching one to the top-left-hand corner of the entire block and attaching the other to the top-right-hand corner of just the
sideblockheading. If they overlap correctly then they will be able to flex slightly without breaking.
Alpha-blended PNGs let you achieve some beautiful effects with that last technique, but a certain browser doesn't support them unfortunately.
David,
On my installation of Moodle, the left side blocks are a constant size regardless of screen resolution or window size. The center column and the right column are set as a percentage.
If I could set the right column to display a constant size, this would work somewhat ok.... except for the fact that when you go to move or delete a block the arrows and such do not show up because of the "display:none" tag...lol.
Jeff
The course formats are defaulting to constraining such requests between 180 and 210 pixels, so if you want to go outside that range you have to edit the course formats too (open up any one, it's pretty self-explanatory in the first lines).
Maybe this would help?
Moodle man In dire need.
I'd like to help but I'm not sure I know where you're going wrong.
Is it just this particular header image that's troubling you or are you generally fuzzy on CSS/HTML, or maybe just the way it is used in Moodle?
Can you get simpler CSS to affect the headers e.g. change the background and text color?
As for changing the other images, try looking here:
http://moodle.org/wiki/index.php/Themes
In particular the section about the pix directory.
What file did you put the code in, I have tried working it into the CSS and also in the block php.
A little help please
what I've done is:
- edit the styles.php in your favourite theme.
- look for the .sideblockheading class
- under this class insert the following
background-image: url(<?PHP echo "$themeurl"?>/whatyoulike.jpg);
height:22px;
}
#block_private_messages .sideblockheading div { display: none;}
you should insert the above instructions for every heading you have, changing the image file according to the block you're working to.
I hope this helps you
Luca
But now I have one more request, where do I look to get rid of the padding inside the block, I want to replace the icons and links with other images, and i have yet it forces the heading to expand because of the padding. the heading image and the images inside are the same size. I have been looking in the css and in blocks_preferred_width. where do i look?
Thanks for all the help guys.
