WebStorm is injecting the css coloring rules in my JavaScript. For example in the following code block...
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
Everything inside '.navbar-collapse ul li a' is colored according to the css color rules. I would like this to be colored like a normal javascript string.
I have tried the following to no avail...
Disable everything under Settings --> Editor --> language inejects
Disable everything under Settings --> Editor --> Intentions --> Language injections
Disable the intelliLang plugin.
Currently that's not possible.
Language Injections that are done automatically (hard coded, if you wish) in JavaScript code cannot be disabled manually.
https://youtrack.jetbrains.com/issue/WEB-1475 -- watch this ticket (star/vote/comment) to get notified on progress.
Because it cannot be disabled, you may only remove some background colors for injected fragments (color that indicates that this is an injection fragment) .. as all "front" (characters) colors are taken from that injected language (CSS in your case), unless, of course, you get rid of all colors for CSS as well (which then will affect actual .css files).
Disable everything under Settings --> Editor --> Intentions --> Language injections
This will do nothing for you -- those are "quick fixes"/helpers that have to be invoked manually anyway.
Related
I want to remove this shadow:
So that it looks like a regular HTML:
How do I do that?
Normally (in HTML/XML file) that would be Tag style. And XML styles may be taking over HTML here (as an underlying language in IDE's styling hierarchy perhaps).
I'm not sure if this will work here but try this anyway (can be used in other scenarios):
Select some code (e.g. a whole tag) in such a file.
Invoke Help | Find Action... (or Search Everywhere and focus on "Actions" tab)
Locate Jump to Colors and Fonts entry there and invoke it.
See if a popup will have the related style listed (does not seem to list it here in PhpStorm using HTML+PHP file in my quick test -- only lists PHP styles).
P.S. It's not a "text shadow" but a background color.
GTK3 applications can be styled and themed with CSS. How can I force GTK to use solely the CSS shipped with my application, instead of combining / cascading it with the theme installed on the user's system?
Why would one want to do that? In theory, CSS would be a great rules-based styling system, where you just add one screen full judiciously chosen rules to define the looks of your application consistently. Unfortunately, in practice, people tend to add hundreds of brain-dead, repetitious definitions into their stylesheets, thereby counterfeiting the very nature of cascading.
The actual problem is that my application shall get the typical, subdued dark-grey look of a media handling application, irrespective of the global theme installed on the user's system. From reading the GTK documentation and the GTKmm tutorial, I came up with the following code to read my own CSS stylesheet:
auto screen = Gdk::Screen::get_default();
auto css_provider = Gtk::CssProvider::create();
try {
css_provider->load_from_path(lib::resolveModulePath (stylesheetName, resourceSerachPath));
} catch(Glib::Error const& failure) {
WARN(gui, "Failure while loading stylesheet '%s': %s", cStr(stylesheetName), cStr(failure.what()));
}
Gtk::StyleContext::add_provider_for_screen(screen, css_provider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
Technically this works perfect. However -- now I am forced to work "against" the CSS rules present on the user's system. If I start with setting a suitable border colour in the default rule and a dark grey background and suitable text colour in a rule for GtkWindow, plus some rule for text entry fields, I get the desired look on some parts, but whenever the user's system theme adds a specific definition for some specific widget or widget combination, thereby repeating explicitly the colours instead of inheriting them from a generic rule, I need to add yet another specific rule into my application style sheet to fix that specific case. That is, the possibly ill-guided structure of the installed system theme forces my application stylesheet into the same ill-guided bad practice and have hundreds of single-case definitions repeating the same values over and over.
Questions
How can I tell GTK to use only my stylesheet for my application?
Is there any viable alternative, which is not so radical, yet still allows me to use CSS the way it was intended to be used (minimal set of rules + cascading)?
You can use the reset.css file from the GTK demos to unset all existing rules.
A less radical alternative might be to just ignore user themes other than the default. Presumably if a user has a theme built with bad CSS practices, they nonetheless like that theme. So why shouldn't they be able to view your application with their preferred theme?
as pointed out by #ptomato, you can install a CSS to effectively override any pre-existing other rules on the system. However, this also shows a way towards a less radical solution: just cancel out the problematic parts of the pre-installed theme.
How does it work?
We add catch-all rules to the CSS, i.e. rules which somehow select any possible element, or at least a complete subtree. This is achieved by using a wildcard * in the selector. And since we install our stylesheet with a higher priority (typically GTK_STYLE_PROVIDER_PRIORITY_APPLICATION), these rules will "stamp over" every specific rule which happens to be present with lower priority.
we can use the value unset to clear out a setting
we can use the value inherit to force the property to be derived from the parent widget's setting of this property.
Especially for the given problem to get "grey-subdued media application" look within a environment with a "light" theme, we can use
* {
color: inherit;
background-color: inherit;
}
...to cancel out only the problematic part of the pre-existing "light" theme, which is the background and colour setting. We can then set our own values once at a central point, and they will be inherited as expected.
We can even expand on that idea and treat further problematic settings within a given scope, by using the wildcard below a CSS contextual selector. And a key trick to get that right is to use the GTK+ inspector on your running application and investigate the actual settings to find the lowest possible point still to "grab" the problematic setting. (To activate the GTK+ inspector run your application with GTK_DEBUG=interactive path/to/my/app )
How can I personalize a list within ServiceNow?
I mean, I have this list:
But I think its very confusing to see the position on the right side.. How can I center it?
Like CSS customization or JS or something like that.. where can I find the customization form?
You can customise the position of the field content by using Field Styles.
If you mean customising the position of the field header, I have had a play around with doing this and I seem to have got it working.
If you inspect the HTML of the column header you want to target (the th tag), you'll see that there's an attribute on it called glide_type which contains in it the type of column. You can use this to create a CSS rule to target only headers of a particular type.
For example, I have a field of type decimal, and the th tag has the following attribute:glide_type="decimal". So to target that element, I could create a CSS rule like the below:
th.text-align-left.list_header_cell[glide_type="decimal"] {
text-align: right;
}
The hacky part is including that CSS so that it applies throughout the SN interface. You can use a UI Script to run some JavaScript which includes the Style Sheet. So if you put the above CSS inside a new Style Sheet (navigate to Content Management > Design > Style Sheets), and copy that new Style Sheet's Sys ID, you can create a UI Script with the below in it to include that Style Sheet on all pages:
link = document.createElement("link");
link.href = "STYLE_SHEET_SYS_ID_GOES_HERE.cssdbx?";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName("head")[0].appendChild(link);
After doing that, you'll see that the Style Sheet is getting loaded on all pages, and if you've written your CSS right then you should find that the column header is now right-aligned!
As #Kirk said, performing this kind of customisation will mean that it's hard for ServiceNow Customer Support to assist if there's something you've customised getting in the way of their troubleshooting. Take this into account if you decide to implement something like this, and also thoroughly test this on a non-production instance.
In addition to the above, this solution may break in future releases as ServiceNow may decide to change the way that lists work and thus the CSS selector may no longer target the right/any element.
Hope this helps!
Dylan
It's not suggested to customize any sort of CSS or JS with that, we were told that is voids your support for that section if you do so.
You could just add a few more display fields if you really desire to remove the extra white-space.
For a complete description of that (which you may know how to do):
Click the Gear icon
Then select some relevant fields from the Available section, and click the Right arrow to add them.
We have a requirement to implement tooltips for words that are authored in Sitecore RTE.
The idea behind is that user should be able to hover over the word and see it's description/meaning.
Is this possible to achieve in sitecore? Did a quick search on marketplace but could not find any modules.
Below are some options to consider for achieving what you described.
Inject Tooltip HTML in a renderField pipeline
In this option, you would extend the renderField pipeline. First, you will need to ensure that you are dealing with a rich-text field, and if so, locate terms and replace them with the necessary markup that is required for the tooltip. This could be as simple as wrapping the word in an <abbr> or perhaps a <span> element with a CSS class. The list of terms and tooltip content could be sourced from items in Sitecore or a custom Sitecore Dictionary. Caching the terms would be essential as this pipeline processor is invoked frequently every time a field is rendereded.
Progressive enhancement with JavaScript
This approach is almost entirely based on the client-side. Terms could be located and replaced fairly easily with the help of JQuery. If the list of terms is of a reasonable size, they could be bootstrapped into a JavaScript variable. Once terms are located and enhanced, a separate, asynchronous call to a REST endpoint could be made when hovering or clicking the term. The API would accept a term and respond with the term's definition.
HTML Snippet in RTE Editor
Sitecore RTE editor can be extended with additional buttons. One of these options allows you to insert predefined snippets of HTML. The RTE editor also has a setting to specify a CSS file to style the content within the field (<setting name="WebStylesheet" value="/css/yourstylesheet.css" />). Styling would be necessary in order to target the description markup and make it visible to be edited, whereas, on the public site, the description markup would normally be hidden by default until the term is clicked on or hovered over.
Dynamic Link Replacement
http://www.layerworks.com/blog/sitecore-token-replacement
To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp