In https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (see source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), the links don't have an underline, while in my blog https://yiksanchan.com (see source code https://github.com/YikSanChan/yiksanchan.com), all links come with an underline.
Why? And how can I get rid of the underlines? I have found a related StackOverflow question Links have an additional underline in gatsby but what I try to understand is, how does the using-remark example solve the underline problem without overriding the box-shadow props.
Following Ferran's solution, in my typography.js, I changed
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
}
}
into
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
"a": {
boxShadow: `none`,
},
}
}
to remove the underlink.
Your typography.js file is adding a box-shadow to all <a> elements:
a {
box-shadow: 0 1px 0 0 currentColor;
color: #007acc;
text-decoration: none;
}
If you want to get rid of that styling, just remove the rule of box-shadow property (if it's not a module). If it's a package, just override the styling with another style file (SCSS, CSS, or JS).
Yeah for some reason the default Link styling is a background-image (no idea) and box-shadow (also no idea), set them both to none and you should be right as rain.
Related
I need to extend only several CSS rules in draft-js-emoji-plugin.
Documented way is to pass theme object to configuration:
const theme = {
emojiSelectButton: 'someclassname'
};
const emojiPlugin = createEmojiPlugin({theme});
Unfortunately, this overwrites entire theme classnames instead of adding single one. Based on comments in the code this behavior is by design:
// Styles are overwritten instead of merged as merging causes a lot of confusion.
//
// Why? Because when merging a developer needs to know all of the underlying
// styles which needs a deep dive into the code. Merging also makes it prone to
// errors when upgrading as basically every styling change would become a major
// breaking change. 1px of an increased padding can break a whole layout.
In related issue developers suggested to import draft-js-emoji-plugin/lib/plugin.css and extend it in code. Anyway, each classname in this file has suffixes (CSS modules) and they might be changed so it's reliable.
I don't know how can I apply several fixes without coping entire theme.
a better method would be to import {defaultTheme} from 'draft-js-emoji-plugin' and then extend it as below:
import emojiPlugin, { defaultTheme } from 'draft-js-emoji-plugin';
// say i need to extend the emojiSelectPopover's css then.
defaultTheme.emojiSelectPopover = defaultTheme.emojiSelectPopover + " own-class"
// own class is a class with your required enhanced css. this helps in preserving the old css.
const emojiPlugin = createEmojiPlugin({
theme : defaultTheme
})
and hence use the plugin as you like.
It's nice to have such flexibility, but it really is a pain to rewrite all classes.
What I did was to extract all class names to an object, and with styled-components, interpolated the classNames to the css definition. This way you can extend whatever you want, without worrying about styling a suffixed class (and it changing when they bump a version)
In this gist I've just copied all styles in v2.1.1 of draft-js-emoji-plugin
const theme = {
emoji: 'my-emoji',
emojiSuggestions: 'my-emojiSuggestions',
emojiSuggestionsEntry: 'my-emojiSuggestionsEntry',
// ...
emojiSelect: 'emojiSelect',
emojiSelectButton: 'emojiSelectButton',
emojiSelectButtonPressed: 'emojiSelectButtonPressed',
}
const StyledEmojiSelectWrapper = styled.div`
.${theme.emojiSelect} {
display: inline-block;
}
.${theme.emojiSelectButton}, .${theme.emojiSelectButtonPressed} {
margin: 0;
padding: 0;
width: 2.5em;
height: 1.5em;
box-sizing: border-box;
line-height: 1.2em;
font-size: 1.5em;
color: #888;
background: #fff;
border: 1px solid #ddd;
border-radius: 1.5em;
cursor: pointer;
}
.${theme.emojiSelectButton}:focus, .${theme.emojiSelectButtonPressed}:focus {
outline: 0;
/* reset for :focus */
}
// ...
`
export const GlobalStyleForEmojiSelect = createGlobalStyle`
.${theme.emoji} {
background-position: center;
//...
}
export default (props) => (
<StyledEmojiSelectWrapper>
<GlobalStyleForEmojiSelect />
<EmojiSelect /> // lib button component
</StyledEmojiSelectWrapper>
)
In the html I can use ngStyle to write:
<some-element [ngStyle]="objExp">...</some-element>
Where objExp returns
return {
"background": "red"
};
This works, and turns the background of the element to red.
There are times when I want a fallback values. For example, if I was dealing with gradients I would need -webkit-linear-gradient, -o-linear-gradient then linear-gradient.
I can't add multiple values with the same key to a javascript object.
I guessed at
return { "background": ["red", "blue"] }
but that doesn't seem to work. I've also tried { "background: "red, blue" }
I don't want to use the <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> because that loads complexity repetitively into my html. I can't use [style]="expresionThatGivesAString" because it breaks in Safari.
"red" and "blue" are set at runtime, which is why I'm binding them straight to the element. So putting them in classes isn't an option.
How do I set multiple background values using ngStyle?
For complex rules, use ngClass directive instead. Setup classes in your component styles
component.css
.gradient1 {
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
}
.gradient2 {
background: -webkit-linear-gradient(black, white);
background: -o-linear-gradient(black, white);
background: -moz-linear-gradient(black, white);
}
Your component should determine which class is active; the class in turn applies the fallback values as defined in the CSS.
component.ts
// Will determine which class to apply.
getClass(){
return someCondition ? 'gradient1' : 'gradient2';
}
Then in your template, just apply the class by binding to the function result.
component.html
<some-element [ngClass]="getClass()">...</some-element>
I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}
For standard browsers you can use something like this to change the coloring of selected text:
div.txtArea::selection {
background: transparent;
}
div.txtArea::-moz-selection {
background: transparent;
}
div.txtArea::-webkit-selection {
background: transparent;
}
But I need to do this with JavaScript instead.
My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.
I have tried a few things including:
$('div.txtArea').css({
'selection': 'transparent',
'-moz-selection': 'transparent',
'-webkit-selection': 'transparent'
});
Is there a way to do this with javascript?
There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:
// Get the first stylesheet
var ss = document.styleSheets[0]
// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);
}
You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.
I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.
Hello I am using jquery layout plugin from http://layout.jquery-dev.net/ .
my options are following:
<script>
$(document).ready(function(){
// create page layout
pageLayout = $('body').layout(
{applyDemoStyles: true,
spacing_open:0,
spacing_closed: 0,
slidable: false,
togglerLength_closed: 0
});
pageLayout.panes.north.css('backgroundColor','#A6f');
// we need to remove the borders as well....
});
</script>
This removes sliders but:
How to remove the pane borders as well?
thanks Arman.
Remove one border:
pageLayout.panes.north.css('border','none');
Remove all borders:
As you should be quite sure that each pageLayout.pane will have o as a property:
for(property in pageLayout.panes){
pageLayout.panes[property].css('border', 'none');
}
How you should really do it - checks to make sure o is a property of pageLayout.pane before attempting to access it:
for(property in pageLayout.panes){
if(pageLayout.panes.hasOwnProperty(property)){
pageLayout.panes[property].css('border', 'none');
}
}
I haven't tried this plugin yet but since your last line is pretty much like the usual css try this.
pageLayout.panes.north.css({'backgroundColor' : '#A6f', 'border' : 'none'});
Using a css rewriting. After including the css layout file in the head section (usually jquery.ui.layout.css) you could add a style that rewrites the original.
<style>
.ui-layout-pane {
background: #FFF;
border: 0 none; //This rewrites the original style
padding: 10px;
overflow: auto;
}
</style>