← Back to team overview

dhis2-devs team mailing list archive

Re: Custom CSS not rendering in Data Element / Indicators

 

Hi Tim,

in the new frontend apps we're using Material-UI
<http://www.material-ui.com/>. This library consistently uses inline
styles, which are impossible to override using stylesheets. In other words,
even if we did load the custom styles in the new apps you wouldn't be able
to override many styles. The one exception for the time being is the header
bar, but that's getting replaced with a new version soon as well.

Perhaps there is a better solution going forward though. One thing we've
been discussing internally is the possibility of adding color settings to
the system settings. These color settings could then be reflected in both
the web apps and the android apps. Would that solve your issues, or are you
using custom CSS for other things as well?

Best,


Nicolay Ramm
Front end developer, DHIS 2
University of Oslo
https://www.dhis2.org

On Mon, May 2, 2016 at 8:18 PM, Timothy Harding <tharding@xxxxxxxxxxxxxx>
wrote:

> Alrighty,
>
> I tested the customjscss app with a blank 2.23 and it works just fine! So
> I imagine there is something preventing editing the css on play/demo or it
> was some other transient bug that was fixed.
>
> So the pages in 2.23.22894 *not currently loading the custom CSS *are:
>
> Maintenance
> dhis-web-maintenance/#/list/all?_k=5lgb6h
>
> App Management
> dhis-web-app-management/index.action
>
> Browser Cache Cleaner
> dhis-web-cache-cleaner/index.action
>
> Settings
> dhis-web-settings/index.action
>
> Usage Analytics
> dhis-web-usage-analytics/index.html
> ^This one has the wrong css for the header font type as well
>
> [image: Inline image 1]
> vs
> [image: Inline image 2]
>
> So my question going forward,* is custom css being removed from DHIS 2
> entirely as we start to move to the newer interface*?
>
>
>
>
> *Timothy Harding*
> Sr. Systems Analyst, BAO Systems
> +1 202-536-1541 | tharding@xxxxxxxxxxxxxx | http://www.baosystems.com | Skype:
> hardingt@xxxxxxxxx | 2900 K Street, Suite 404, Washington D.C. 20007
>
> On Thu, Apr 28, 2016 at 5:46 AM, Timothy Harding <tharding@xxxxxxxxxxxxxx>
> wrote:
>
>> Just gave this a shot in 2.23, the custom logos (using the built in logo
>> upload functionality in the settings->appearance) are not showing up in
>> those same three apps:
>>
>> dhis-web-event-capture/index.html#/
>> dhis-web-cache-cleaner/index.html
>> dhis-web-tracker-capture/index.html#/
>>
>> I'm going to give the custom css a shot soon 2.23, but it either appears
>> the custom css app is broken on play demo, or the functionality is locked
>> (being a public site for testing, I understand blocking access to change
>> the css for sure!)
>>
>>
>>
>>
>> *Timothy Harding*
>> Sr. Systems Analyst, BAO Systems
>> +1 202-536-1541 | tharding@xxxxxxxxxxxxxx | http://www.baosystems.com | Skype:
>> hardingt@xxxxxxxxx | 2900 K Street, Suite 404, Washington D.C. 20007
>>
>> On Sat, Apr 23, 2016 at 3:01 PM, Timothy Harding <tharding@xxxxxxxxxxxxxx
>> > wrote:
>>
>>> Two more pages not honoring css changes:
>>>
>>> dhis-web-settings/#
>>> dhis-web-app-management/#
>>>
>>> Then there are 3 more apps not showing an uploaded custom logo, instead
>>> showing only the dhis2 logo:
>>>
>>> [image: Inline image 1]
>>>
>>> dhis-web-event-capture/index.html#/
>>> dhis-web-cache-cleaner/index.html
>>> dhis-web-tracker-capture/index.html#/
>>>
>>> The high position is due to some css on my part for the custom logo,
>>> which isn't showing up.
>>>
>>>
>>> *Timothy Harding*
>>> Sr. Systems Analyst, BAO Systems
>>> +1 202-536-1541 | tharding@xxxxxxxxxxxxxx | http://www.baosystems.com | Skype:
>>> hardingt@xxxxxxxxx | 2900 K Street, Suite 404, Washington D.C. 20007
>>>
>>> On Sat, Apr 23, 2016 at 12:54 PM, Timothy Harding <
>>> tharding@xxxxxxxxxxxxxx> wrote:
>>>
>>>> Hello Devs,
>>>>
>>>> Using 2.22.22006
>>>>
>>>> I set up some custom header CSS (below) and the dhis-web-maintenance/#/
>>>> page (Data Elements / Indicators) doesn't seem to want to render it, even
>>>> though the div id is the same.
>>>>
>>>> [image: Inline image 1]
>>>> vs
>>>> [image: Inline image 2]
>>>>
>>>> Am I missing a setting somewhere? Thanks!
>>>>
>>>>
>>>> This is the custom CSS I'm using.
>>>> #header {
>>>>     background: #CCCCCC; /* For browsers that do not support gradients
>>>> */
>>>>     background: -webkit-linear-gradient(-90deg, #CCCCCC, #EEEEEE); /*
>>>> For Safari 5.1 to 6.0 */
>>>>     background: -o-linear-gradient(-90deg, #CCCCCC, #EEEEEE); /* For
>>>> Opera 11.1 to 12.0 */
>>>>     background: -moz-linear-gradient(-90deg, #CCCCCC, #EEEEEE); /* For
>>>> Firefox 3.6 to 15 */
>>>>     background: linear-gradient(-90deg, #CCCCCC, #EEEEEE); /* Standard
>>>> syntax */
>>>>     background-repeat: no-repeat;
>>>>     background-attachment: fixed;
>>>> }
>>>> #headerText {
>>>>     color: #333233;
>>>> }
>>>> .fa, .menu-link {
>>>>     color: #333233;
>>>> }
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> *Timothy Harding*
>>>> Sr. Systems Analyst, BAO Systems
>>>> +1 202-536-1541 | tharding@xxxxxxxxxxxxxx | http://www.baosystems.com |
>>>>  Skype: hardingt@xxxxxxxxx | 2900 K Street, Suite 404, Washington D.C.
>>>> 20007
>>>>
>>>
>>>
>>
>
> _______________________________________________
> Mailing list: https://launchpad.net/~dhis2-devs
> Post to     : dhis2-devs@xxxxxxxxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~dhis2-devs
> More help   : https://help.launchpad.net/ListHelp
>
>

PNG image

PNG image

PNG image

PNG image

PNG image

PNG image


Follow ups

References