I have a challenge to implement colorized tables in a Kibana Dashboard and tried to find out the best approach in internet, but no glue up to now. So, since I wouldn't like to re-invent the wheels and create from scratch, I would like to hear from you an updated status for this implementation. By the way, I know that we can define a cell color based on its value, but it cannot be only the cell color, it must be all table lines or at least, one full line.
The challenge is to draw two simple tables in the same dashboard, one completely RED and a second all GREEN. Here is one table example:
Report example
Have you have figured out some way to define the background color to the tables into a kibana dashboard, a kibana visualisation component or even by deployment level customization by HTML or CSS files customization?
Here is one of the ways for solving this challenge. In order to figure out any additional formatting, I do suggest to use F12 in Chrome and debug some CSS statements.
CSS file to be changed:
/usr/share/kibana/optimize/bundles/light-theme.style.css
Let's consider the following tables titles
Table 1 title: "TOP_RED_TABLE"
Table 2 title: "BOTTON_GREEN_TABLE"
At the end of CSS file, add the following lines (replace the table titles below according with your definitions into the dashboard)
[data-title="TOP_RED_TABLE"],[data-test-subj="embeddablePanelHeading-TOP_RED_TABLE"] {
background-color:red;
color:white;
}
[data-title="BOTTON_GREEN_TABLE"], [data-test-subj="embeddablePanelHeading-BOTTON_GREEN_TABLE"] {
background-color:green;
color:white;
}
.table thead {
font-size: 14px;
background-color:black;
color:white;
}
.embPanel__title:not(:empty) {
font-size: 16px;
}
Good luck with your kibana customizations and please, post here any additional suggestions.
Tks
Marcelo
Related
I am trying to style my website at mathbymiles.com and I am trying to color some social media link SVG icons in the footer of the website. I used the following code to change the colors to orange:
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
So this gave me this desired result:
HOWEVER, other instances of these svg icons are now orange, too like here, which is undesired:
How can I fix this?
Probably your question does not directly point to a problem. In fact, you need to guess the problem you are experiencing in order to find the problem. People may therefore see it as a question of poor quality.
If we come to the answer to the question,
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
The CSS code you wrote above includes features that predominate by nature to include other icons. See Class Selectors.
Let's rewrite this to affect only the icons below,
.social a.social-link svg.svg-icon
{
color: #FF6C00 !important;
}
Thus, when there is a suitable match, we force it to be orange with "! Important". But if there is no match, we leave it to their natural state. Feel free to write if you have any problems.
Note: Delete the one you added and replace it with the new one above.
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
I'm trying to modify the css style of the word (button) "All" in Post Grid filter of Wordpress plugin Visual Composer...I'm able to do it for all the words of filtered categories but not for the specified one "All"...Firebug show me that style: <span data-vc-grid-filter-value="*">All</span> where I suppose the symbol * define all the words of categories...Anyone knows how can I modify that style?
Without example code it is always hard to answer.
Maybe this helps:
span[data-vc-grid-filter-value]:first-child {
font-weight: 700; /* just an example adjustment */
}
I assumed that "All" is the first element in a series of elements. If this selector does not work, try to go more specific (e.g. li > span[data-vc-grid-filter-value]).
If you can provide a sample of the page, where this element is located, and the corresponding CSS, then the answer may be more helpful.
Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.
div.Foo
{
background:Green;
border:1px solid Khaki;
display:none;
left:225px;
max-height:300px;
overflow-x:hidden;
overflow-y:auto;
position:absolute;
top:0;
width:230px;
z-index:99;
}
So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)
Update
#Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example
div.Foo,
div.Foo p,
div.Foo li
{
color:Green;
}
becomes
div.Foo,div.Foo p,div.Foo li
{
color:Green;
}
which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.
Ben's answer is correct but is error prone but lead me to this plugin:
https://github.com/mrmlnc/vscode-postcss-sorting
Simply add this to your settings.json after installing,
"postcssSorting.config": {
"properties-order": "alphabetical"
}
Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run
There's lot of other great config options too including how to handle comments.
I don't know of anything in visual studio, but there online tools to clean up and format css. I've used CleanCSS with success
Update:
Try this one Format CSS Online. It seems to output the lines more like you want
In fact it's much more simple and you do not have to install any plugin.
Just go File > Preferences > Keyboard Shortcuts
Then Type Sort lines ascending, then map a keybinding to that.
Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.
In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort
Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:
// Don't do this
.rule1,
.rule2 {
color: red;
}
// Do that
.rule1, .rule2 {
color: red;
}
In VSCode. Just attach a key binding to the
“Sort Lines Alphabetically” command.
File > Preferences > Keyboard Shortcuts
Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.
However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.
There's a VSCode plugin called CSS Alphabetize that should allow you to do this.
Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.
https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize
It's not a plugin and it doesn't know about CSS but it's often helpful: a spreadsheet such as Excel or Google Spreadsheets.
I often cut code, paste it into Excel, munge it a bit, and paste it back into my editor. I find this technique especially useful for quick alphabetizing.
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.