Customizing logo in eGuru

Customizing logo in eGuru

by Faye Weber -
Number of replies: 20

Hi,

I just installed Moodle today and am using the eGuru theme. I really like it. 

I am trying to customize the top logo and header (top where it's purple).

I changed my logo fine and was able to make it the size I wanted. 

The next thing I would like to do is make it centered, instead of to the left. I can't figure out where to do it. I tried the logo section in the theme's css, adding to align middle or center, and tried a code with 'block' and margin: auto' (not exactly like that) but it still won't center.

The second thing I would like to do is change my header to a background image, instead of the purple. 

I was able to find a section to change that in the css as well but what I did didn't work. How can I change the purple color to a background image? 


Thanks!

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Technically we need to know the Moodle version you are using as things work differently in the various versions we have at the moment, logo being one of the elements that has seen four changes.

That said all you need to do to center the logo is add this

background-position: center top ;

or this

background-position: center center;

to the CSS you added to style it already.

Hopefully that will work.

As for the header, well that's a bit complicated as there is no way to add an image specifically for it.

the CSS is easy though.

#page-header {
    background-image: url(  );
    background-repeat: no-repeat;
    background-position: left top;
    background-color: transparent;
}

All you need is a URL for the image, So adding one to a site like Flikr you can find the hyperlink address for your image and then add it into the background-image CSS where I left a gap between the curved brackets.

Cheers,

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

Thank you. I was able to get my header image (and footer) changed and how I want it. 

I also figured out how to center my logo.

To answer your question, I am using Moodle version 3.0.3

Now, the next problem I'm having is changing the text color up in the header where it has links for "Home", "courses" and login. By default it is white because the original background is purple but it doesn't show up on my new background.

I need to change that text and the footer text. 

Can someone please help me find the files that need to be found to change the text color for header and footer? 

Just as a reminder, I'm using eGuru. Thanks!

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Hi,

You could try using FireBug or any browsers Web Developer tools.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

Ok, I have no idea what those are.

There is seriously no easy way to change a color of sections of text? 

After all the trouble I'm having I'm wondering if I should just give up. 

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Hi,

If you gave me the address of your Moodle site then I would be able to help you, because without knowing what actual changes you have made I cannot really help you.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

Sure. http://onlineclasses.genesisspiritualhealing.com/

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Hi,

Well whatever you have done has totally broken the theme. This is becaus you are not adding your CSS correctly.

This is what you have...

#header .header-logo {
    margin: 10px 0
    background-position: center top ;
}
.dir-rtl #header .header-logo {
    float: middle
    background-position: center top ;
}
#header .header-logo a {
    display: block
    background-position: center top ;
}

And this is what it should be...

#header .header-logo {
    margin: 10px 0;
    background-position: center top;
}
.dir-rtl #header .header-logo {
    float: none;
    background-position: center top;
}
#header .header-logo a {
    display: block;
    background-position: center top;
}

You are missing the semicolon from the ends of the middle line of the CSS.

Also...so you can see the other errors that appear in the eguru.css file, I am adding the results of a an only CSS validation CLICK HERE

since if you did not add those styles then the CSS is flawed and needs to be fixed by the Theme maker.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

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

Further to my last comment a little earlier, here is the header and footer CSS to change the text color: The color is the same blue as your site logo blue lettering is.

#footer .footer-desc p {
    color: #02ABF9;
}

#header .custom-menu > ul > li > a {
    color: #02ABF9;
}

Hope this solves the problem?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

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

Still more CSS for the footer...

#footer .footer-main h4 {
    color: #02abf9;
}

#footer .footer-nav > ul > li a {
    color: #02abf9;
}

#footer .social-media > ul > li > a {
    color: #02abf9;
}

#footer .footer-contact p {
    color: #02abf9;
    line-height: 24px;
    margin: 0;
}

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

I fixed the code above, I think that part was me and I forgot to put in the semi colons. thanks!


However, the rest of the errors are not me.....I figured out how to fix the first two errors on the validator you posted, but the rest I have no idea, I am sure I never touched those files and have no idea where they even are. 

Maybe the theme creator has some corrections to make?

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

by Faye Weber -

Ok, no, that was not me forgetting to put in semicolons. I just went through the other CSS files in this theme and noticed they are missing in several sections of all of them. 

Could this be what is causing so many loading errors with my site?

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Hi, 

It looks like it. Also if that is the case then that theme needs removing from the Plugins Repository as it is not fit for purpose.

The course images with tge errors are using Base64 code which I am certain is forbidden in downloadable Moodle Themes. 

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

That really sucks sad I love this theme and it came out perfectly to match my main website. 

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

by Faye Weber -

I don't think the image issue is that specific theme. I just switched to a basic theme that came with installation and I still get image errors. It seems like there is something wrong with some files in my installation?

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Which theme...what issues?

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

Any theme I use now, actually. I have the issues shown in this thread here: 


https://moodle.org/mod/forum/discuss.php?d=332376


It's not just the eGuru theme. It's all of them. 

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

If your issues are not theme specific, then I would suggest continuing this discussion in that other thread, as it would appear that the issues are with your site/server setup rather than with a theme - but don't give up, the community here (whatever forum) will do our best to provide the kind of support Mary has already been showing smile

Average of ratings: -
In reply to Faye Weber

Re: Customizing logo in eGuru

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

Hi...just in case you missed these I have added three comments each with CSS fixes.

The site looks nice now.

If you need more help just ask ...

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Customizing logo in eGuru

by Faye Weber -

The codes don't change anything, at least not when I put it in my theme's main css. Is there another css sheet it should go in?

Average of ratings: -