Essential Theme Block Heading Background Colour

Essential Theme Block Heading Background Colour

by Phil Everist -
Number of replies: 19

Hi


I really like the new essential theme - great work on the development.

Is it possible to adjust the background colour for the block heading? We have this in our current theme (solid colour, white text) and some user feedback from testing the new theme is that it would help them distinguish the blocks.

I tried .block.header.title {background:none; background-color:#488AC7;} in the CSS settings but it didn't work - any suggestions or I am trying to change something that shouldn't be changed? 

 thanks

Phil

Average of ratings: -
In reply to Phil Everist

Re: Essential Theme Block Heading Background Colour

by Torsten Händler -

try 

#block-region-side-post .block .header 

 {background:none; 

background-color:#488AC7;

}

Average of ratings: -
In reply to Torsten Händler

Re: Essential Theme Block Heading Background Colour

by Phil Everist -

Thanks for the suggestion - I tried the code you provided in the Custom-CSS entry area under the Essentials THEME general settings but it didn't make any difference to the headings.

I have attached what I entered and the default  grey block heading I'm trying to change. 


Phil


Attachment css_for_block_heading_background.png
Average of ratings: -
In reply to Phil Everist

Re: Essential Theme Block Heading Background Colour

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Probably remove '#block-region-side-post' as its almost certainly 'side-pre'.  No time to test or check!

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme Block Heading Background Colour

by Phil Everist -

Thanks Gareth - that worked.

is it possible to change the color of the icon in the block heading separately from the theme icon colour setting as well as the right justified docking icons in the block heading?  

I now have the following Custom  CSS changing the colour for the Title and background:

.block .header

 {background:none; 

background-color:#488AC7;

}


.block .header .title h2, .block h3.main {

    color: #FFFFFF;

}

Thanks -  Phil

Average of ratings: -
In reply to Phil Everist

Re: Essential Theme Block Heading Background Colour

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Phil,

You should be able to have a different colour for the icon, all you need is the css selector that adds the icon.

something like...

.block .header .title h2:before { color: pink; }

cheers

Mary

EDIT: fixed the typo in the css...ooops!

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme Block Heading Background Colour

by Ericka E. -

We've successfully used the code above to change the header of the blocks, but is there a code we could use to change the background of the entire block itself?
Any help is appreciated.

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme Block Heading Background Colour

by Ericka E. -

Also wondering if there is a way to prevent the block icons from overlapping the header background color?  Just a small thing, but if there's a way to change it.. smile



Average of ratings: -
In reply to Ericka E.

Re: Essential Theme Block Heading Background Colour

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers 
.block {
padding: 0;
}

.block .header {
background-color: #ed0;
padding: 6px 6px 4px 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

.block .content {
padding: 0px 6px 6px 6px;
}
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Essential Theme Block Heading Background Colour

by Marc Couture -

I'm looking into modifying only certain block headers (for example, the TOC in the Book module to make it more visible to users), while taking out the icons (by leaving "content" empty).  I tried adding something like this:

.block_book_toc .header .title h2::before {
background-color: #ffffff;
content: "";
font-family: FontAwesome;
}

But the modified background color doesn't stick.  There has to be a style somewhere that is overriding my changes, or I'm not modifying the correct block header.

Anyone have an idea?
Average of ratings: -
In reply to Marc Couture

Re: Essential Theme Block Heading Background Colour

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Use the ::before to apply the content:"" but not the background-color - you'll need to apply that to the .header or ,title or h2 depending on exactly what you want to achieve (as Gareth suggests, developer tools will help)

Average of ratings: Useful (1)
In reply to Marc Couture

Re: Essential Theme Block Heading Background Colour

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Try this instead: Which will remove the icon.

.block_book_toc .header .title h2:before {
  content: " ";
}

By the way there is only need to add one colon in a psudo class such as this.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential Theme Block Heading Background Colour

by Marc Couture -

I managed to take out the icons, but am still working on modifying the header's background color. 

Note: I am using Firebug to figure out what to modify, it's slow going but I'm getting there.

Average of ratings: -
In reply to Marc Couture

Re: Essential Theme Block Heading Background Colour

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

OK, well if it helps, the Essential theme paints every block white, whether you want it white or not.

The css used is this...

.block { background: white;}

To disable this you need to add this CSS...

.block { background: none;}

To disable that background and also add a new color you need to do this:

.block { background: none; background-color: #eeeeee; } or whatever colour code you prefer.

Cheers

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Essential Theme Block Heading Background Colour

by Zeid Fanous -

Hi Mary, 


I am trying to change colors of 4 different html blocks using their instance id...i followed your steps but i cant get it to change color ... can you please help... ? anyting else i should add???


I am using Moodle 3.1 with Adaptable theme.

#inst133.block_html.block.header {
        background-color: #890;
}


Thanks 



Average of ratings: -
In reply to Zeid Fanous

Re: Essential Theme Block Heading Background Colour

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You are adding too many things together...so try this instead:

#inst133.block_html .header {
        background-color: #890;
}

Notice the .header is separate and NOT connected like you wrote it.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential Theme Block Heading Background Colour

by Zeid Fanous -

I dunno what to say,


you're awesome ...thank you so much...


but can you explain to me the separation in .header for future reference

Average of ratings: -
In reply to Zeid Fanous

Re: Essential Theme Block Heading Background Colour

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

The separation relates to how the classes are in the html.

If the classes are on the same object, then there is no gap eg. the css for

<aside id="inst4" class=" block block_navigation  card m-b-1" aria-labelledby="instance-4-header" data-block="navigation" role="navigation">
could be written as
.block.block_navigation.card {css_rules:here;}

But if you are specifying selectors from different levels inside a 'parent' such as

<aside id="block-region-side-pre" class="block-region" data-droptarget="1" data-blockregion="side-pre">
<a class="sr-only sr-only-focusable" href="#sb-1">Skip Navigation</a>
<aside id="inst4" class=" block block_navigation card m-b-1" aria-labelledby="instance-4-header" data-block="navigation" role="navigation">
<div class="card-block">
<h3 id="instance-4-header" class="card-title">Navigation</h3>

Then your css might be written
.block-region   .block.block_navigation.card   .card-block   .card-title {css_rules:here;}

where the css selectors from different levels of the html are separated, but the css selectors that relate to the same html element are not.

Hope that helps
Average of ratings: -
In reply to Zeid Fanous

Re: Essential Theme Block Heading Background Colour

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Zaid,

You need to be familiar with both HTML and CSS to really understand this, but generally speaking you do not need to connect all CLASSES to an ID unless targeting a specific element, or because they already exist in a stylesheet and you want to customise that particular element.

In your case...

The HTML mark-up for that block will be something like this...

<div id="inst133" class="block-html block">
    <div class="header>
        <div class="title">
            <h2>...</h2>
        </div>
    </div>
</div>

As you can see the ID in this case in CSS is written as #inst133 and also has two classes attached to it. In CSS these are written as

  1. .block-html
  2. .block.

In this case you do not need both of these classes, in fact you should not need any as #inst133 is unique and so will work on it's own.

Notice, however, that the next <div class="header"> is not included here as that falls beneath in a separate division of it's own. And that is the reason for the separation in the final CSS..

#inst133.block_html .header {
        background-color: #890;
}

Hope that helps with your learning?

Cheers

Mary

Average of ratings: -