Themes

Header card resizing

 
Picture of Chris Canning
Header card resizing
 

Hi All,

I'm putting together a relatively simple Boost preset for my 3.4 site. I'm struggling with getting the header card to be one size (say 200px height) in the front page, but a smaller height on my course pages.

Oddly the header reduces it height when I enter an activity or a single activity based course (which is great!), but not when enter a regular Moodle course page with topics. 


Currently I have the below;


#page-header .card {

height: 200px;

background: url(http://careercolleges.org.uk/wp-content/uploads/2015/08/IMG_4654.jpg);

background-size: cover;

background-position: center;

}


.pagelayout-incourse #page-header .card {

height: 120px;

} 


div#page-navbar {

position: relative;

width: 100%;

}

#page-header .card-block {

position: absolute;

width: 100%;

bottom: 0px;

}


Any ideas why this is just affecting activities and not course pages?

thanks

Chris

 
Average of ratings: -
Gareth J Barnard
Re: Header card resizing
Core developersParticularly helpful MoodlersPlugin developers

Yes:

.pagelayout-incourse #page-header .card {
height: 120px;
} 

See: https://docs.moodle.org/dev/Themes_overview#The_different_layouts_as_of_21st_April_2013

 
Average of ratings: Useful (2)
Picture of Chris Canning
Re: Header card resizing
 

Thanks for the link Gareth, I see what I needed to add. I have now added an extra code for 'course to go with the 'in-course'

.pagelayout-course #page-header .card {
height: 120px;
} 

.pagelayout-incourse #page-header .card {
height: 120px;
}


Now working fine smile  

 
Average of ratings: -
Gareth J Barnard
Re: Header card resizing
Core developersParticularly helpful MoodlersPlugin developers

Or in CSS just have:

.pagelayout-incourse #page-header .card,
.pagelayout-course #page-header .card {
    height: 120px;
}

therefore less to maintain and go wrong.

 
Average of ratings: -