How can I add css attributes box-shadow to standard "mj-button" components?
I'm using the node version 4.5
This is the code of my button:
<mj-button css-class="box-shadow" align="left" background-color="#95C11F" href="#">Button 1</mj-button>
I have tried with the css-class having this code:
<mj-style>
.box-shadow > table td {
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
</mj-style>
But no shadow is displayed.
See https://mjml.io/try-it-live/HySjzKsDv
That's your MJML code, except that I substituted "red" for the rgba() calls. I see a shadow I didn't see before the change.
I can't find it in the MJML documentation that MJML doesn't support rgba(), but it's a "modern" enough addition to HTML that I wouldn't depend on it being in all the email clients MJML authors target. Some are pretty basic.
All the color examples in the MJML documentation I can remember use hex notation ("#F45E43") or named colors.
Good luck.
Related
I'm using the eslint extension, and its producing errors in my code. However is there a way to show a error-indicating gutter on the lines with a error? Currently I just have this red underline:
Is there a way to show a high-contrast gutter next to the line number for errors and warnings?
I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:
(offtop: also on screenshot you can see how "Bracket Pair Colorizer" extension works :)
Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css ... better read whole extension instructions)
Create a css file with contents:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* background */
background: #f2e3b3;
/* underline */
border-bottom: 3px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
/* background */
background: #ffc7c7;
/* underline */
border-bottom: 4px solid #ff0000;
}
And place link to it in settings.json like said in CSS and JS Loader extension instructions
"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,
, then reload...
You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):
border: 1px solid #ff0000;
Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
background: #f2e3b3;
border-right: 5px solid #ffc000;
border-bottom: 5px solid #ffc000;
border-top: 3px solid #ffc000;
border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
background: #ffc7c7;
border-right: 5px solid #ff0000;
border-bottom: 3px solid #ff0000;
border-top: 3px solid #ff0000;
border-left: 1px solid #ff0000;
}
This css will only replace squiggle color from green to yellow:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}
As you can see the name of class changed from .greensquiggly to .squiggly-warning, that's why css from previous answer doesn't work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.
Not sure if it helps. If you change all levels of errors in ESLint to warnings and then install extention Custom CSS and JS you will be able to transform green underline to something else.
.monaco-editor.vs .greensquiggly,
.monaco-editor.vs-dark .greensquiggly {
background: rgba(239, 83, 80, 0.2);
border: 1px solid #1976d2;
}
It can appear (greensquiggly) in some other places, but for me this is working.
based on #last-on-space here is a full override + a small enhancement to make sure the styles dont overlap each other on consecutive lines
.monaco-editor .squiggly-warning,
.monaco-editor .squiggly-error,
.monaco-editor .squiggly-info,
.monaco-editor .squiggly-hint {
border-bottom-width: 4px;
border-bottom-style: solid;
box-sizing: border-box !important;
}
.monaco-editor .squiggly-warning {
background: #ffc00030;
border-bottom-color: #ffc000;
}
.monaco-editor .squiggly-error {
background: #ff000030;
border-bottom-color: #ff0000;
}
.monaco-editor .squiggly-info {
background: #0e7fff30;
border-bottom-color: #0e7fff;
}
.monaco-editor .squiggly-hint {
background: #a2eeef30;
border-bottom-color: #a2eeef;
}
also dont forget to add
"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"
"editorHint.foreground": "#00000000"
under workbench.colorCustomizations to hide the original styles
image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c
I'm using leaflet to render the mapbox map. There is small triangle on the top of marker; how can I hide it?
For others coming across this post who may be struggling with the tooltip triangle, or even the background css of the tooltip, I have put together my research in one place and found the various ways to affect the triangle and the background of the tooltips and the popups!
If you have a POPUP bound to a marker, .leaflet-popup-tip controls the triangle. Here I am hiding it:
.leaflet-popup-tip {
background: rgba(0, 0, 0, 0) !important;
box-shadow: none !important;
}
If you have a TOOLTIP you have added to the map, you can control the tooltip's triangle with this magical css:
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
border: none !important;
}
More styling:
POPUP: You can also control the popup's css as well by targeting .leaflet-popup-content-wrapper. Here I am completely removing all traces of the background/border/box of the popup & enlarging the font:
.leaflet-popup-content-wrapper {
background: rgba(0, 0, 0, 0) !important;
border: none !important;
font-size: 20px;
box-shadow: none !important;
}
TOOLTIP: You can add a class name to a tooltip when you create it such as {className: 'popup'}, and then use that to style the tooltip:
.popup {
background: rgba(0, 0, 0, 0) !important;
border: none !important;
font-size: 20px;
box-shadow: none !important;
}
To see how to add tooltips and popups to the map, and how all of this works together, here is a working example with commenting throughout:
https://repl.it/#MeowMeow/NeighboringConventionalPhp
Hope this is helpful to someone! :)
This triangle is controlled by the .leaflet-popup-tip class in css. If you are using standard Leaflet, you should be able to hide the tip by adding the following to your css (after leaflet.css is loaded):
.leaflet-popup-tip {
width: 0px;
height: 0px;
}
Mapbox actually creates the tip in a slightly different way from standard Leaflet, by styling the element border rather than the element content, so if you are using mapbox.js, you should be able to do it by adding the following (after mapbox.css is loaded):
.leaflet-popup-tip {
border: 0px;
}
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I tried to override a few css properties of the gwt-DisclosurePanel and gwt-DisclosurePanel-open rules to try and remove the vertical line but failed to do so. Here is the image:
How do I remove this vertical line?
The border line in the DisclosurePanel content comes from this rule (in Clean theme as an example):
.gwt-DisclosurePanel .content {
border-left: 3px solid #e7e7e7; // Here is your border
padding: 4px 0px 4px 8px;
margin-left: 6px;
}
Always use Firebug for Firefox or Chrome's built in Developer Tools to debug issues like that. You would get the required CSS rule to override in just a few seconds.
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.