I'd like to change the font-family used by Jquery UI to web font using #fontface. I have created my own css file, named my.css and I supplied it with the follwoing CSS:
#font-face {
font-family: "Conv_mry_KacstQurn";
src: url('fonts/mry_KacstQurn.eot#iefix') format('embedded-opentype'),
url('fonts/mry_KacstQurn.woff') format('woff'), url('fonts/mry_KacstQurn.ttf') format('truetype'), url('fonts/mry_KacstQurn.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body *{
font-family: "Conv_mry_KacstQurn";
}
The code of my page header section is as the follwoing:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/my.css" rel="stylesheet" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
/* initiation of UI code */
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Conv_mry_KacstQurn", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
Using body * in my.css makes everything well and the web font is rendered in the Jquery UI elements as well. The problem is when I want to use multiple font families in the page. So I want to know how to set a web font to be used with Jquery UI elements without using body * selector?
Thank you for all viewer, I had find the answer. Simply, it includes to replace the order of the two linked css files to be:
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<link type="text/css" href="css/my.css" rel="stylesheet" />
Then copying the follwoing CSS rules from css/custom-theme/jquery-ui-1.8.22.custom.css and then pasting them in my.css with adding the font-family I want to the font-family properties found there:
* Component containers
----------------------------------*/
.ui-widget { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #2191c0 url(images/ui-bg_highlight-hard_75_2191c0_1x100.png) 50% 50% repeat-x; color: #eaf5f7; font-weight: bold; }
.ui-widget-header a { color: #eaf5f7; }
That's all, and now all Jquery elements have the font-family that I want.
Related
i'm using vs code
i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.
please reply if you have a plausible answer :) thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<a class = "one" href = "/index.html">MAIN</a>
</head>
<body>
<p id="p1">Websites by Froggy Sites!</p>
<p id="p2">Nelson Mandela - The Promotion</p>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON\ CLUB\ MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON\ CLUB\ MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
</body>
</html>
Your are probably using your CSS without including it or in wrong place.
Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.
If you use external version. For example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>My site</title>
</head>
<body>
Other HTML STUFF HERE
</body>
</html>
Or if you use style tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
all styling here
body {
margin: 0;
}
</style>
<title>My site</title>
</head>
<body>
All HTML HERE
</body>
</html>
You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".
ex. #p1{ ... } instead of .p1{ ... }
As stated above first you should make sure to reference the elements
in the proper way, either if you need to do it by class (".") or by
Id ("#") in the CSS code.
I have give some standard order to your code within the HTML
structure for improving readability.
Also there are some typos and invalid spaces.
Check the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON/CLUB/MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON/CLUB/MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
<title>Main</title>
</head>
<body>
<a class="one" href="index.html">MAIN</a>
<p class="p1">Websites by Froggy Sites!</p>
<p class="p2">Nelson Mandela - The Promotion</p>
</body>
</html>
I left the HTML and CSS in one single file as it is in your initial example.
For some reason I can't get Google Fonts to work correctly on Safari. Both on a Mac and on mobile. Any suggestion to what I can improve to make it work on Safari too?
I have tried both
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;500;700&display=swap');
</style>
and
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
Even embedding them locally as Woff2 fonts.
The CSS to show the font is
body {
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #6b6a6a;
font-family: oswald !important;
text-transform: uppercase;
background:#202020;
background-size: contain;
display:none;
overflow:hidden;
overflow-y:scroll;
}
.text_widget {
font-family: lato !important;
font-weight: 400;
text-transform: none;
margin-top: 40px;
}
You need to use CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
When trying to apply a style to a specific page on a website (The exact same style works elsewhere on the webserver), I receive the following error
Refused to apply style from 'style.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I've tried running the file locally, while only importing the file into HTML and it works perfectly fine. I've also tried this on the same webserver on a blank page, and again, it works perfectly fine.
I've also replaced the file due to worries of it being the encoding of the file, and I've removed all comments from the file (As per this answer).
The entire contents of the CSS file is as follows
#Main_ctl01_lst {
width: 320px;
}
#Main_ctl02_txt{
height: 25px;
width: 200px;
}
#Main_ctl03_txt {
width: 250px;
}
.label #Main_ctl04_lbL:fter {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl05_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl06_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl07_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl08_lbl {
font-size: 0;
}
.label #Main_ctl09_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl010_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
.label #Main_ctl110_lbl {
font-size: 0;
}
.label #Main_ctl11_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl13_lbl:after {
content: "*";
font-family: inherit;
font-size: 9pt;
color: red;
}
/* Line 3*/
.label #Main_ctl114_lbl {
font-size: 0;
}
.label #Main_ctl115_lbl:before {
content: "*";
font-family: inherit;
font-size: 9pt;
}
/* Line 4*/
.label #Main_ctl16_lbl {
font-size: 0;
}
.label #Main_ctl17_lbl:before {
content: "Content";
font-family: inherit;
font-size: 9pt;
}
.label #Main_ctl118_lbl {
display: none;
}
.input #Main_ctl19_dp {
display: none;
}
.input1 {
visibility: hidden;
}
.input2 {
display: none;
}
.label {
display: none;
}
body {
background-image: url(https://example.com/image.png);
background-color: rgb(255,0,0);
background-color: #FF0000;
}
and the header code of the web page
<head>
<script src="/Content/jquery-1.9.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Content/jquery-ui-1.8.14.custom.css">
<script src="/Content/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="/Content/Test.Scripts.js" type="text/javascript"></script>
<script src="/Content/Reflection.js" type="text/javascript"></script>
<script src="/Content/CollapsibleCheckBoxList.js" type="text/javascript"></script>
<script src="/Content/Scripts.jQuery.Extensions.js" type="text/javascript"></script>
<title>Test</title>
<link rel="shortcut icon" media="all" type="image/x-icon" href="/Content/favicon.ico">
<script type="text/javascript" src="/content/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="/content/jquery.calculation.min.js"></script>
<script type="text/javascript" src="/content/jquery.format.1.05.js"></script>
<script type="text/javascript" src="/App_Templates/FrontEnd.Test/TestScript.js"></script>
<link href="/App_Templates/Common/_Reset.css" type="text/css" rel="stylesheet">
<link href="../App_Templates/FrontEnd.Test/Standard.css" type="text/css" rel="stylesheet">
<link href="../App_Templates/FrontEnd.Test/Template.css" type="text/css" rel="stylesheet">
<link href="/App_Templates/Common/Menus.css" type="text/css" rel="stylesheet">
<!--[if lte IE 8]>
<link href="../App_Templates/Common/IE8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="/WebResource.axd?d{{removed}}" type="text/css" rel="stylesheet"><link type="text/css" href="/s3?Styles.CssFile/{{culprit_file}}.css&{{removed}}" rel="stylesheet">
</head>
If the script works as intended, I expect to see a red background. As previously stated, this is the case elsewhere, but not on this specific webpage.
In reality, nothing in the file is loaded due to the MIME type issue.
This was popped on the back burner for some time (I've only just come back around to it!).
This issue was fixed in its entirety by uploading the file from a different machine. After looking through possible reasons as to why the file would not upload from the original machine, we came up blank.
We believe it may be due to an issue with new lines and carriage returns. We can't see any evidence of this though. I apologise for the lacking answer, though we're truly stumped on this one.
I want to add a Leaflet map to my Website. Unfortunately my own CSS file seems to override Leaflet's CSS-file on some elements.
The map's zoom buttons should look like this:
But they now look like this on my homepage:
I wonder if it is my own CSS file overriding the CSS from Leaflet. But how can I prevent this? Have a look at my #content a. Seems like the zoom buttons are interpreted as a link and so take the CSS properties from my file.
body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
padding: 0;
margin: 0 auto;
}
#content {
background-color: #FFFFFF;
width: 700px;
float: left;
padding: 0 2.5em 0 2.5em;
margin: 0;
}
#content p, ol, ul {
font-family: "Open Sans Condensed", sans-serif;
color: #444444;
}
#content a:link, #content a:visited {
color: #C09100;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #C09100;
text-decoration: underline;
}
#map {
height: 400px;
width: 100%;
margin: 0 auto;
}
strong {
color: #444444;
font-size: 100%;
font-weight: bold;
}
h1 {
color: #444444;
font: 3em "Amatic SC";
text-align: center;
}
h2 {
color: #444444;
font: 2em "Amatic SC";
text-align: center;
}
<html>
<head>
<!-- Link to Leaflet's CSS file: -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- My own CSS file: -->
<link rel="stylesheet" type="text/css" href="rumkommenstyle.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="JS/Leaflet.MakiMarkers.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="map">
<script type="text/javascript">
var layer = new L.StamenTileLayer("watercolor");
var map = new L.Map("map", {
center: new L.LatLng(56.074207, -3.376634),
zoom: 6
});
var icon = L.MakiMarkers.icon({
icon: "marker",
color: "#900",
size: "m",
});
map.addLayer(layer);
L.marker([56.074207, -3.376634], {
icon: icon,
title: 'Crossgates, Fife, Scotland',
alt: 'Crossgates, Fife, Scotland',
}).addTo(map);
</script>
</div>
</div>
</div>
</body>
</html>
(answer edited)
Short answer:
To get the black color on your zoom in/out buttons, you can add this to your css:
.leaflet-bar > a:link { color: black; }
Long answer:
You notice that your div with id="map" contains a script. When this script is run, it creates a div with class leaflet-bar in which the zoom buttons are actually links.
So, if you look at the tree of elements, you'll find that #content contains div.leaflet-bar which contains the zoom links.
So, which color should apply to the links ( #content a:link or .leaflet-bar a:link) ?
Colors of leaflet links are set in http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.