プロジェクト

全般

プロフィール

Vote #77455

未完了

Allow themes to override responsive style sheet.

Admin Redmine さんが約2年前に追加. 約2年前に更新.

ステータス:
Needs feedback
優先度:
通常
担当者:
-
カテゴリ:
Themes_38
対象バージョン:
-
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
38
version_id:
0
issue_org_id:
22861
author_id:
151829
assigned_to_id:
0
comments:
9
status_id:
10
tracker_id:
1
plus1:
0
affected_version:
closed_on:
affected_version_id:
116
ステータス-->[Needs feedback]

説明

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


journals

--------------------------------------------------------------------------------
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?
--------------------------------------------------------------------------------
My code works if the reponsive style sheet is present or not.

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

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":https://css-tricks.com/specifics-on-css-specificity/ 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:

<pre><code class="css">
/* Header background color */
#wrapper #header {
background-color: #628db6;
}
</code></pre>

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

<pre><code class="css">
@media all and (max-width: 899px) {
#wrapper #header {
background-color: #628db6;
}
}
</code></pre>

I hope that helps.
--------------------------------------------------------------------------------

Admin Redmine さんが約2年前に更新

  • カテゴリThemes_38 にセット

他の形式にエクスポート: Atom PDF

いいね!0
いいね!0