Hi!
Does somebody can help me with problem; I would like to change the color of each block header so that each block header has different color. Can somebody tell me how I can do that? I have tried to put in core.css part:
.block_navigation header {
background #fff;
}
But there is no effect.
Thank you.
Ivica
Hi,
The reason you are not seeing the changes could be because of something you are doing wrong, like the way you write the CSS, or the fact you have not enabled Theme Designer Mode.
The CSS you posted is actually wrong. It should look like this...
.block_navigation.block header {
background-color: #fff;
}
Then you can do that for each block that has it's own class selector name...
.block_settings.block header {
background-color: #abc;
}
but some blocks like HTML blocks all use the same class selector name, so in this instance you would need to add the instance id like so...
#inst93.block_html.block header {
background-color: #901;
}
and like this...
#inst1033.block_html.block header {
background-color: #890;
}
You can find the 'instance' ID in the page source code. In Moodle it is this for the settings block...
<div id="inst182232" class="block_settings block hidden" aria-labelledby="instance-182232-header" role="navigation">
So the code for this would be...
#inst182232.block_settings.block
Cheers
Mary
Hi!
I have put server in course design mode, and using Magazine theme, and I have changed color of all block heading in part of core.css in section .block div.header , and I have written on the bottom of core.css:
.block_navigation.block header {
background-color: #fff;
}
But color of header of block navigation is not changed.
Ivica
That's because there is an image in the block header. Dark colours show through it better than white as it is already a pale shade of grey.
Try this...
.block_navigation.block header {
background-image: none;
background-color: #fff;
}
That should fix it.
Mary
I'm sorry but there is no change.
Ivica
I think the issue may be caused by the fact that in Magazine that background colour and image are written in 'shorthand' ie that the whole background is set in one css rule (in my copy on 2.4 its on line 333 of core.css)
background: #eeeeee url([[pix:theme|bart5]]) repeat-x;
I have made this work by commenting out that line (as you obviously have access to the files) and then adding the following to the bottom of the core.css file
.block_navigation .header {
background-color: red;
}
.block_settings .header {
background-color: blue;
}
Which gives the colours as seen in the screen shot attached. Mary has already given you the directions for applying different colours to different blocks and what is needed where several blocks of the same type are included (e.g. html blocks)
Hope that helps
Richard
There was an error in the code I forgot to add a . infront of header so it should have been .header
Anyway try this instead...
.block_navigation.block .header {
background: none;
background-color: #fff;
}
Thank you very much. Everything is OK.
Ivica
Hi Mary,
How do we change the width of .block_navigation.block .header ?
it overlaps with the dotted lines.
Thank you very much.
Jeff
If the Navigation block header only is not displaying correctly then there is something wrong, as all headers are styled the same, so if one is out of line, then all the others will be too, so this is a theme problem, rather than an individual block.
If you can tell me the name of the theme I will have a better understanding of the problem.
Mary
Hi Mary,
Thank you for your response, I'm using the magazine theme of Moodle 2.4, all the blocks overlaps on the vertical dotted lines/div and that's the way it was defined,
I would like to reduced the width of all the blocks so that it doesn't overlaps on vertical dotted lines/div
Thanks in advance,
Jeff
As far as I can see on our QA Moodle test website there are no vertical lines in the Magazine theme. The only dashed line I can see is the horizontal line beneath the header.
how can i change the color of block heading area when it docked ?
Thanks
Thank you Mary!!
One more help i need. Is there any way to fixe the blocks as docked for front page for all the users? Doesn't want student to bring them down on front page. For other page they will be free to play around from blocks.
thanks in advance !
You can hide the blocks on the frontpage if you want to. Just edit each block in turn and make it 'hidden' on the frontpage.
no!! i need to keep them as docked on front page. becsue when i am not using course catalog and in that case blocks are creating empty space in center zone of main_content. so alternatively, i can dock blocks on front page to overcome this issue.
Hi Mary, I don't want to bother with this but I've been trying to change the
background color in the calendar block (the blue band) without any
success. I modified the codes you shared but I had no luck.
In
the index of the site the instance ID is inst35 but in my personal page
it seems to be inst12. I'd like to change it to #f98012 (orange)
because I have many blue blocks. This
is the code I tried, is anything wrong about it? Thanks in advance for any tip or suggestion!
Hi Miguel,
You did not say which theme name & version or Moodle version.
Some themes are coded wrong so may be you need to Purge all cache for it to work.
Also I would have thought that this CSS would have worked for both:
.block_calendar_month .header { background-color: #f98012; }
Hope this helps?
Mary
Hi Mary, thanks a lot for your reply! I'm so sorry, I'm quite new in this forum and I completely forgot the details. I'm using the Aardvark theme (beautiful) on Moodle 3.2.1.
I tried the code you gave me and purged all cache but still doesn't work :\
Thanks again, Mary!
Let me test it on my server and I will get back to you later...OK?
Thanks
Mary
Of course, that's very kind of you Mary. Thank you very much!
Ah...it's the Aardvark theme CSS for blockicons. It is styled via the header title h2 heading so you will need to use this CSS instead.
.block_calendar_month .header .title h2 {
background-color: #f98012;
color: #fff;
}
Mary
Thank you very much Mary, but I had not luck. I'll continue digging into this and I'm sure that sooner or later I will make it work (and I'll post it here, maybe it could help somebody else). Thank you very much for showing me the right track!
I GOT IT TO WORK ON MY WEBSITE!
http://vle.bylazydaisy.co.uk/?theme=aardvark
I also have docking blocks too!
Mary
Wow, that's weird! I did it again, saved the changes and cleaned all cache too. Check it out. Maybe a permission problem? :\
Looks like your site is still in Maintenace mode...
This stops the database from storing new data...so the changes are not registering.
Turn OFF Maintenace Mode and try again?t
Mary
Oooh sorry about that, it seems that you visited the site while I was doing some changes. With maintenace mode disabled, I deleted all the custom css, saved the changes, purged all cache. Then, I added the custom css again, and still doesn't work. I don't think it's de css code, it's like moodle doesn't load it at all. It looks like this right now:
It's a shared hosting (there are a lot of folders I don't have access to), I don't know if it has anything to do with this
issue. Maybe there's a permission problem, no idea. I also used
Mozilla's developers tool and if you go to the CSS tab there's a lot of
code being skipped. And... I tried adding a "footnote" but it doesn't load either. I don't want to bother you with this anymore Mary, it's more help than I ever expected, thank you very much for that.
Hi,
I am fixing some problem with Aardvark for Moodle 3.2 as there are some layout issues with the three column pages, especially if only the page had left blocks and main content but NO right hand blocks, then the page is all distorted! If you removed the summary block off your sites frontpage then you will see the problem.
The CSS is something else and could be a Moodle issue. There are lots of things being changed in Moodle that relate to the Boost theme, but these changes may be affecting Bootstrapbase...but I am not sure as I am not that familiar with Moodle core development.
I'll continue to take a look at your site and see if I can solve the issue there.
Thanks
Mary
Hello again,
Do you know which version of Aardvark that you are using?
Thanks
Mary
Hi Mary, thank you very much for all your efforts, I understand the situation. My version is theme_aardvark_moodle32_2016081900. Thanks again!
