This might be a stupid or wrong question but what is the scope of an NPM package's default styling? If I'm using an NPM package but want to modify the color of one of their displays how do I got about doing that?
In my own index.css file and in the package's css file I've changed a background color of one of the divs. It works in my local environment but not in deployment-- it reverts back to the default.
In my index.css file:
.react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
In my node-modules/react-slideshow-image/components/general.css file:
.react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
This is correct. I wouldn't edit the node module directly. However, you should increase specificity to prioritize your custom CSS. For example:
.your-custom-container .react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
In the event that in the production site the style sheet does not reflect right away, consider refreshing your cache as necessary (e.g., ctrl+f5).
Related
could every one help me in this case, i have arounds 20k line css from multiple file css,
i need export only one rule for common style :
the file css example :
#course-main .lay-06 .content-01,
#course-main .lay-06 .content-02,
#course-main .lay-06 .content-03 {
width: calc(100% - 10px) !important;
height: calc(33% - 10px) !important;
margin: 5px !important;
flex-shrink: 0;
flex-grow: 0;
}
.view-slide {
width: 14px;
height: 14px;
display: inline-block;
border-radius: 7px;
cursor: pointer;
border: 1px solid #colorPrimary;
}
and i want to export this to:
.view-slide {
border: 1px solid #colorPrimary;
}
mean remove another rules except css have line with #colorPrimary;
could i achieve my goal with regex ?
You can try this:
/([\w#\.\-]+)\s*{[^{]*?([^;{]*#colorPrimary)/gms
The first group has the CSS selector and the second has the propriety.
You can try it here
So someone has asked something fairly similar before but didn't get an answer.
I am learning SASS and am using the live sass compiler in vs code but it is not updating anything. The only way I can get the app.css file to show the changes is to press the watching button and basically reset the thing. It didn't used to do this. All changes were shown as soon as I saved the file. There doesn't seem to be anything in the output terminal that shows an issue. Is this the only way to see live changes in sass files when working in a local environment or is there a better way.
.header {
height: 8vh;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
align-items: center;
display: flex;
color: #fff;
padding: 30px 20px;
&__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
}
&__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 35px;
}
&__searchIcon {
padding: 5px;
height: 36px !important;
width: 36px !important;
background-color: #cd9042;
border-radius: 0 6px 6px 0 !important;
}
&__searchInput {
padding: 10px;
border: none;
width: 100%;
border-radius: 6px 0 0 6px !important;
}
&__nav {
display: flex;
justify-content: space-evenly;
}
&__boxes {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
margin: 0 10px;
text-transform: capitalize;
text-align: left;
}
&__boxesFirstLine {
font-size: 12px;
line-height: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
}
&__boxesSecondLine {
font-size: 14px;
font-weight: 700;
line-height: 15px;
padding-bottom: 5px;
padding-right: 9px;
}
&__basketText {
color: #fff;
font-size: 14px;
line-height: 15px;
font-weight: 700;
padding-bottom: 5px;
padding-right: 9px;
text-transform: capitalize;
}
}
For all those facing issues with Live Sass Compiler not watching. Here is the solution.
After our extension is installed in VScode, we are going to look at some settings.
Go to settings (Click on the settings icon on bottom-left corner of your VSCode, and in the menu that appears click on settings).
Then a Search field will appear at the top, we will type and search for Live Sass Compiler.
Click on Live Sass Compiler once it appears and again click on Edit in Settings.json link and add following json:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
],
Save and we are good to go.
STEPS: Providing Images for ease.
Now FOLDER STRUCTURE:
a) After creating your project folder in any of your Disk drives. Open it in VSCode and create the dist folder within project folder/ root of your project. And create an index.html file within the dist folder.
b) Then create another folder within the root folder and we are going to name it scss and within here we are going to create a main.scss.
c) Then we can click on Watch Sass at the bootom of VSCode, Now Live Sass Compiler will keep watching for any changes in the main.scss and based on our path set in settings.json, it will automatically create the css folder within the dist folder and a main.css file as well which ultimately goes to production.
My CSS style not working properly for IE 11 and Safari browsers. I searched every possible place to find an answer but failed. a lot of people talking about cross-browser CSS problem but no one did a working example and show how it's done properly. so if you guys know please help me to overcome this issue.
this is a part of my CSS I found not working for IE and safari
<style> .lap_drop_dwn:before {
content:"";
position: absolute;
right: 31px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent rgb(0,0,0,0.5) transparent;
}
.drop_dwn_items {
display: block;
width: 100%;
height: 50px;
background-color: rgb(0,0,0,0.5);
text-decoration: none;
line-height: 50px;
font-size: 22px;
color: #fff;
padding: 0 20px;
text-align: center;
}
</style>
this is a part I found, but my CSS file is quite large so there could be many so hard to find manually. it would be better if there is some script which automatically fixes those errors according to particular browser needs.
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I need to hack some the styles in GWT Clean theme.
For eg. .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #CCCCCC;
padding-left: 5px;
padding-top: 6px;
}
The above style exists in GWT Clean theme.
The following is the hacked one,
#external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #FFF000;
padding-left: 1px;
padding-top: 0px;
top: 0px;
width: 140px !important; }
In the UI i see the style in the Clean.css.
My hacked style is not applied.
But only the following lines are considered from my hacked Style
top: 0px;
width: 140px !important; `
These 3 lines are not applied
background: none repeat scroll 0 0 #FFF000;`
padding-left: 1px;
padding-top: 0px;
So can anyone help me?
Thanks in advance,
Gnik
It is fixed by adding !important; with all the properties.