I installed that angular2 plugin called "ng-daterangepicker" , then I wanted to resize a div inside it, I changed the .sass file but nothing changes on my browser (I cleared the cache but still not working) , I think that I should modify .scss files but I found none on the plugin, I found just plain sass files.
.calendar-container
display: inline-block
width: 330px
height: 100%
padding: 20px
border-right: 1px solid $border-light
float: left
I changed the width from 340px to 330px, but on the browser I still find that 340px.
here is the strange part : I deleted the .sass file but everything is still working, so I think that maybe the component gets its styles from somewhere else.
Usually, it's a bad idea to change the source code of a plugin. In case you update the component or reinstall the project, every custom change you added to that specific plugin will be discarded.
What you can do instead is to add a CSS class to the directive like so:
<!-- app.component.html -->
<ng-daterangepicker class="myCustomDateRange" [(ngModel)]="value" [options]="options"></ng-daterangepicker>
and then point to the element you need and add custom CSS for it in one of your SCSS files.
<!-- someStylesFile.scss -->
.myCustomDateRange .ng-daterangepicker .calendar .calendar-container { width: 330px; }
Related
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
This is probably already answered somewhere so I apologize, but I couldn't find a solution for more recent versions of React and it's something I'm just very confused by.
I am running the most recent version of React and am currently creating a registration page for my app. I have a CSS file I imported with import "./RegistrationPage.css" and have also tried using import registrationCSS from "./RegistrationPage.css". Each input also has a unique id.
I am deploying my application using AWS Amplify, and my issue is the CSS is different between my dev build and production build. On my localhost the id css are affecting my page properly but className css are partially working, but when I look at my deployed page all the className css appear different than in dev. This is a big issue since I never know what my app will truly look like till I deploy it.
I included 2 images as an example.
Production Build
Dev Build
What's the fix for this?
Thanks.
Edit: I've noticed the class css property are affecting it some if I were to remove it or change it, but that shouldn't affect it from dev to prod build I wouldn't imagine, and then it's affected even different when it's deployed (font/padding/etc shown in the images). I've also gone through all my css files several times and haven't noticed any other property that I believe could be affecting it like this. The wrapper css property seems to function differently as well.
RegistrationPage.js
<Col className="registrationWrapperInfo">
<div>
<InputGroup>
<Input id="regGlow" className="registrationInputBoxes"
type="password" value={passwordCheck}
placeholder="Password..." onChange={(e) =>
setPasswordCheck(e.target.value)}/>
</InputGroup>
</div>
</Col>
RegistrationPage.css
.registrationInputBoxes {
width: 100%;
height: 100%;
margin: 5px;
font-weight: bolder;
}
#regGlow:focus {
outline: none;
box-shadow: 0 0 10px #f069ca;
border: 2px solid #f069ca;
}
.registrationWrapperInfo {
min-width: 300px;
max-height: 500px;
border-radius: 20px;
background: rgba(0,0,0,0.65);
box-sizing: border-box;
padding: 30px;
color: #fff;
margin-top: 50px;
margin-right: 30px;
margin-left: 30px;
}
I'm using Reactstrap in this project, and it just now occurred to me it could be overriding my class changes, which it turns out it was. The simple fix for my question was simply to move my bootstrap import above my index.css import in my index.js file.
I had a similar problem. First, I had corrupt CSS files that would not allow me to build the application. Second, apparently it is difficult to compile multiple imported css files from jsx files, to fix this problem I removed all imports from all jsx files and imported them once in index.js (less and css files). Third, in the folder where you save the styles, i delete all subfolders of styles, leaving all the style files in a single folder of styles. This fixed my problem, hope that helps.
For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,
I have been trying to reduce the width and height of language switcher block in D7 but failed to find the corresponding CSS file.
Just overwrite it with your styles. Don't mess with core files.
As "ghyjek" specified, you can overwrite it with your own CSS. But this depends on the order in which your CSS files are loaded. If your CSS file is loaded in the end, you don't need to do anything as it will override it anyways.
If not, you will need to specify more specific selectors to override it. Following is a sample example:-
.someElementClass { width: 10px; height: 10px; } // Drupal default CSS
.bodyClass .someElementClass { width: 10px; height: 10px; } // In your CSS file
Here the second one will override the first one. Also you need to make sure not to mess up with the Drupal's core CSS file as specified by "ghyjek"
Thanks.
There are two CSS files referenced on the same page: A generic.css file and a custom.css file. The generic file has default styles in it that are overridden by the custom.css file for the same elements. This allows users of the site to customize or "skin" their pages without needing to recreate the entire generic.css file. Only a few styles would be overridden.
My question is the following: If the generic.css file has a style for an element with a background image and that same style is overridden in the custom.css with a different background image, is the first image ever downloaded by the browser?
Also, I want to find out if this is bad practice - customizing or "skinning" a generic CSS file with another custom CSS file to override a few styles, including specifying different background images.
While not totally definitive, this site ran some tests regarding this. The significant statement from that site that is related to your question is:
CSS images are kicked off not in the order in which they appear in the
CSS but in the order in which they’re called in the HTML. I’m not sure
of the precise moment when the download is initiated, but my guess is
that it happens just after the CSS rules have been matched, when the
property values are assigned to the DOM elements.
This at least tentatively confirms what I thought I remembered in the back of my mind reading on this a few years back, namely, that background images which are not ever displayed (as in the generic.css images being overridden by the custom.css images) are not ever downloaded.
Further confirmation of this would be the typical image preloader script that used to be so common prior to sprite images (and is still found in certain uses). It was designed to download images that would be used on :hover in css, because without it, the image would not load until the first hover was initiated, and this caused an unsightly delay. So that, also, argues for the fact that unless actually displayed (or preloaded), the background images themselves are never loaded.
I don't think there are generally any issues with "skinning," unless you are essentially overwriting most or all of the generic.css with custom.css, then one could argue, why load the generic at all. But as you said, normally there are just a few styles overwritten.
I think i answered NO and NO BAD PRACTICE. Because when the css file readable / executable by the browser, the browser will make comparisons to find the same value or the difference between css file and then combine them.
Easy example:
css1.css on file there is a line:
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
then the css2.css there is also the line:
.test {background: #991100 url("image2.jpg") no-repeat center center;}
the result of a combination that will be executed and run by the browser are:
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
where the "background: # 991100 url("image1.jpg") center top;" read but not called / executed by the browser.
Far as I know the value of the file css1.css be stacked by the value of the css2.css. What if there a css3.css file? then the file css3.css will also stacking on the combination of css1.css and css2.css.
Hope it helps.