I want to make my portfolio in Jekyll and I have 4 projects I want to show on frontpage. Each one of them has one unique color (ex. #555, #000, #fff, etc.). Where can I create this variable for each post so I can use this color on frontpage as <div style="background: {{ post.color }};">
You can set a variable in post/page font matter.
Do not set the hex color value but a class name.
---
title: my title
layout: mylayout
class: pageClass1
---
This class can then be applied in the mylayout :
<div class="{{ page.class }}">
Then set the style in your css/scss file :
.pageClass1{
backgroud: red;
color: white;
.... any other rule for this class
}
You can define any such global variable in _config.yml and can easily access like {{site.postColor}}
Related
I have an html-document and a typescript-document, they are linked together.
in index.html
<p id="miniTag" class="red">This is my paragraph</p>
in main.ts
document.getElementById("miniTag") as HTMLElement;
My question is--> how do I make the p-tag/ID red through typescript?
I have tried this
in main.ts
document.getElementById("miniTagg") as HTMLElement{
color: red;
}
but I get wrong message because of {} ..
This will set the "color" css property to "red":
document.getElementById("miniTagg").style.color = "red"
This page gives more information about how to modify the style of an element using javascript.
I am trying to add a CSS class to the whole form_row in a twig template from Symfony 4! As you can see from the image, my code right now only adds the class to the input tag, put I need the class to be added to the parent div container.
Below is my code:
{{ form_row(form.firstname, { 'attr' : {'class' : 'first_name'} }) }}
below is an image of the rendered code:
From the documentation of symfony:
attr: A key-value array that will be rendered as HTML attributes on the field.
This means the attributes only get applied to the field.
You could instead wrap the whole div in another div like so:
<div class='first-name'>
{{ form_row(form.firstname) }}
</div>
And then apply the style either to div.first-name or div.first-name > div
Alternatively: Render the whole row yourself
With the following you can render the label and widget yourself:
<div class='first-name'>
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.
For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].
If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.
My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?
Because we can't modify tabs with custom css, so I have to add it to variables.scss...
if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value
consider this example
style.css
:root {
--color : red;
}
* {
color:var(--color)
}
AppComponent
colorList = ['green', 'blue'];
updateColor(color) {
document.documentElement.style.setProperty(`--color`, color);
}
Template
<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>
stackblitz demo 🚀🚀
sass variable are going to compile at build time to there values so they are not reusable at run time
For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().
<div class="progress" [style.height]=currentLevelPercentage>
This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.
For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).
in tabs-page.scss :
:root {
--color1: white;
--color2: white;
--color3: white;
--color4: white;
}
super-tab-button:nth-of-type(1) {
background-color: var(--color1)
}
super-tab-button:nth-of-type(2) {
background-color: var(--color2)
}
super-tab-button:nth-of-type(3) {
background-color: var(--color3)
}
super-tab-button:nth-of-type(4) {
background-color: var(--color4)
}
in tabs-page.html : do nothing particular
in tabs-page.ts :
constructor(public navCtrl: NavController, public navParams: NavParams) {
document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
}
Thank you #malbarmawi !
Just an idea about changing style dynamically. here is what i am using
<span [style.width]=foo></span>
Change the value of ‘foo’ in your .ts file
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding
Simply try this
[ngStyle]="{'background-color': item.color}"
I try to change color of the ion-title in ionic 2.
I have this following code:
<ion-header>
<ion-navbar>
<ion-title primary>Title</ion-title>
</ion-navbar>
</ion-header>
The color of the ion-title don't change. I try several things like:
<ion-title color="primary">Title</ion-title>
<ion-title>
<p primary>Title</p>
</ion-title>
With the second I have the title in the right color, but the header is big. So I add this in the variables.scss:
$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem; // android
But nothing change.Does anyone have a solution? Or do I have to use the p or h tag to change the color?
Remove the color="..." from the ion-title element and use this sass variables in your variables.scss file:
$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;
If you want to use one the colors included in the named color variables
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
...
custom: #777
);
You can do it by using map-get like this:
$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);
Note:
Setting the color with just the color attribute has been deprecated since the 3.0.0 version of Ionic more info.
Update:
[...] all the element on the navbar change color, Can we just change
the ion-title? Or have a second variable to change the other elements?
You can add this style rule in the app.scss file (to make it global) and it will only change the title and nothing else:
.toolbar-title.toolbar-title-md,
.toolbar-title.toolbar-title-ios,
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }
I know this question has been answered, but an another way to set the text colour in the title is in the variables.scss file,
$colors: (
calm: (
base: #000,
contrast: #ffc900
),
etc..
);
<ion-navbar color="calm">
<ion-title>Some Text</ion-title>
</ion-navbar>
base will be your background colour and contrast will be your text/icon colour
As an alternative, one can use something like this:
ion-toolbar { --color: #940000 }
Set the color as you wish; put in *.scss file.
Enjoy!
I have got two pages. The first one, parent.jade, which contains:
div.header
block header
And the second one, child.jade, contains:
extends main
block prepend header
So, how I can to add a class for header block in my child.jade? I need to have other class naming at the different pages.
Yes, but you must pass a object to jade to be that which is rendering. I.e.
In nodejs
jade.renderFile('child.jade', {
"myIds" : 'FristPage',
"myClass" : [ 'this', 'is', 'cool' ],
})
In your parent.jade
div.warpper( id=myIds, class=myClass )
block content
When render show
<div class="warpper this is cool" id="FristPage">
The block form child.jade
</div>
But it can not do directly from jade or from files jade.