Moodle in English: I want to add wave like appearance in header of boost theme

Themes

I want to add wave like appearance in header of boost theme

This discussion has been locked because a year has elapsed since the last post. Please start a new discussion topic.

I want to add wave like appearance in header of boost theme

by Rahul Khatri - Thursday, July 4, 2019, 5:38 PM

I want to create a header in which must has wave like appearance similar to below image, in boost theme, for mobile screen. I am using moodle v3.4.

I want to remove the gray area from content of boost theme my which content will take maximum width, for mobile screen.

This image is of degrade theme: https://moodle.org/plugins/theme_degrade

Degrade Theme

Re: I want to add wave like appearance in header of boost theme

by Anthony Rimmer - Friday, July 5, 2019, 4:53 PM

Hi Rahul,

Personally, I would recommend creating a child theme based on Boost so that you can maximise your styling options:
https://docs.moodle.org/dev/Creating_a_theme_based_on_boost

Alternatively, you could add styling in the Boost theme using a preset file (https://docs.moodle.org/dev/Boost_Presets) or direct via settings (Site Administration > Appearance > Boost (Theme) > Advanced Options.

You'd probably want to add something similar to this to the Raw SCSS section so that it is added at the end and supersedes the default styling:

header#page-header {

	background-color: transparent;
	background-image: url("url_to_my_hosted_wavey_header.png");
	background-size: cover;
	background-position: center top;
	margin-bottom: 16px;
}

header#page-header .card {
	background: transparent;
	border :none;
}

I'm note sure what you mean by grey area? - Do you mean the border?

I hope this helps,

Anthony

Average of ratings:Useful (1)

Re: I want to add wave like appearance in header of boost theme

by Rahul Khatri - Monday, July 8, 2019, 8:54 PM

thanks

Average of ratings: -