I changed the colour of the glyphicon icon to be blue. To change the colour I have used the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.colorful {
color: blue !important;
}
#media print {
.colorful {
color: blue !important;
}
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>
</body>
</html>
In screen it is showing as blue colour
But in print preview the icon is displayed as black colour
I am using chrome browser. I need to make the icon appear in blue colour in print preview
After inspecting your icon, it becomes apparent that you need to have :before as the selector for your icon so that you can properly apply the color in print. See screenshot below:
That said, you need to modify your CSS accordingly. Run the snippet below, then press Ctrl+P. You'll notice that your icon is now blue in print preview.
.colorful {
color: blue !important;
font-size:41px;
}
#media print {
.colorful:before {
color: blue !important;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>
Related
I installed this code on a single page PHP page and it works the way I want it to. Problem is page I need to install it on is broken up into 4 PHP pages.(Home.php, which also includes, Header, Menu, and Footer PHP pages...) and I can't get the code to work. I've tried installing it different places but no luck... if anyone can help would be much appreciated... Code is below.
page to install on is: http://tonysatthejhouse.com THANKS!!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<link rel="stylesheet" href="http://tonysatthejhouse.com/superadmin/assets/css/Mag3.css" />
</head>
<body>
<h1>THIS IS A TEST</h1>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="http://tonysatthejhouse.com/superadmin/assets/js/MagJS4.js"></script>
</body>
</html>
$(document).ready(function() {
$.magnificPopup.open({
items: {
src: 'http://tonysatthejhouse.com/superadmin/assets/extraimages/Restaurant_Week AD-01.jpg', // can be a HTML string, jQuery object, or CSS selector
type: 'image'
}
});
})
.white-popup {
width:500px;
height:700px;
overflow:auto;
padding:10px;
background:white;
border:2px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
I'm new at Ionic. I'm try to setup a navigation bar with an icon and a text. With this code, I have both:
<style>
.title-image {
height : 30px;
width : 30px;
}
</style>
<ion-view>
<ion-nav-title>
<img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span>
</ion-nav-title>
</ion-view>
My problem is the icon is too up. How can I change the position only of the icon or only of the text? Because I only found how to move both, but not only 1 of them.
I'm new at Ionic, so if there is an easy solution, say it to me! :D
You can add to your CSS a vertical-align:middle;
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
.title-image {
height: 30px;
width: 30px;
vertical-align: middle;
margin-top: -3px;
}
.title-text {
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<ion-view title="onepage">
<ion-nav-title>
<img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
</ion-nav-title>
<ion-content class="padding">
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
I want to use gradient color as my page background
how do I apply css to get gradient background?
See:
Cross-Browser CSS Gradient
(source: webdesignerwall.com)
CSS 3 supports gradients but this won't be supported by all browsers (eg IE6).
But you could do this, which I think is pretty similar to the previous answer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
}
div#bg {
background: url(http://www.khiba.com/PSP/FALL01/Testgrad.jpg) repeat-x;
height:600px;
}
</style>
</head>
<body>
<div id="bg">
</div>
</body>
</html>
if you want your site to be compatible with all browsers, you can use this :
background-image: url(someurl.gif);
background-repeat: repeat-x;
the someurl.gif image should contain the gradient that you want. Have it as a very small piece of image and you can extend it with repeat-x or repeat-y. whichever you prefer.
You can use the linear-gradient function in CSS.
Add this to your css file:
body {
background: linear-gradient(0deg, COLOR1, COLOR2);
}
Replace COLOR1 with the first color and COLOR2 with the second color.