Have been struggling with the header color in the css for some while. I was able to change the footer, but not sure how to access the header element and change the color. Please reference the screenshot for context
Add a directory structure like this to root:
templates/
my-template/
styles/
main.css
In docfx.json, add "templates/my-template" in the template object inside the build object:
"template": [
"default",
"templates/my-template"
]
In templates/my-template/styles/main.css, add something like:
.navbar {
background-color: green;
}
.subnav {
background-color: blue;
}
As reference, you can see the classes that construct the navbar this way:
Run docfx template export.
Find _exported_templates/default/partials/navbar.tmpl.partial.
To modify the partial directly, copy navbar.tmpl.partial here and modify:
templates/
my-template/
partials/
navbar.tmpl.partial
Related
I have a variable file that has two definitions of themes I want to overwrite:
_vars.scss
body {
$bg-color: #fff
}
body.theme-dark {
$bg-color: #333
}
I´m calling the variables in my Angular button component:
button.scss
#import '_vars.scss';
.button {
background-color: $bg-color;
}
But I´m getting the following compiling error:
SassError: Undefined variable.
background-color: $bg-color;
Whats is the right way to overwrite variables depending on my body theme class?
Thanks
You define $bg-color depending on the theme, but never $font-size-18.
On a side note, I would consider to use CSS Custom Properties instead of SASS variables if I was in your shoes. Codyhouse have an interesting and easy to understand article about this, which also talks about color themes.
If you want to dig deeper into this topic you may want to read this article.
First of all variables inside scope valid only in that scope not universally. Now for your question see below :-
_vars.scss
Instead of making variables inside body scope create it in global scope.
$bg-color: #fff;
body {
background-color: $bg-color;
}
and then import it in your button.scss without underscore "_"
#use "vars" as *;
button {
background-color: $bg-color;
}
With third-party components, the way to include their styles is by importing their stylesheet into _app.tsx or importing the stylesheet into your component that uses the third-party component, as described here: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules or by adding to next.config.js like so:
// next.config.js
const withTM = require("next-transpile-modules")([
"#fullcalendar/common",
"#fullcalendar/daygrid",
"#fullcalendar/timegrid",
"#fullcalendar/interaction",
"#fullcalendar/react",
"#fullcalendar/list",
To modify the third-party stylesheet, you need to create your own stylesheet and add it to _app.tsx; those modifications might look like this:
// styles/modified-fullcalendar.scss
.fc-col-header {
width: 100% !important;
}
Another option, at least for my use case (Full Calendar) is to use CSS variables as described here in technique 2 on this page: https://fullcalendar.io/docs/css-customization. There was a lengthy thread about this on the Full Calendar issues page, as seen here: https://github.com/fullcalendar/fullcalendar/issues/5393
The problem with all of these methods of customization is that they're global, and so anywhere you use this third-party component it'll look the same. However, in my case, I want to use the component on two different pages, with different styling modifications. With most frameworks, I would simply import the relevant modified stylesheet wherever I needed it, but NextJS doesn't allow that. How can I achieve the modifications I want?
The solution is to wrap the component in a div with a specific class name, then do the css overrides in a nested format for each use case in the override file.
Explanation:
Say your third-party component is FullCalendar. It's being imported and used in the files Foo.tsx and Bar.tsx. In Foo, let's say you want the calendar cells to be green.
To make the modification, you create the file modified-fc.scss and do the following:
// modified-fc.scss
.fc-cell {
background: green !important;
}
You then import modified-fc.scss into _app.tsx in order to apply the styles globally, and you're done. However, this prevents you from changing the cell color to orange in Bar. To circumvent this, just wrap the component:
// Foo.tsx
<div className=".wrapper1">
<FullCalendar/>
</div>
// Bar.tsx
<div className=".wrapper2">
<FullCalendar/>
</div>
and then nest the classes:
// modified-fc.scss
.wrapper1 {
.fc-cell {
background: green !important;
}
}
.wrapper2 {
.fc-cell {
background: orange !important;
}
}
OR
.wrapper1 > .fc-cell {
background: green !important;
}
.wrapper2 > .fc-cell {
background: orange !important;
}
I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
In React-Admin, I'm trying to apply certain css code inside my Material UI theme as a global attribute. Right when I'm creating my theme, I've been added those lines inside my overrides:
overrides: {
"#global": {
"[class*='RaLayout-content']": {
overflow: "auto !important",
maxWidth: "100vw !important",
},
},
In the entire admin I have many classes like: RaLayout-content-4, RaLayout-content-221, RaLayout-content-31, which are generated by the React-Admin, and I want to apply those css lines in every element that contains the RaLayout-content class.
Because of class names minimization of Heroku deploy, I cannot write those css lines in my index.css cause they'll not apply after the minimization.
Here's how I implemented them before, inside my index.css file (which is working only in development mode):
[class*="RaLayout-content"] {
overflow: auto !important;
max-width: 100vw !important;
}
Notice: I've been also trying to add the MuiCssBaseLine with no success.
Thanks in advance!
I think that you can override the theme with
overrides: {
RaLayout: {
content: {
// your overrides
},
},
...
}
How to remove duplicated styles in individual css files, If they already present in common.css file.
common.css file has below styles.
.nav {
background-color: red;
}
home.css has below styles.
.nav {
background-color: red;
}
.home {
width: 300px;
}
Now, I would like to modify the home.css using gulp task to remove the duplicated class .nav (as I have the class and with the same properties in common.css).
After modifying of home.css file, then I'm excepting the below output.
.home {
width: 300px;
}
I don't want to change or modify the common.css file. Could you please suggest any node package?
You should think of compiling-merging both your files into one 'main' css file where you could clean-minify-etc.
As there is no 'real gain' of removing duplicated of both files if they arent being used on the same page.
And if they are being used a the same page, could use a minified-merged css file, you would also reduce the amount of blocking calls to render your page as well.
Can concatenate your css files with gulp-concat :
var concat = require('gulp-concat');
gulp.task('concat-css', function() {
return gulp.src('./*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dist'));
});
Can remove duplicates using clean-css or gulp-clean-css wrapper :
gulp.task('minify-css', () => {
return gulp.src('dist/*.css')
.pipe(cleanCSS({removeDuplicateRules: 'true'}))
.pipe(gulp.dest('dist'));
});
So you could end up calling concat-css first, then minify-css and would have a main.css file ready to use without duplicate.