Layout issue of Moodle webiste with Eguru Theme

Layout issue of Moodle webiste with Eguru Theme

by Schwann Chan -
Number of replies: 7

Hi All,

I am developing the Moodle website with Eguru theme, and I have a problem with the website layout. The Eguru theme displays three columns on the webpage, and remains blank blocks on both 2 sides. 

Now I want to expand the three columns (including the navigation bar) and shrink the 2 blank blocks. I am not familiar with Moodle so I have no idea about how to customize the layout. I think I may modify some source codes in "layout" file, but I don not know the exact part and how to modify it. I noticed that you are experienced in Moodle development. Hope some of you could help me to solve this problem. Thank you!

Moodle website layout with Eguru theme

Average of ratings: -
In reply to Schwann Chan

Re: Layout issue of Moodle webiste with Eguru Theme

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

The max-width of Moodle Themes is 1600px. I suggest you alter that to 100%.

Average of ratings: -
In reply to Mary Evans

Re: Layout issue of Moodle webiste with Eguru Theme

by Schwann Chan -

Hi Mary,

Thanks for your reply, and I modify the max-width from 1140px to 100% in "eguru.css", but it remains the same. There are still two wide margins on both sides. 

eguru.css

Average of ratings: -
In reply to Schwann Chan

Re: Layout issue of Moodle webiste with Eguru Theme

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

Hi,

You need to set the width. So add width: 100%; as well as max-width: 100%; that then ensures the  container remains fluid for all devices.

So your CSS should look like this...

.container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

I write the margin like this margin: 0 auto; but it is optional so you can leave it the way you did it with margin-left: auto; margin-right: auto;  it means the same except mine is shorthand. smile

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Layout issue of Moodle webiste with Eguru Theme

by Schwann Chan -

Hi Mary,

Thank you for your advice. I modify the source code just as what you say, but the webpage still keeps no change...

eguru.css

Moodle webpage remains the same

Average of ratings: -
In reply to Schwann Chan

Re: Layout issue of Moodle webiste with Eguru Theme

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

In that case add the following:

#page.container-fluid {
    max-width: 100%;
    width: 100%!important;
    margin-right: auto;
    margin-left: auto
}

Average of ratings: -
In reply to Mary Evans

Re: Layout issue of Moodle webiste with Eguru Theme

by Schwann Chan -

Hi Mary,

I figured it out. I added these codes to Theme general custom CSS, and it finally worked. Thank you for you help!

Average of ratings: -
In reply to Schwann Chan

Re: Layout issue of Moodle webiste with Eguru Theme

by Schwann Chan -
If you have already modified the source code as above, but the layout remains the same, add those code to "Custom CSS" on "General" of the theme.

Directory

Custom CSS

Average of ratings: -