learning how to manage css, yet sometimes very surprised...

learning how to manage css, yet sometimes very surprised...

by Martin Koops -
Number of replies: 14

After isntalling the css-inspector and webdeveloper in FireFox I can access all information about the element id's and classes.

Yet I stumble over things I do not understand.

E.g. The course list is displayed on my first page. The course titles displayed are in a table: class=coursebox,

in this table the cell TD: class: info

In this info cell is the title of the course.

When I set coursebox .info{ font-size:25; }

Nothing changes. How can I reach this title in css??
I am obviously missing an important feature here....

Average of ratings: -
In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Urs Hunkler -
Picture of Core developers

Martin, for CSS values you must add the units. Only "0" is excepted. Your example could look like:

.coursebox .info {font-size:25pt} or 2.1em or ...

I hope this helps
Urs

In reply to Urs Hunkler

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -
thanks for replying so quickly.
I have changed the code but still no effect. The titles are yellow as well. While I state that they should be white (i know it is in the wrong css file but for this particular test I combine the two properties color and fo9nts temporarily.

The code:


.coursebox .info {
  font-size:25px;
  color:#FFFFFF;
}


In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Urs Hunkler -
Picture of Core developers

Martin, the source must be somewhere else. In the standard theme the property is defined as

.coursebox .info {
  font-size:1em;
}

Might your theme be rendered before the standard themes? In this case Standard will overwrite all your changes. Please look at the CSS files that reach your browser: "Web Developer Toolbar/CSS/View CSS"

Urs

In reply to Urs Hunkler

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -

I checked in firefox.

tthe standard css sheets are mentionmed before the specific css files.

Indeed standard is used.
How do know which file processed is first?

I do think it is ok by the way: the other changes went fine (background colors, link colors, text color, display and hide several classes etc.)

thnaks again for discussing this with me

In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Hi Martin,
>How do know which file processed is first?
Easy, if you are using Firefox webdeveloper:

a) in webdeveloper toolbar, click on CSS/View CSS: this opens a new tab in which you can view the various CSS files used by the current Moodle theme

b) in the page, the CSS files names and contents are aranged in the order in which they are processed...it's that simple.

This is an example for current Moodle.org site clearly shows that the css stylesheets from the standard theme are processed first, followed by the stylesheets from the moodleorange theme.

CSS - http://moodle.org/mod/forum/discuss.php?d=31281
http://moodle.org/mod/forum/discuss.php?d=31281
http://moodle.org/theme/standard/styles.php?lang=en

/**************************************
 * THEME NAME: standard
* Files included in this sheet:
*   standard/styles_layout.css
 *   standard/styles_fonts.css
 *   standard/styles_color.css
 *   standard/styles_moz.css
 *   /mod/assignment/styles.php
 *   /mod/choice/styles.php
etc.
/***** standard/styles_layout.css start *****/
 styles_layout.css
  This CSS file contains all layout definitions like positioning, floats, margins, padding, borders etc.

etc.

h1.main,
h2.main,
h3.main,
h4.main,
h5.main,
h6.main {
  text-align: center;
}

etc.
/***** standard/styles_layout.css end *****/
etc.
**/ http://moodle.org/theme/moodleorange/styles.php?lang=en
/**************************************
 * THEME NAME: moodleorange
 *
 * Files included in this sheet:
 *
 *   moodleorange/moodle.css
 **************************************/
/***** moodleorange/moodle.css start *****/
a:link,
a:visited {
  color:#0000AA;
}
etc.
/***** moodleorange/moodle.css end *****

In reply to Joseph Rézeau

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -

OK, then that is ok in my case.

standard precedes the customized css files.

also the !important addition does not make a difference.

thanx for the quick response

In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -
Still I am not succesfull in changing the size of the course-list on the first page:

clicking a course name (using css inspector) returns:

  1. BODY, id: site-index, class: course course-1
  2. TABLE
  3. TBODY
  4. TR
  5. TD
  6. DIV, id: page
  7. DIV, id: content
  8. TABLE, id: layout-table
  9. TBODY
  10. TR
  11. TD, id: middle-column
  12. TABLE, class: coursebox
  13. TBODY
  14. TR
  15. TD, class: courseboxcontent
  16. TABLE
  17. TBODY
  18. TR
  19. TD, class: info






















Can anyone reflect on this result\:

.coursebox .info {
color:#FFFFFF;
font-size:25px;
}

does not rsult in a change of size and color
In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -
The former post did not come through correct =>

Still I am not succesfull in changing the size of the course-list on the first page:
clicking a course name (using css inspector) returns:=>

  1. BODY, id: site-index, class: course course-1
  2. TABLE
  3. TBODY
  4. TR
  5. TD
  6. DIV, id: page
  7. DIV, id: content
  8. TABLE, id: layout-table
  9. TBODY
  10. TR
  11. TD, id: middle-column
  12. TABLE, class: coursebox
  13. TBODY
  14. TR
  15. TD, class: courseboxcontent
  16. TABLE
  17. TBODY
  18. TR
  19. TD, class : info
Can anyone reflect on this result:

.coursebox .info {
color:#FFFFFF;
font-size:25px;
}

does not rsult in a change of size and color. How is that possible??


In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Urs Hunkler -
Picture of Core developers

Hi Martin, you make a great advertising for the CSS inspector wink The dialog you refer to is shown as a real overlay dialog as in CSS inspector when you open this thread.

How did you handle to copy the source code of the CSS inspector box into your forum posting?

Very curious
Urs

In reply to Urs Hunkler

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -

cut and paste, I was surprized as well.

Do you understand was is wrong with my css? Still the coursebox info cannot be scaled or changed in color....

suggestion?

In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Jean-Marc Loisil -

Don't forget the initial dot as well as a unit for the size (em, large, px, etc.)

This would give the following CSS :

.coursebox .info{
font-size:25px;
}

Hope it helps

In reply to Jean-Marc Loisil

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -

OK< found the solution but still confused:

I need to change the .coursebox .info { }

settings in teh standard theme. Also when I adjust .coursebox .info {} with the !import addition.

How can the standar be so powerfull in some occasions? Most of the time my own css file is the boss.

Also the standard was mentioned before the other files in the css-inspector, suggesting thtta it is not leading.

Can anyone explain??

In reply to Martin Koops

Re: learning how to manage css, yet sometimes very surprised...

by Urs Hunkler -
Picture of Core developers

Martin, sorry, without any insight into your theme there is no chance to tell you why. It works except you defined some other CSS properties that interfere.

When you install your theme on a server and post a message with the URL here I can look at it. Perhaps I find the reason.

Urs

In reply to Urs Hunkler

Re: learning how to manage css, yet sometimes very surprised...

by Martin Koops -
Thanks for the offer. i just happended to find the answer. it was an error in the config file.