Nav bar color css not working

Nav bar color css not working

by Tony Pattinson -
Number of replies: 13

Using Moodle 2.4 on a local WAMP server. I'm attempting to become a moodler. I have created a clone of Formal White and called it Ynot 01 and have discovered something I don't understand.

The navbar css changes that I have inserted into ynot_01.css are being over-ruled by the parent formal_white.css. Although my knowledge of css is fairly fundamental I was under the impression that the last rule to be invoked took precedence.

To illustrate the problem I doubled the height of the navbar to 60px.

I believe the beige bar on top is the bg_bread image invoked by formal white. Here's the css code from formal white

.navbar {width:auto;background-image:url([[pix:theme|bg_bread]]);background-repeat:repeat-x;line-height:29px;} /* 30 pixel is the height if bg_bread */

I deleted the reference to the background image, changed the colour and increased the height. Here's the css code from ynot_01.css

.navbar {width:auto;background-color:#084b8a;line-height:60px;}

The only change that has been invoked is the height change.

I have theme designer mode enabled.

Before I spend any more time trying to customise this theme I would like to understand what is happening. Can someone please help. What am I missing?

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

Hi Tony,

I have found that if a CSS rule exists in a parent theme that has been written in shorthand, for example:

#page-header { background: #fff url(header.jpg) repeat left top scroll;}

and you want to change the color, you would think that adding...

#page-header { background-color: #000;}

would fix it...but it wont.

What you have to do is look at the original CSS and copy it then add it into your theme's stylesheet, and change the values/colors/images whatever, to suit you.

Also, it's best to keep things to a minimum so just use one stylesheet in your cloned copy, and make formal_white a parent. And be sure you have it in the correct order in your theme's config.php

('formal_white', 'canvas', 'base') in that order.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Nav bar color css not working

by Tony Pattinson -

Hi Mary

Thanks for the rapid response

In the ynot_01 config.php file I have called the parents exactly as you advised plus I only have one style sheet in my clone. I did read a lot of your "stuff" before attempting this big grin.

What you have to do is look at the original CSS and copy it then add it into your theme's stylesheet, and change the values/colors/images whatever, to suit you.

I'm not sure how to achieve this when what I want to do is ignore the background image. I know I could go into the formal white syles sheets and delete the offending parts but I don't think that would not be the correct way to proceed.

Are you suggesting that I copy the original formal white .navbar css and then immediately follow it with another .navbar css that does what I want?

Regards

Tony (sometimes knows as Sailbad the Sinner)

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

.navbar {
width: 100%;
background-image: none;
background-color: aquamarine;
line-height: 1;
margin: 0;
padding: 5px 0;
}

.

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

Re: Nav bar color css not working

by Tony Pattinson -

Thanks Mary. Worked fine. Now I can progress to the next step.

BTW What are you doing up so late? Or maybe you are not where your profile says you are smile.  Have you ever heard of Millom also mentioned in the Domesday book; my birth place?

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

Glad you got this to work.

Millom? Near Barrow in Furness? Yes...I have heard of it...if that is the same place. Although I was getting it confused with Malham which is Yorkshire way.

As for being up late, well I got carried away with a theme I was having problems with and the time just flew by. Mind you I have only just surfaced, and still bleary eyed! LOL

Cheers

Average of ratings: -
In reply to Mary Evans

Re: Nav bar color css not working

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

Now we know why your avatar wears dark glasses Mary! You're really a night-owl!

 :D

Rich

 

Average of ratings: -
In reply to Mary Evans

Re: Nav bar color css not working

by Tony Pattinson -

Hi Mary

You got it; Millom is about 4 miles north of Barrow across the Duddon Estuary.

I'm making progress on my theme customisation but have hit a few road blocks.

#1) I have no idea how to change the gradient and colours in these regions.

Any suggestions?

 

#2) I would like to Edit this title. Where will I find it?

All help greatly appreciated

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

Try using Firebug it's is the easiest to use for tracking down CSS, as Miriam explains in this excelent tutorial.

Average of ratings: -
In reply to Mary Evans

Re: Nav bar color css not working

by Tony Pattinson -

Hi Mary

I did use Firebug as shown on the screen prints but I don't know where to find the yui??????????? stuff.

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

What you appear to be using in the image you added above is Web Designer which is similar to Firebug but not as easy to figureout the CSS as it is in Firebug. Did you watch the Video because Miriam uses the Formal White theme!

OK... the CSS selectors for the side blocks looks like this...

.block .header .title h2 = styles the block's name and because is uses h2 means it uses the default for that header tag style preset in all browsers and styled in Moodle by YUI CSS which you don't need to worry about.

.block .header .title = styles the area inside the block header it has no dimensions to speak of but can be used to customise the theme if need be.

.block .header = stykes the header area of the block. This is where the image is in Formal White ,so these are the CSS selectors you need to style your block headers. Like you did for the navbar you need to use background-image: none;  like so...

.block .header {
background-image: none;
background-color: #FFFFEE;
}

Hope that helps?

Mary

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

Re: Nav bar color css not working

by Tony Pattinson -

Thanks Mary

With your wonderful help I have made good progress on getting my theme the way I want it to look.

Do you have any insight into problem #2 on my earlier post?

I would like to change this title but cannot remember where I inserted it shy

Once again many thanks for ALL your input.

Average of ratings: -
In reply to Tony Pattinson

Re: Nav bar color css not working

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

I can't read what it says, is it Site blog? If so then in that image you posted  I can just make out the words Site blog in the Navigation block on the left. If it is then you change the title there when Editing is ON.

You should see a row of Editing tools just above that link. smile

Hopefully so...

Mary

Average of ratings: -
In reply to Mary Evans

Re: Nav bar color css not working

by Tony Pattinson -

Hi Mary

I found where to change this while looking for something else (which I'm still looking for mixed). It was an input on the Front Page settings.

Once again many thanks for all your help.

Tony

Average of ratings: -