Defect #22861

Allow themes to override responsive style sheet.

Added by Sébastien Comeau about 6 years ago. Updated about 6 years ago.

Status:Needs feedbackStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:Themes
Target version:-
Resolution: Affected version:3.2.2

Description

Modified the scan_themes method in themes.rb to allow themes to override responsive style sheet.

themes_scan_themes_mod.png (13.2 KB) Sébastien Comeau, 2016-05-20 13:33

History

#1 Updated by Toshi MARUYAMA about 6 years ago

  • Target version set to 3.2.3

#2 Updated by Jean-Philippe Lang about 6 years ago

  • Status changed from New to Needs feedback

NO, the proposed change does not do what you're describing here. This would require the presence of a responsive.css in each theme.
Themes are already able to override the responsive stylesheet, but your problme might be that they also have to override application.css (to be recognized as a theme), right?

#3 Updated by Sébastien Comeau about 6 years ago

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" />

After
<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.

#4 Updated by Mischa The Evil about 6 years ago

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...

#5 Updated by Jan from Planio www.plan.io about 6 years ago

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...

#6 Updated by Jan from Planio www.plan.io about 6 years ago

  • Target version deleted (3.2.3)

#7 Updated by Sébastien Comeau about 6 years ago

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.

#8 Updated by Jan from Planio www.plan.io about 6 years ago

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.)

#9 Updated by Felix Gliesche about 6 years ago

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.

Also available in: Atom PDF