I would like to disable the gray highlight on top of the gutter in the atom text editor.
As can be seen, it is the gray box right before the cursor.
Thank you.
First, navigate to your custom stylesheet as described in the Atom documentation.
In the styles.less file that pops up, add the following:
atom-text-editor .gutter .line-number.cursor-line {
background-color: transparent;
}
Save the file.
Related
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 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:
I have a problem that some text (a Calendar plugin) on my website is transparent, with an ugly shadow border. I think it's a CSS problem in my theme. When I place the calendar widget in my footer, the text is transparent (with a shadow border), when I place the widget on de right section it's ok. I tried to use the F12 button (inspect element), to see where the conflict is, but I can't find it. See below the details. On the website, you can see on the right side the correct text format and on the footer the wrong text format.
CMS: Wordpress 3.8.1
URL: http://www.brug.nu/
Plugin: All-in-One Event Calendar 1.10.9 Standard
Theme: Primo Pro from Cyberchimps 1.0.0.3
Does anyone know if it's really a CSS problem and which section is the cause of the transparent text?
You need to add the following CSS to your page, after any linked stylesheets in order to override the default styling of the calendar text:
#footer-widgets aside, #footer-widgets aside a {
color: #000000;
text-shadow: none;
}
Of course, you may want to change the above as you see fit.
I am using the Cakephp framework and I need help changing the text color of my dialog boxes.
The text and headers are white in the dialog box, but if I disable the dialog box and go directly to the action's view in the browser the text is color is fine. I was wondering if this is something that needs to be edited in layout.css or text.css.
I have no idea what I am doing when it comes to css files.
I'm hoping its just a small change of one line in a css file but I don't know which one.
If this question is too ambiguous or unsolvable, I will delete it.
Thanks for the help
Edit ------------------------
I found out that this is the codefrom layout.css.
tbody td {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
}
The white colored text is in a table cell,
what should I change to make it black?
You can add your css class or id form /app/webroot/css/styles.css. and check it by firebug. It is applying or not?..
Try looking in /app/webroot/css/cake.generic.css.
You'll want to add the property color to your dialogue box css. (e.g. color: black;)
Use Firebug on Firefox or just right click and chose Inspect Element on Chrome to see in which CSS file properties are defined.