changing the colour of the words in the block title

changing the colour of the words in the block title

by Mary Cooch -
Number of replies: 8
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
Any way this can be done without having access to the files on the server? I've tried coding it in but I still get the regular black colour sad
Unless I'm coding it wrong, which is quite possible!

Average of ratings: -
In reply to Mary Cooch

Re: changing the colour of the words in the block title

by Itamar Tzadok -
Have you tried

<span style="color:red;">Block title</span>

?

smile
In reply to Itamar Tzadok

Re: changing the colour of the words in the block title

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
yes - that's what I've tried and it's still black.sad It's the standard logo theme and for this Moodle I don't have access to the actual files so I'm trying to improvise within the block title -but no luck .
In reply to Mary Cooch

Re: changing the colour of the words in the block title

by Itamar Tzadok -

Then it might be that the 'Trust submitted content' capability is not allowed for the role you have unless you are an administrator to whom it should be allowed by default.

If that too doesn't work I have a workaround for you which may work at least on the main page. Each block is uniquely identified and the block title of a block an h2 tag. So you can add local css definitions on the page for setting the color (and other styles) of particular titles by means of the #block-id h2 css definition.

How to do it:

  1. Create an Html block and place it (or leave it) in the bottom right corner of the page.
  2. Edit the block and in text mode add the following lines:
    <div id="myStyles"></div>
    <script type="text/javascript">
    var styleHtml;
    styleHtml+='<style>';
    styleHtml+='#inst------ h2{color:red}';
    styleHtml+='</style>';
    if(document.getElementById("myStyles")){
    document.getElementById("myStyles").innerHTML=styleHtml;
    }
    </script>
  3. Substitute ------ for the actual instance id of the designated block. You can get this number by simply hovering over the block edit link (in editing mode) and observing the url which should specify the instanceid number as a parameter.
  4. Save and close.
  5. The designated block title should appear in the new color as soon as the page is refreshed.
You may observe that the definitions block appears on the page although in a minimal way. We can make it completely invisible and I actually wrote in details how, but that part was truncated from this message for some reason. I'll write it again if you're interested. Let me know.

smile
Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: changing the colour of the words in the block title

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
Ok Itamar - first of all, I am admin (but not root admin) and I can't find 'trust submitted content' in system capablities - I have enabled it in security>site policies but it hasn't made a difference. Am I looking in the wrong place? I am on 1.9.3 but if I look on one of my practice Moodles which is an earlier 1.9.2 I can find it no trouble.

I'd be very interested therefore in your extra details in making in invisible, when you have time, as I have a feeling I'm going to be asked to change the colour of all our block titles to our school colours and your 'fix' seems very suitable smile
In reply to Mary Cooch

Re: changing the colour of the words in the block title

by Itamar Tzadok -
Have you looked for 'trust submitted content' under Users->Permissions->Define Roles->Administrator->Capabilities|Course? I can see it in Moodle Demo (1.9.4) exactly where I see it in 1.9.2. If the capability is 'Not Set' then setting it to Allow should do the trick. smile
In reply to Itamar Tzadok

Re: changing the colour of the words in the block title

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
Yes- that's precisely where I looked the first and second times...and then when I looked again a third time...veeeeerrrryyy slowly down the huge list of capabilities -there it was! Missed it by rushing the first two times. But -as you might expect - it is already set to allow... yet makes no difference sad
However.... your other fix works a treat! And presumably I just repea the process for the other blocks too? How do I make that block invisible on the page please?
In reply to Mary Cooch

Re: changing the colour of the words in the block title

by Itamar Tzadok -
Okay then, let's add invisibility but also make the fix a little bit more flexible.
  1. Create a text file and add to it the following lines:

    // detect edit mode
    var arTmp=document.getElementsByTagName("body");
    var theBody=arTmp[0];
    var editMode=theBody.className.search(/editing/gi);

    // Hide blocks when not in editing
    if (editMode==-1) {
    // style definitions block
    document.getElementById("inst------").style.display="none";
    }

  2. Again, substitute ------ for the instance id number of your definitions block. The block will be visible only when the page is in editing mode.
  3. Add to the file those style definitions you currently have in the block:

    var styleHtml;
    styleHtml+='<style>';
    styleHtml+='#inst------ h2{color:red}';
    styleHtml+='#inst------ h2{color:red}';
    styleHtml+='#inst------ h2{color:red}';
    styleHtml+='#inst------ h2{color:red}';
    styleHtml+='</style>';
    if(document.getElementById("myStyles")){
    document.getElementById("myStyles").innerHTML=styleHtml;
    }

  4. And as you can see you can add as many styles as you want.
  5. Save the file with suffix js (e.g. myStyles.js) and upload it to the course/site Files.
  6. Now you go back to the html block and in text mode clear its content and add the following lines:

    <div id="myStyles"></div>
    <script src="-------------------/myStyle.js" type="text/javascript"></script>

  7. Substitute ------------------- for your js file path.
  8. Save and close.
  9. The styles should appear as soon as the page is refreshed and the definitions block should be invisible when the page is not in editing mode.
  10. For modifying the styles you don't have to open the block. You simply go to the file, edit it, make the desired changes and save. Then you may need to refresh the cache and the page for the changes to apply.
Let me know how it works.

smile
Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: changing the colour of the words in the block title

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
I'm back at school tomorrow (after holiday) and when they tell me which colour they want I'll give it a go and letyou know - many thanks smile