in my current project I encountered the problem that I need to change the color of the underline with SCSS, before I did this using the palette in themes.
For now I got a line to display using the following code.
.input {
border-bottom: 1px solid red !important;
}
But this is obvisously only a workarround. has anyone any idea how to disable the underline (the snippets utilizing the input props didn't work for me) or changing the color palette?
Edit:
I found a solution. I just added
div::after{
border-bottom: 2px solid red !important;
}
div::before{
border-bottom: 1px solid grey !important;
}
to the code and now it works :D
Kind regards,
Frodo
Related
I am trying to apply custom styling on react-datepicker datepicker input. Using modules:
.custom-input {
border-radius: 10px !important;
padding: 5px 10px 5px 30px !important;
border: 2px solid #cccccc !important;
font-size: 16px !important;
line-height: 26px !important;
}
And then I add the className to the datepicker:
<DatePicker
className={s["custom-input"]}/>
I created codesandbox here:
https://codesandbox.io/s/clnd-datepicker-forked-h9ju59
Any idea why its not working, even with !important on?
[EDIT]
Codesandbox is fixed.
Hello Alex : I took the code to my local vs code and updated the code a little bit which worked:
The only difference I code see here is instead of using s[""] you can use like :
import styles or <any name you would like to call it> from "./Datepicker.module.css"
and then call the css class name in the code like:
className ={styles.<cssClassName>}.
See my code ss:
PS: I also found one strange thing about codesandbox is that it keeps complaining about .module.css file in typescript code file. hence my codesandbox that I sent earlier wasn't working well.
For example for same component at some places I want to use border while at other places border-bottom
How can I achieve this?
Also can anyone please tell me what this code in styled component means:
color: ${prop('theme.color.blue', '#0F0F3A')};
Each properties can take 4 values. Set width to 0 if you don't want the border.
div {
padding: 20px;
border-style: solid dashed dotted solid;
border-width: 10px 20px 30px 40px;
border-color: blue yellow green red;
}
<div> I AM A DIV</div>
Is there any way to change onsen-ui lists (ons-list) to look like a CardView as the below picture.
The borders are set in background and I tried to change them and setting padding and margin with no chance.
By changing these styles I have achieved the below picture
.list__item{
border-style:solid !important;
border-width:1px !important;
border-color:#ddd !important;
box-shadow:2px 2px 1px #eee !important;
margin:10px !important;
}
Hi i am using some bower packages but there are some css rule defined like below:
.rn-carousel-indicator {
width: 100%;
text-align: center;
height: 20px;
background-color: black;
I want to override it into my common.css to remove the background-color, I can successfully set it as red but it cannot apply with none:
.rn-carousel-indicator {
background-color: none;
}
Anyway I can do with this? Thanks a lot!
background-color:
The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.
So none is invalid, you should use:
background-color: transparent;
You have a couple of options
background: none;
or
background-color: initial;
Note, initial has some dodgy browser support.
(No support in IE apparently)
background-color: none is invalid. you have to use background color transparent property.
For example:
background-color: transparent;
the Theme I am using (Plasma) has an option in the settings to display the users profile picture, but when I select it, it only shows the picture in the comments.
When I looked at the node.tpl.php in the theme it does not output the $user_picture variable.
So I tried adding this variable myself just below the <header> tag as it is in the comment.tpl.php but the image is displayed above the post, rather than inline with left alignment.
I tried wrapping the $user_picture in <align=left> </align> but this did not work.
So how do I show the picture as left aligned with the header and text of the post wrapped around the user profile picture.
Thanks
Simon
Here is the solution if you are using the the Plasma Theme, but it will probably work on most themes.
In the Theme folder edit the CSS file and add the following code
.node .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
.content .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
Then in your node.tpl.php add the following just above print render($content);
print $user_picture;
This will put the user picture at the top left of the content for every node and teaser. You can still turn off the user profile picture in the theme settings.