I have this css file called fonts.css that is inside public/assets/css with the following code
#font-face {
font-family: Lato-light;
src: url("{{asset('assets/fonts/Lato/Lato-Black.ttf')}}");
}
I ahve another file called custom.css with the following code
h1 {
font-family: Lato-light;
}
In my header.blade.php file the code is as follows
<link href="{{url('assets/css/fonts.css')}}" rel="stylesheet" rel="stylesheet" />
<link href="{{url('assets/css/custom.css')}}" rel="stylesheet" rel="stylesheet" />
This code src: url("{{asset('assets/fonts/Lato/Lato-Black.ttf')}}"); is not giving the laravel url its supposed to show but instead its outputting the code as it is.
Am i attaching the font correctly?
Related
I have a simple MVC project and I want to start design it with CSS file,
I created a Style/StyleSheet.css file with this content:
body {
background-color:green;
}
and added the link to it inside _Layout.cshtml, with this line:
<link href="#Url.Content("~/Style/StyleSheet.css")" rel="stylesheet" type="text/css" />
I don't see any change of the background color, what am I doing wrong ?
Help will be Appreciated ! Thanks !
Try basic html:
<link href="/Style/StyleSheet.css" rel="stylesheet" type="text/css" />
or change "..." inside the string to '...' :
<link href="#Url.Content('~/Style/StyleSheet.css')" rel="stylesheet" type="text/css" />
I in the middle of a page want to load a font lazily.
I use Lazysizes ans its plugin Unveilhooks.
This is what the author of the library answered some while ago on this topic: https://github.com/aFarkas/lazysizes/issues/169
As for the font, it is Google's Lobster: https://fonts.google.com/specimen/Lobster
fonts.css
#font-face {
font-family: 'Lobster';
src: '\wp-content\themes\nonverbis\assets\fonts\lobster\Lobster-Regular.ttf';
}
html
<span class="lazyload" data-link="\wp-content\themes\nonverbis\assets\css\custom\fonts.css"></span>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>
To the best of my ability fonts.css is loaded lazily. And inside the loaded fonts.css the path to the font is correct.
But visually the font of the text has not changed on the page.
Could you help me?
Use LazyHTML, but you need to add lazyhtml script into Head
<script async src="https://cdn.jsdelivr.net/npm/lazyhtml#1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>
Add the above script to Head
<div class="lazyhtml" onvisible data-lazyhtml>
<script type="text/lazyhtml">
<!--
<link rel="stylesheet" href="/wp-content/themes/nonverbis/assets/css/custom/fonts.css">
-->
</script>
</div>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>
Lazy HTML Github
I have a large ASP.Net app to which I am trying to add a JQuery/Bootstrap multiselect dropdown (can't add this to Fiddle - to large). I am using a Bootstrap CDN/API to add the multiselect and generic Bootstrap css and js. There is a table in my application. Before I added the Bootstrap, it looked like this.
After I add the bootstrap, it looks like this:
Basically, the word-wrap: break-word; attribute seems to be getting messed up. I have the Boostrap added before my custom css stylesheet as recommended by other posts:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//js.arcgis.com/3.26/esri/css/esri.css?parameter=1"/> <%--"parameter= 1" prevents intellisense error --%>
<link rel="stylesheet" href="Content/Style/Style.css"/>
The table has its own id's for the element and children called #checkBoxesTable.
#checkBoxesTable > tr > td {
word-wrap: break-word;
}
...
.bootstrap-overrides #checkBoxesTable > tr > td {
padding: 10px;
word-wrap: break-word;
}
I've even tried to create a class (see above and below) to override any Bootstrap ids or classes but it doesn't seem to work (the table is dynamically created under the scenarios id in the Default.asmx file). Is there anything else I can try to get the word-wrap to work?:
<div id="scenarios" class="bootstrap-overrides"></div>
After much research, the problem here was the version of generic bootstrap I was using. I went to the multi-select gitHub documentation and looked in the index.html file for their example, which used the following:
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
Once I upped the version to 3.3.2, it worked (with my override class of course).
I have written all my CSS styles into a .css file; now I want to include that CSS file into a PHP file. I have tried this:
<link href="login.css" rel="stylesheet" type="text/css"></link>
but it is not working.
Here is how to include external javascript and css files in your php code
<?php
//include CSS Style Sheet
echo "<link rel='stylesheet' type='text/css' href='path-to-css-file' />";
//include a javascript file
echo "<script type='text/javascript' src='path-to-javascript-file'></script>";
?>
If you want to include the javascript and css source code inside the php file itself then you can do it like this
<?php
//include CSS Style Sheet
echo "<style type='text/css'>
table{
border: 1px solid;
color: blue;
}
/*heading class*/
.heading1 {
font size: 10px;
}
</style>";
//include a javascript file
echo "<script type='text/javascript'>
/* All your javascript code goes here*/
</script>";
?>
Don't use a closing tag for link elements, e.g.:
<link href="login.css" rel="stylesheet" type="text/css"></link>
It should use a self closing tag, like so:
<link href="login.css" rel="stylesheet" type="text/css" />
Remove the closing </link>, as this is not required.
Also, make sure that your page and login.css are in the same directory, or in other words, the path for CSS file should be correct.
To include it into PHP page, you'll need to print this to browser using echo:
echo '<link href="login.css" rel="stylesheet" type="text/css" />';
base_url() doesn't work at CSS file...
here's my php :
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
here's my css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
the text color change to white, but the image doesn't show up...
if i use url(../img/background.png), it show up...
but when i open url localhost/project/index.php/control/function/var1/var2, it doesn't show up...
It's Solved, Thanks every one... :]
i make php file at view folder like this :
<?php header("content-type: text/css"); ?>
body {
background:url(<?=base_url()?>img/background.png);
}
and i load the php file i just make with function at controller, and then i link it :
<link type="text/css" rel="stylesheet" href="<?=base_url()?>control/style.php"/>
It's work, Thanks guys...
You should do it like this
Structure of your files
myapp/
application/
system/
css/
img/
And in css write this
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
And now call it
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
That is the standard way of doing it. Also your css is not dynamic so you dont have to worry about php code using in it. The structure i presented in the answer will surely use the styles correctly and load the images.
CSS file does not get parse as PHP file. If you really want to do something like that, rename your file as styles.php
OPEN the page and add
header("content-type: text/css");
This tells the page to be treated as a text based CSS file. Then you can simple echo your remaining CSS like
echo "
body {
....
....
";
To fix the base_url() not being accessible from styles.php set a session variable to keep that. You can keep this on your index.php of codeignitor.
$_SESSION['base_url'] = base_url();
Now, use this inside styles.php.
background: url("<?php echo $_SESSION['base_url']; ?>"/../../some.jpg");
Get your base_url() out of the CSS file. That would fix the problem. You can't put PHP code in a CSS file.
You don't need to make php file as css. Simply put your images file out of "application" folder, e.g on assets/img. Then edit your css file
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../img/error.png');
background-size: 20px 20px;
}
call the css file using
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/style.css" media="all">
It will absolutely works dude!.
if your folder structure is:
YourAppFolder/
application/
public/
css/
img/
system/
Then use this in your view:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>public/css/style.css"/>
and in css use this for image:
background:#356aa0 url(../img/background.png) repeat-x;
Try this..
Replace this:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
With this:
<link rel="stylesheet" type="text/css" href="<?php base_url(CSS/style.css)?>"/>
<body>
</body>
Also replace the following in css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
With this:
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
NB: if it doesn't work, try use one dot(.) -> ./img/background.png
Assuming your file structure is like this:
-ci
--application
--CSS
---file.css
--img
---background.png
--system
.
.
.
and your base_url() : " http://localhost/sitename/ "
or you can write ...
<link rel="stylesheet" type="text/css" href="<? echo base_url('your css file from base url') ?>/>
this is your external css file
body {
background:url(<? echo base_url('your image path from base url')?>) repeat-x;
color:#fff;
}