Change font of all texts in my Ionic APP - ionic2

Somebody know how can I change font of all texts (for example Dosis google font) in ionic 2?
Thanks in advance.
Best regards.

I did this in my ionic2 app with Quicksand google font:-
Download your favourite font
Add the regular font file from your downloaded zip to src/assets/font(adding a regular font gives you the flexibilty to play with font weights going ahead)
Then go to theme/variable.scss
Add the following code
#font-face {
font-family: GlobalFont;
src: url("../assets/fonts/Quicksand-Regular.ttf");
}
body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'GlobalFont' !important;
}
then...
ionic serve
Voila..!!

This topic was already discussed in the Ionic forum! https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

Related

How to customize the style of the vimeo subtitles?

I'm trying to remove the black background on the vimeo subtitles.
I added some css to override the default styles but it seems to ignore it.
.player .vp-captions>span {
background: transparent !important;
text-shadow: 2px 2px 2px black !important;
}
Subtitles on video and on other video players come from a .VTT .ASS or .SRT file. The kinds of look like this.
1
00:02:26,407 --> 00:02:31,356 X1:100 X2:100 Y1:100 Y2:100
<font color="#00ff00">Detta handlar om min storebrors</font>
<b><i><u>kriminella beteende och foersvinnade.</u></i></b>
2
00:02:31,567 --> 00:02:37,164
Vi talar inte laengre om Wade. Det aer
som om han aldrig hade existerat.
I doubt you will be able to style the subtitle file programmatically from Vimeo API, altho you could pull the subtitle files and rewrite them with your own style.
That being said, if you are playing the video in a html5 player, you could override the styles.
Lots of content creators like to burn them into the video itself using simple online video editors

Oracle Apex Background Image Display

I am trying to edit the Login page for Oracle Apex Application.
.t-PageBody--login .t-body{
background: url(#APP_IMAGES#dataact_back.jpg)
background-size: 100% Auto;
}
After I've applied above CSS code in the css field, website still isn't displaying the image and I have no idea where it went wrong.
Your syntax is wrong and you should try this:
.t-PageBody--login .t-body {
background: url(&APP_IMAGES.dataact_back.jpg);
background-size: 100% Auto;
}

Shiny - how to center and fix width of dashboard

Hello R Studio Community,
I've been developing an app in Shiny and it's be great. I have one simple question.
As different browsers have different widths, is there a way to set the rule on resizing the Shiny dashboard based on the following:
1) If browser width is more than x, limit to width to x and center the entire dashboard
2) If browser width is less than x, follow default autosizing
3) Not essential. But how do I set the blank space color to the left and right of the dashboard
The motivation is that I need a fixed width so that some pictures are scaled correctly. I hope my request can be done through some div tag on the dashboardPage.
This is the current behavior which I do NOT want.
Shiny dashboard stretches to fit window
Cheers,
Donny
Hi to achive what you are asking for just add the following code to the beginning of your dashboardBody. something like this
dashboardBody(
tags$head(
tags$style(
"body{
min-height: 611px;
height: auto;
max-width: 800px;
margin: auto;
}"
)
),
... #the rest of you ui code
hope this helps

Creating a Bartik sub-theme in Drupal 8

I have been playing with Drupal 8. At the moment I want to have an image as the header background in Bartik. For this I created a subtheme called "freex" in the following way:
Create folder freex in /themes/custom/
Create freex.info.yml in /themes/custom/freex/ containing:
name: Freex
description: Basis thema voor verenigingen
type: theme
core: 8.x
base theme: bartik
libraries:
- freex/global-styling
Create file freex.libraries.yml in /themes/custom/freex/ containing:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
Create file in /themes/custom/freex/css/ called style.css containing:
#header {
background-color: yellow;
}
Just to see of it works... It doesn't, the header does not change background color. Any ideas as to what I am missing?
Turn off the page cache: Configuration Menu -> Development -> Performance
Uncheck the checkboxes : Aggregate Css files, aggregate javascript files.
If you do this, when you see page source, you see your file name style.css - not the generated css file name, as you write. At the top of the performance page, click to clear all cache. And after that, see your page.
The Bartik theme includes colors.css last (I think it's auto-generated from the theme settings) so the subtheme colours are overriden by the later color module colours.
Add "!important" to your CSS color settings, so they won't be overridden. For example:
#header {
background-color: #CDBE79 !important;
background-image: linear-gradient(to bottom, #CDBE79 0%, #CDBE79 100%) !important;
}

Change the tag-it font size

Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.