Project

General

Profile

Actions

Defect #22861

open

Allow themes to override responsive style sheet.

Added by Sébastien Comeau almost 8 years ago. Updated 8 months ago.

Status:
Needs feedback
Priority:
Normal
Assignee:
-
Category:
Themes
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Affected version:

Description

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


Files

themes_scan_themes_mod.png (13.2 KB) themes_scan_themes_mod.png Sébastien Comeau, 2016-05-20 13:33
override.png (115 KB) override.png tomy shen, 2023-09-27 06:58
Actions #1

Updated by Toshi MARUYAMA almost 8 years ago

  • Target version set to 3.2.3
Actions #2

Updated by Jean-Philippe Lang almost 8 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?

Actions #3

Updated by Sébastien Comeau almost 8 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.

Actions #4

Updated by Mischa The Evil almost 8 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...

Actions #5

Updated by Jan from Planio www.plan.io almost 8 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...

Actions #6

Updated by Jan from Planio www.plan.io almost 8 years ago

  • Target version deleted (3.2.3)
Actions #7

Updated by Sébastien Comeau almost 8 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.

Actions #8

Updated by Jan from Planio www.plan.io almost 8 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.)

Actions #9

Updated by Felix Gliesche almost 8 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.

Actions #10

Updated by tomy shen 8 months ago

I'm writing a new theme,

and have the same problem as the original poster. For example, the background-color of the media screen has been defined in the default responsive.css of redmine. At this time, if I want to modify the background-color of the media screen in application.css, it will Overridden by default responsive.css

pls see attachment,
anyone can help me?

Actions #11

Updated by Felix Gliesche 8 months ago

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.

Actions #12

Updated by tomy shen 8 months ago

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

Actions

Also available in: Atom PDF