I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
So, Here I am writing a solution Thanks to #zim for help.
Step1:
Download Bootstrap icon CSS file, bootstrap-icons.css
Link it in your project
--By including in CSS file
OR
--By linking in HTML file.
After that download the fonts folder from the Bootstrap icons git repository.
--Now open bootstrap-icons.css
And you will find code like this
#font-face {
font-family: "bootstrap-icons";
src: url("../fonts/bootstrapfonts/bootstrap-icons.woff2") //Match this file path format("woff2"),
url("../fonts/bootstrapfonts/bootstrap-icons.woff") //Match this file pathformat("woff");
}
-bootstrap-icons.woff2 and bootstrap-icons.woff make sure you link it properly with bootstrap-icons.css file.
And boom you are good to go.. :)
Related
I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.
I'm working on a Orchard theme using Twitter Bootstrap 3.0.x
I added all scripts and styles into MyTheme/Scripts & MyTheme/Styles.
It works find except Glyphicons images.
In CSS files, it references icons by using a relative path (../fonts/glyphicon.....).
So I created a MyTheme/fonts containing all glyphicons files.
However, when I browse these files are not found (404).
For example, when I browse the source code :
http://localhost:9100/Themes/MyTheme/Scripts/bootstrap.js -> OK
http://localhost:9100/Themes/MyTheme/Styles/bootstrap.css -> OK
http://localhost:9100/Themes/MyTheme/fonts/glyphicons.. -> KO
Any idea to do that ?
I know this is late, but maybe it will help other people. You should put your fonts folder in the Content folder looking like this:
http://localhost:9100/Themes/MyTheme/Content/fonts/
After this you should overwrite in a external css file your bootstrap.css and bootstrap.min.css the #font-face of your Glyphicons.
Looking like this:
#font-face{
font-family:'Glyphicons Halflings' !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot) !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
url(../Content/fonts/glyphicons-halflings-regular.woff) format('woff'),
url(../Content/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
url(../Content/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg') !important
}
Orchard doesn't seem to get content like your fonts outside the Content folder.
I'm completely stumped - what am I missing?
I have a LESS file called Main.less - and VS 2013 automatically generates Main.min.css whenever I save it.
The CSS generated is fine - no errors. When I copy the generated CSS to my Style.css (to verify) it is applied correctly.
I bundle the Main.min.css generated from the LESS file via the usual bundleconfig along with other css files (mainly my bootstrap and site css).
When I run the site, I can see the styles in the referenced bundled source - but the style is not applied! What am I missing?
(here is the .LESS)
#color1: #FFA114;
#color2: #69b1fa;
#std_border: 2px;
.rounded {
border-radius: 10px;
}
.sel_1 {
.rounded;
border: #std_border solid #color1;
}
(here is the .css as it appears in the minified bundle on the browser)
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}
I can only imagine something is wrong somewhere so that the browsers (latest Chrome and IE) don't even apply the styles. No idea what...
EDIT: UPDATE:
I also referred the generated min.css directly
<link href="/Content/Main.min.css" rel="stylesheet" />
and on browser-> view source -> click on the .css you see the following
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}.sel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa}.asel_1{border-radius:10px;border:2px solid #ffa114;border-style:dashed}.asel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa;border-style:dashed}.map_sel{border:3px double #69b1fa}.line{border-bottom:2px #ffa114 solid;padding:10px}
And the styles are still not applied!
The iOS guideline requires launch image for all apps. To my understanding, that's a "default.png" file located in the root folder of your app.
I packaged my app using Sencha CMD v3 and I don't see any launch image while loading.
There are some default launch images located in root/webapp/resources/loading/ folder but they are not showed in my app. Any idea?
The "startupImage" seems only appliable to the app added to the home screen, anyway, here is a part of my app.js:
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
}
Added related posts:
[2.1] Splash screen is white on startup on Android and iOS
I have this at the beginning of my application - I'm not packaging it for iOS, but this seems like what you may need:
Ext.require([
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List'
]);
// Main application entry point
Ext.application({
phoneStartupScreen: 'images/sencha_logo.png',
name: 'Analytics',
// setup our MVC items
Here is a handy-dandy link to the api doc on this:
http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-cfg-phoneStartupScreen
For launch image you need to modify the index.html in your app directory. In here you will find a div with id appLoadingIndicator inside body tag. In my application I have replaced the content of #appLoadingIndicator with an img tag which refers to my splash image.
<div id="appLoadingIndicator">
<img src="resources/images/splash.png" />
</div>
For customizing the css you might want to remove the default embedded styles in index.html present in style tag inside the head tag which are applied to #appLoadingIndicator.
Now add your custom css and you will have your splash image ready.
I installed the Simple Theme plugin on my Jenkins instance, and I managed to do some (very) basic theme changes.
Does anyone have a better reference to the Jenkins theme?
The plugin page is very low on info...
If I want to override a style attribute, I have to dig into the generated html and do a lot of experimenting.
You can customize your known simple theme with .css file.
Make sure that you have .png logo image, I have added 'Jenkins_home/usercontent/mytheme.css' file 'Jenkins_home/usercontent/logo.png' as my logo.
and follow the css below:
#charset “utf-8”;
#header .logo {
height: 36px;
}
/* Custom style for my Jenkins Platform */
.logo {
background: url(/userContent/logo.png) no-repeat 10px center;
}
.logo img {
display: none;
}
.logo:after {
content: 'Jenkins my instance';
font-weight: bold;
white-space: nowrap;
} // Content after logo
Just check in Jenkins Configuration theme must be CSS URL and you must add path of above 'mytheme.css' file.
& Refresh your Jenkins Page.
Found a simple tutorial here for start:
http://www.techgaun.com/2013/06/customizing-jenkins-layout.html
Open Jenkins in Chrome or FireFox and press F12.
Right click on the UI element you want to change and select Inspect Element.
In the debug window the line in the html is highlighted.
Record the id and/or class of the UI element.
Open style.css and search for the id/class.
Copy the css-code and paste it in .css which you save in the css directory.
In the Theme section on the Configuration page enter css/.css as URL of theme CSS.
Now start altering .css to get the looks you desire.
Enable auto refesh to see the changes, Ctrl-F5 also helps