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.
Related
i want to generate css or scss for already existing code/project's custom css/scss as separate file and want to switch b/w normal and rtl css through UI interaction.
I'm using rtlcss node package and following this gist for generating css at build time.
Angular version could be any newer is better i.e. Angular 12+
I'm looking for some automated or smart way to do this, i could generate rtl css and append in already existing css file. and prepend [dir='rlt'] with each rule. but flaw in that approach as follow.
// style.css
.my-class {
width: 200px;
margin-left: 16px;
}
[dir='rtl'] .my-class {
width: 200px; // flaw : property repeatation
margin-left: 0; // flaw : adding extra rule & its not neccessary *-left to have zero in every case.
margin-right: 16px;
}
I'm trying to change the padding on mat-cell and I've noticed some weird behavior.
If I write the css inside the component's css file everything works just fine, but if I write it in style.css (I want to apply it to the whole app) it gets overwritten by the default.
I guess this has to do with the order in which the css files are applied. If that is the case, how can I see this order and is there a way to change it or bring style.css on top?
I would suggest to create a separate .scss file reserved for styling globaly Angular Material elements, and importing it in the main styles.scss file.
Answering your question - propably you're not 'specific' enough. First of all it would be nice to add an additional custom class to your Material element so the custom styles will be applied only when this class is present. Example on styling
.mat-table.my-custom-class {
width: 100%;
.mat-cell {
font-size: 20px;
padding: 20px;
}
}
You might nest the elements event more for higher css specificity
That works for me:
.mat-cell {
padding: 12px!important;
}
Check for the parent scope of default style which is overriding css added in style.css using developer tool. Use the same parental scope along with !important.
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; }
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
I recently created a initial template with initializr for a bootstrap project. I noticed that there is a style tag in the body:
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
Is there a reason this is not in a external css file? Or can this be put in a external css without negative implications?
It should be the same as writing an external file. However, it may be an easier way if you have minimal attributes to add.
The only difference is this would override any external css file that set the body to a different padding-top and/or padding bottom.