Add Banner via CSS to Clean

Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
Number of replies: 16

Hello people, I need help to add a banner using the CSS panel from the "Clean Theme".

More specifically I need help to set it properly since I already did the first part but I am stuck at finishing it.

This is on Moodle 3.2.1+ (Build: 20170209) with the default "Clean" theme.

Here is the screenshot of how It went and the code I put in the CSS Panel:



#page-header {
    background: 
url(DELETED-URL-banner.jpg) 
no-repeat scroll left center / 100% 100% rgba(0,0,0,0);
    margin-top: 0;
    margin-bottom: 0;
    height: 200px;
    width: 100%;
float: left;
}

.clearfix {
    *zoom: 1;
}
body,
 div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, 
fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
        margin-bottom: 0px;
    padding: 0;
}
#page {
    font-size: 100%;
}
.navbar.navbar-fixed-top { margin-top: 0px;}

At this point I don't even remember where I got those lines from, since I have been searching over and over trying to align the bar marked with pink UNDER the Banner with no success.

Please if someone can guide me without needing to edit the .php files and simply adding something to that code in the CSS Box I would greatly appreciate it.

Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

I would have added the image to the background of the page...

.pagelayout-frontpage #page {

margin-top: 200px; 

background-image: url();

background-position: left top;

background-size: 100% auto;

background-repeat: no-repeat;

}

Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
Hello, first of all thanks for your time trying to help me, really.
But now after replacing the previous code with yours now the Banner simply disappeared and nothing more happened.

Using both of them I got the same result as before showed in the screenshot. Am I doing something wrong? I can't fix it >_<
Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

 My idea was just a suggestion, if it did not work then there must be something that you are doing that is conflicting with the styles that are in both Bootstrapbase and Clean theme styles.

OK...PUT THINGS BACK TO HOW YOU HAD IT IN YOUR SCREENSHOT.

Now try adding the following CSS 

#page-header { 

min-height: 200px;

padding-top: 50px;

}

Also can you tell me where you are adding all these CSS changes?

Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -

Adding the code in the CSS Box, here you can see in the screenshot, under the own theme options inside "Themes > Clean"

BTW with your additional code the banner seems to fit better now but the issue remains and the navigation bar (it is the nav bar, the one I marked with pink in the previous screenshot, isn't it) keeps appearing over it in middle instead below.


Also as you can see there is no logo, not there neither in the Logo section, and I at some point gave up and tried other themes but I couldn't anyway modify them to make them look as I wanted, so instead I came back to fight against Clean and ask help here to add a banner only.

Thanks a lot really, I will follow further instructions.


EDIT:


I also tried doing "ONLY THIS":

Set a Logo (uploaded the banner )

Use only this code in the CSS Box

a.logo {height: 200px;}

body
{
width:1200px;
margin: auto;
}

Buuttt I only was able to see the top section of the banner, then increased the height and didn't change anyway.


I think YOUR idea of using it as a background is way better since that way it should be enable in every section, right? The problem is... it didn't work when I tried.

Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

Is it possible to see this website you are working on as it could just be the wrong styles for what you are trying to do...as there could be some conflict with the context header which is a part of the page header.

Thanks

Mary

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

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -

Hello, I'm sorry but I can't put the link since the site is not mine but I am trying to help a friend (because even I am mad about this issue now like something personal).

I noticed your code worked! But not as expected, anyway in the first line there is a " ( " instead a " { " , but took me some time to realize it.


Now, using it I can get the background as you said but still everything is on top of it. I tried this and still the margin-bottom didn't seem to work:

.pagelayout-frontpage #page {

margin-top: 0px; 
margin-bottom: auto; 

background-image: url(Deleted-banner.jpg);

background-position: left top;

background-size: 50% auto;

background-repeat: no-repeat;

}

I am leaving now, so I will try again tomorrow, I can't believe this to be that hard.

Thanks a lot for your help today, cheers and I will try tomorrow whatever you throw here lol.

Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

Geraldo...you left me!

Aquí me pongo á cantar
Al compás de la vigüela,
Que el hombre que lo desvela
Una pena estrordinaria,
Como la ave solitaria
Con el cantar se consuela.

OK...here is what I managed to do...It looks OK on my test server.

I finally added the banner to the body so that it can be seen on every page.

Here is a snapshot...

And here is the CSS I used:

body {
background-image: url(https://,,,.................................xrd2-banner.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}

#page {
margin-top: 240px; /* you may want to adjust this depending on the distance from the bottom of the banner to the title of the pages like course headers etc., */
}

Hope this helps?

hasta luago,

Mary

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

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
Yesss! It workeddd! Thanks a lot for your kind help and patience!

And yeah, I will adjust now the banner since that GuiltyGear Xrd was not mean to be used but I wanted to at least be teting with a picture I like hahaha.

Really thanks a lot!

Now I need to check the margin for the course headers as you said and few details, I hope I can do everything without taking more of your time but I think this thread will be useful for others at least!

Cheers and have a really nice day!
Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

Hi, That is fine...however, if you get stuck just let me know and I will be happy to help solve the problem for you.

I guessed the banner was just a test...

Glad it works OK now

Mary

Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
Well, I changed the top margin of the banner so the Navigation Bar won't hide part of it with this:

background-position: left 40px;

Now I need to hide what I think these are:

.page-context-header
.page-header-headings

So the sections names will not be shown over the banner, since they already are shown in the "page-navbar" which is described as .clearfix I think, and every course/section has its own banner so it is redundant.

I am using "Inspect  Element" with Firefox to check the options and try to adjunst parameters but I am not being really successful .
Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

Hi,

OK...the page-header is in the page section and is already styled so no need to make changes to header.

Leave the background-position: left 40px; and make #page margin-top bigger: Like this...

#page {
margin-top: 280px; /* you may want to adjust this depending on the distance from the bottom of the banner to the title of the pages like course headers etc., */
}
Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
No, I got what you stated before with that line and I already adjusted it, but anyway I want to remove the title of the header because the redundancy of it and to not get the whole content so low above the banner.

I will post a screenshot tomorrow since I can't right now, anyway it is the last thing I think, since the rest is looking ok and not giving me any trouble.

Thanks again anyway, and I really appreciate your help.
Cheers! Have a nice day!
Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

That's OK I understand its just that am using a very old Laptop computer and not my Test Server ... old technology is so slow!

I think I know what the problem is but to hide the header title and other stuff is ..to use this CSS

.page-header-heading,
.page-context-header {
    display: none;
}

Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -

Yay! Exactly that! Thanks a lot, I finally finished, I can't stress enough how much I thank you for your help. I am seriously considering starting to study PHP these days to at least not feel so useless when trying these things.


Well, also I hope this thread helps others since I searched a lot for this info and didn't find it the previous week, that is why I felt the need to ask directly here.

Have a nice day and thanks again!! Cheers!

Average of ratings: -
In reply to Mary Evans

Re: Add Banner via CSS to Clean

by Gerardo Ariel Moderne -
Oh, I forgot, when I resize the screen (Control - ) the background doesn't while the other elements do.
Is there a way to force Background to change resolution as zoom page level?
Average of ratings: -
In reply to Gerardo Ariel Moderne

Re: Add Banner via CSS to Clean

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

Hi,

This all depends on what you added to the CSS for the background-size: for the banner.

It should be

 background-size: 100% auto;

Average of ratings: Useful (1)