Is possible to change Chrome's Sources tab background color? I found this article, it explains how to give a custom skin to Chrome's inspector through a css file, but it doesn't work for the Sources tab (Elements and Console work very well though, as you can see from the screenshot)
Thanks
Some themes don't change Sources tab color. Different themes, different styles. Try to use something else. I would recommend these ones (all of them change Sources tab background color):
MNML: https://github.com/frontdevde/mnml-devtools-theme/blob/master/Custom.css
Ruby Blue: https://github.com/chrisbateman/ChromeDevToolsTheme-RubyBlue/blob/master/Custom.css
Tomorrow: https://gist.github.com/bentruyman/1163300
Do the same steps, but use one of Custome.css files I mentioned above.
Related
full-calendar print preview is not having color in preview page.Its takes only black color.
I didn't get different colors in print preview using window.print()..Please answer..thanks in advance.
The fullCalendar print CSS says (among other things)
.fc-event{background:#fff!important;color:#000!important;page-break-inside:avoid}
So the !important will override anything in the main CSS and any styles you may have added yourself, and cause the events to have a very plain style, presumably so it will be ok on the majority of printers.
This is the default behaviour. If you want to change it, you can modify the print CSS file to your taste.
I have some buttons that I would like to change the color of but not sure how to do it.
code:
<Button id="evalPriceButton" text="Evaluate Price" icon="sap-icon://sales-order" type="Accept" press="onPricePress" />
As shown in my code I'm using one of the default types provided by sap, but I cannot set my own color. I'm also using one of the icons provided in their library which shows different buttons with different colors, but they don't specify how to change those colors. https://sapui5.hana.ondemand.com/iconExplorer.html
I want it to look like the green one.
Is it fully necessary to override the css in order to change the look of the button?
I assume by "like the green one", you mean one of the colors of those rotating divs in the Icon Explorer. Unfortunately, those colors come from custom CSS classes. They are not specified in the documentation. So yes, you will have to:
Use the UI Theme Designer
Write your own CSS class although it is not recommended for Fiori apps
SAP Fiori launchpad apps should not override styles.
You can read more about the theming here: https://ui5.sap.com/#/topic/497c27a8ee26426faacd2b8a1751794a
Does anybody know how I can style the Firefox built-in Web Developer (devtools) theme? I am using the Dark theme, and need to make a small change in the way line numbers/column numbers are shown in the console output.
The default color, which is a shade of orange, to my eyes is totally unreadable.
I searched the web but all I get is stuff about theming of code that is displayed and analyzed by Web Developer.
Btw., I have to use the dark theme because the lighter themes are even more of a strain on my eyes.
I think this might be what you're looking for. It's the main CSS file for the dev tools. The dark theme is defined here and the used orange is defined here.
I'm not sure if that color can be changing without rebuilding Firefox or creating a browser extension for that.
I have a CSS file which is not written by me, but I have to change stuff. My problem is a line like this:
list-style-image: url("../images/pfeil.png");
The path to the image is correct, but it's not displayed. I used Firebug to check which styles are applied and I see the line is stroke through. According to the documentation, that means that it's overwritten by another rule.
Is there a way / tool to find out, which rule is overwriting the line above?
They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).
CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.
Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.
Open your page in chrome, hit ctrl, shift I to open developers console. On the right, there should be an accordion thingy with one of the options being "Computed Style". Open that, click on show inherited, find the setting your concerned about, click the little arrow next to it and it should open up and tell you where the computed setting is coming from.
Let me know if that does it for you.
In my .gwt.xml file I have uncommented the following:
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
When I run my application I do not see any stylesheet applied. Using Firefox there are a large number of warnings associated with Chrome.css. These mostly say that it doesn't recognize 'zoom' and 'cursor' so it is dropping the declaration. This seems to indicate that it is trying to use the theme but I see no evidence of it. The background remains white and the fonts seem to be the defaults.
Is there another step I need to take for stylesheets to be applied?
Stupid mistake. I tried the dark theme which is more dramatic and discovered they were being applied. They Chrome and Standard just don't look like much on the standard widgets.