CSS help

CSS help

by Felipe Balen Deitos -
Number of replies: 8

Hey everybody, i am new here, i am from Brasil, but we dont have much developers for moodle here. Anyway i hope you guys can help me so in future i can help someone too.

I got a great experience in CSS, CSS3, XHTML and a little in PHP.

I am starting a new project in moodle and was trying to create a theme since the beginning, i created the theme (its a copy from the standard).. its working

But now i am starting to change the CSS and stuffs, no matter what i change there are some CSS that don`t change, like 100% width and stuffs like that, it seems that they are in another file, like a base file, some like that.

Can anyone explain me a little more about this ??

Sorry about my bad english(Not using translator) and Thanks very much for your help!

Average of ratings: -
In reply to Felipe Balen Deitos

Re: CSS help

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

I just informed Felipe that I've moved his post from the General problems to the Themes forum in the hope he'll get some specialised help heresmile

Average of ratings: -
In reply to Mary Cooch

Re: CSS help

by Felipe Balen Deitos -

Thank you Mary, i actualy didn't know about this division of forum, now i am on the right place, hope someone can help and explain me a little more about this.

Average of ratings: -
In reply to Felipe Balen Deitos

Re: CSS help

by Miriam Laidlaw -
Picture of Plugin developers

Hello Felipe, welcome to the themes forum. smile

If you are not seeing any of the changes you are creating in your theme, it sounds as though you have not turned theme designer mode on? That would be the first thing to check.

Go to administration > appearance > themes > theme settings

and turn on theme designer mode.

This will stop Moodle from caching everything, and you should see any changes you make applied when you refresh the page.

The other thing to check, though I am sure you have done this, is that you have actually selected YOUR theme from the theme selector. smile I have forgotten to do that myself once or twice!

Average of ratings: -
In reply to Miriam Laidlaw

Re: CSS help

by Felipe Balen Deitos -

Hi Miriam, first of all realy thanks for the answer!

About the moodle chaching my things, nice to know that there is this option, because i was changing the css and then clickin "Clean theme caches" everytime.
(This is not the problem)

About the theme selection, yes i created the theme and it is selected and working.

I was testing a lot of thing here, and i discovered that i need to subscribe others styles to my styles work, Example:

Theres already one style there like this:

#page-header{
    float: left;
    width: 100%;
}

So i wrote a new one in my own css file:

#page-header{
    width: 1000px; /*fixed width*/
    height: 150px;
    padding: 0px;
    margin: 0px auto;
    background: #000;
}

With this the header should be with 1000px and centralized in middle of screen, but the header continued on left.

Then i noticed that i need to put float:none; and subscribe the other css that i listed above.

This is the best way, or the right way, to customize all the css in moodle??
Always subscribing??

 

Sorry for the long text, and thanks for your help again!!!

Average of ratings: -
In reply to Felipe Balen Deitos

Re: CSS help

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

Hi Felipe,

First of all welcome. smile

As Miriam says, you are better turning on Theme Designer Mode, as clicking theme cache is not effective enough.  There is also another method which will Purge all caches. You will find this in Site Administration > Development > Purge all caches

This is the most useful especially when working with Javascript which is harder to clear the cache somethings.

As for the way you are coding your theme, this is good, as long as you have the name of your CSS file named in your theme's config.php.

I like to call my css file themename_styles.css this way I can add this to the end of the list knowing it will be the last to be read and processed and thus make sure the css I write will be applied and over write other code that may get in the way.

Do you use Firefox? Firebug? These are good tools to use when working with CSS.

Also at the top of this page...

http://moodle.org/mod/forum/view.php?id=46

you will see a few links to some Tutorials, you may find these helpful.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: CSS help

by Felipe Balen Deitos -

Hi Mary,

I am turning Theme Designer mode ON now hehe, its realy exhaustive to be cleaning the cache everytime instead of just F5 hehe.

I am using Firefox and Firebug, probably the best tool to realy understand whats happening with CSS and HTML.

Nice to know that i am doing it right, and if i have any other problem developing the theme i will ask here for sure.

Nice and fast replies! Thanks all!

Average of ratings: -
In reply to Felipe Balen Deitos

Re: CSS help

by Danny Wahl -

Felipe, with your two rules you're actually ending up with something like this:

#page-header{
    float: left;
    width: 100%;
    width: 1000px; /*fixed width*/
    height: 150px;
    padding: 0px;
    margin: 0px auto;
    background: #000;
}

The problem is the float is still there.  You need to add float:none; to your rules to end up with this:

#page-header{
    float:left;
    float: none;
    width: 100%;
    width: 1000px; /*fixed width*/
    height: 150px;
    padding: 0px;
    margin: 0px auto;
    background: #000;
}

edit: whoops sorry, just saw that you wrote about fixing the float:none! ignore me!

Average of ratings: -