Redmine

My code works if the reponsive style sheet is present or not.

Before

<link rel="stylesheet" media="all" href="/themes/whatever/stylesheets/application.css" />
<link rel="stylesheet" media="all" href="/stylesheets/responsive.css" />

<link rel="stylesheet" media="all" href="/themes/whatever/stylesheets/application.css" />
<link rel="stylesheet" media="all" href="/themes/whatever/stylesheets/responsive.css" />

I don't understand your previous note.

Sébastien,

What Jean-Philippe means is that with your proposed change applied, (existing) themes without an included responsive.css file won't be recognized by Redmine anymore.
You can try this yourself by deleting the responsive.css file of your custom theme. Subsequently your custom theme won't be recognized by Redmine any longer (because you've added another condition [which returns false if a theme doesn't provide a responsive.css file] in the block that is passed to select).
I hope this clarifies the issue...

May I ask what the point of this would be? What are you trying to accomplish that's not otherwise feasible to do in your theme? Maybe we can find a better way...

Mischa The Evil wrote:

Sébastien,

What Jean-Philippe means is that with your proposed change applied, (existing) themes without an included responsive.css file won't be recognized by Redmine anymore.
You can try this yourself by deleting the responsive.css file of your custom theme. Subsequently your custom theme won't be recognized by Redmine any longer (because you've added another condition [which returns false if a theme doesn't provide a responsive.css file] in the block that is passed to select).
I hope this clarifies the issue...

Now I understand the issue. I checked and I can only see the theme with the responsive.css in the list of available theme. So, what would be the best way to overrride the style of the responsive.css?

Right now, we can only override the application.css and not the responsive.css because the style sheet link is declared after the application.css.

In my case, I just want to change color of the menu and top bar.

A quick fix for you/for now would be to use a more specific CSS selector in your theme which can be easily achieved e.g. by adding body or #main in front of your selectors.

For a more generic solution we may want to look into moving the loading of responsive.css before the theme's css. (Including Felix as a watcher. Maybe he wants to chime in.)

Hi Sebastian,

Jan is correct about the way to override responsive theme styles. In the description of the ticket that provided the responsive patch you can find some examples #19097.

So in your case, just add this to your theme css:

/* Header background color */
#wrapper  #header {
  background-color: #628db6;
}

if you only want to change the header background color on mobile, add the media query:

@media all and (max-width: 899px) {
  #wrapper  #header {
    background-color: #628db6;
  }
}

I hope that helps.

Hi tomy,

you should be able to achive this with a selector with higher specificity, like mentioned before. Simple write it as:

@media all and (max-width: 899px) {
  #wrapper  #header {
    background-color: #3E5B76;
  }
}

in your theme file.

Felix Gliesche wrote in #note-11:

Hi tomy,

you should be able to achive this with a selector with higher specificity, like mentioned before. Simple write it as:

[...]

in your theme file.

Oh... I see, Thanks for your help