I would appreciate if someone can help me.
I can change the font color of menu by:
style={'color': '#C0C0C0', 'font-family': 'Arial'}
but when I select the option from the menu the font color changes to the BLUE.
I have tried:
style={'font-color': '#C0C0C0'}
and:
style={'font-color': 'black'}
but still when I select the option it appears as BLUE in the menu.
here is the screenshot:
Looking forward for your help.
Thank you.
You will need to modify the CSS directly to change the styling of selected options. If you have never done this before it is straightforward- create an assets folder under the root of your project and create a .css file in that assets directory (name shouldn't matter). Enter the code below (and modify it as you want) and then save it- your Dash app should dynamically reload the .css file when you save it so you can play around with options and see what works.
.Select--multi > .Select-control .Select-value, .Select-placeholder {
border: 1px solid grey;
border-radius: 4px;
background-color: white;
color: #C0C0C0;
}
here is an example running my own dash app:
the default view
with the css
I want to view a plaintext file in light color theme in Firefox. Firefox is showing the file in dark mode by default (I am using Firefox dark mode, and I don't want to change that). I could see the css code setting the theme, but could not edit it permanently (it changed back when I reopened the text file). Is there a solution to this?
Yes, you can use something like this in a user-stylesheet:
#-moz-document plain-text-document() {
:root {
background-color: initial !important;
color: initial !important;
}
}
Though we could add a pref for that if you file a bug for it :)
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I do not want to create the entire theme from the scratch.
I want to use the existing theme.
I want to make some minor style changes (like color) for a few elements.
I don't want to save the changes in the original theme but in its copy.
For example.
I've installed the Bade3 Notepad theme.
I like the notepad++'s highlighting but in find out the grey string are too light.
According to Syntax Highlighting Guide for Atom Syntax Highlighting Guide for Atom I've run Atom in Developer Mode.
I've opened file that contains some quoted string.
Right click some quoted string and select Inspect Element
In the Styles tabs I change the color value in
.string.quoted.php {
color: #8b8b8b;
}
The changes are applied to the real example code so I can adjust color.
Let's say I'm fine with #107000
Now I wish to save this changes.
You can achieve this through your personal style sheet without creating or editing a theme.
Your "stylesheet Ctrl-Shift-P and typing Application: Open Your Style Sheet.
A file will open in Atom that looks similar to this:
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow {
// Add Your Styles Here
}
In the area between atom-text-editor::shadow { (line 13) and the closing } (line 15) add you changed styles:
.string.quoted.php { color: #8b8b8b; }
Save the Stylesheet and check it is working as expected in your editor, no need to reload or restart the editor.
Note: if you have the Use Shadow DOM check box unchecked in Atom Settings, accessed through Ctrl-,, then you will need to put your styles between atom-text-editor { (line 7) and the closing } (line 10). Try and work with Atom with the Shadow DOM enabled as the option to disable it will go away in future versions.
Here is a short animation to go through the steps I took to get this to work in Atom 1.8 Beta:
We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.
The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38
I've noticed that Chrome is injecting a stylesheet:
.ui-widget-header {
border: 1px solid rgb(231, 143, 8);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
color: rgb(255, 255, 255);
font-weight: bold;
}
Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?
Update:
.ui-widget-header {
/* border: 1px solid #3f7506; */
/* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
color: #ffffff;
font-weight: bold;
}
This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.
Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!
Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.
I had the same issue with injected stylesheet, hiding social buttons from my website.
It turned out my Adblock plus was blocking Facebook and YouTube social buttons.
Just had this with the 'Save to Pocket' extension overriding rules in a print stylesheet.
Also assuming your Google 'incognito' (privacy mode) browser isn't running your extensions viewing the page 'incognito' can be a quick way to check if a browser extension is the issue.
If someone stumbles on this as of 24-Feb-2022 because most web pages have black colored background due to color-scheme: dark right at the element by injected stylesheet, the culprit is 'Adobe Acrobat: PDF edit, convert, sign tools' - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj
Worked fine after disabling the extension.
For Brazilians (especially) who are going through this, check if you have the Méliuz extension (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) and disabled it.
How to debug "injected stylesheet" in Chrome
Open develop console, goto Network tab
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page
In mi case I have disabled the chrome extension called "Nimbus Screenshot & Screen Video Recorder"
remove your newly installed browser extensions and cache, that may solve your problem.
The same thing happened to me, the links disappear from the navigation bar because of an extension in chrome called "EPUB READER". I disabled it and the links show up.
For me the Shield feature was causing such a styling problem. Once disabled, the styling was as expected.
This problem seems to be caused by mostly recorder extensions. Mine was caused by "Screen Recorder" chrome extension.