I have a theme that I am nearly done tweaking, but I have one block in each course that needs to look different than the default appearance for all other blocks.
I know how to modify the appearance of "all blocks" in the css. But...
It is an html block that I add, and I need it to appear a different color than the rest of the blocks...how do I go about doing this?
Thanks much for your help in advance!
skin a single block? Have theme but need one html block to have a different appearance, how?
by D Armitage -
Number of replies: 7
In reply to D Armitage
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by Patrick Malley -
Do you have the Firefox Web Developer toolbar? If not, I've blogged about why you should have it, and given brief instruction on how to use it:
If you follow the instructions in my blog post and hover any element within the block that you want to style, you will notice that the block has a unique instance number.
For example, the "Moodle books" HTML block on Moodle's front page is div id="inst8886". If I were to add:
div#inst8886.block_html .content {
background: #000;
}
to a style sheet, I would make the content of only that one instance of html block black.
If you follow the instructions in my blog post and hover any element within the block that you want to style, you will notice that the block has a unique instance number.
For example, the "Moodle books" HTML block on Moodle's front page is div id="inst8886". If I were to add:
div#inst8886.block_html .content {
background: #000;
}
to a style sheet, I would make the content of only that one instance of html block black.
In reply to Patrick Malley
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by D Armitage -
Awesome! I use firebug, which is beautiful and helped me solve many problems but I NEVER paid attention to the instance! Thank you so much for this tip, it was exactly what I wanted to know!
In reply to Patrick Malley
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by chihuei lu -
I am using moodle 1.9.4 and I added
#inst137 .block_html .content {
background-color: #9cb6de;
}
to my style sheet, nothing changed.
#inst137 .block_html .content {
background-color: #9cb6de;
}
to my style sheet, nothing changed.
In reply to chihuei lu
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by Patrick Malley -
Your syntax appears correct. What theme are you using? Are you certain that your instance number is correct?
In reply to Patrick Malley
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by chihuei lu -
Here is my site http://sandbar.ldeo.columbia.edu/moodle/ I need to change the background color of "spotlight"
I added this code to style_layout.css, but the background didn't change.
#inst8 .block_html .content {
background-color: #9cb6de;
}
I am using foodle theme. http://moodle.org/mod/forum/discuss.php?d=116209
Thank you for your response.
I added this code to style_layout.css, but the background didn't change.
#inst8 .block_html .content {
background-color: #9cb6de;
}
I am using foodle theme. http://moodle.org/mod/forum/discuss.php?d=116209
Thank you for your response.
In reply to chihuei lu
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by Patrick Malley -
My apologies. Your syntax was not correct. After looking at your site, I realized that there should not be a space between the instance and .block_html.
The following should work:
#inst8.block_html .content {
background-color: #9cb6de;
}
The following should work:
#inst8.block_html .content {
background-color: #9cb6de;
}
In reply to Patrick Malley
Re: skin a single block? Have theme but need one html block to have a different appearance, how?
by chihuei lu -
Hi Patrick,
Thank you so much! I spent a lot time on this issue, and you solved my problem!! Thank you! Thank you!!
Thank you so much! I spent a lot time on this issue, and you solved my problem!! Thank you! Thank you!!