I know that this isn't an embedded package any more. In my composer.json I have:
"require": {
...stuff...
"illuminate/html": "5.*"
}, etc.
In app.php I have:
'providers' => [
...stuff...
'Illuminate\Html\HtmlServiceProvider',
...more stuff...
],
'aliases' => [
...stuff...
'Html' => 'Illuminate\Html\HtmlFacade'
], etc.
I have run composer update, so why is it not recognising when I use HTML::script()? This is the Blade template that is throwing the error:
<!DOCTYPE HTML>
<html lang="en">
<!-- USER LOGIN SECURITY -->
<!-- require('redis-session.php');
RedisSession::start();
#if (!isset($_SESSION['HTTP_SHIB_EP_EMAILADDRESS']))
header('Location: https://resviz.ncl.ac.uk/signin?redirect=https://resviz.ncl.ac.uk/wos/index.php');
die();
#endif -->
<head>
<title>Academic Intelligence</title>
<!-- LINKS -->
<!-- local css file -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Corporate visual identity -->
<link href="//resviz.ncl.ac.uk/static/style/cvi.css" media="screen" rel="stylesheet" type="text/css" />
<!-- bootstrap css -->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css" rel="stylesheet">
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<!-- META -->
<meta charset="UTF-8"/>
<!-- ensure proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BREADCRUMBS -->
<div class="sg-orientation">
Skip to Content
<span class="sg-breadcrumbs">
Newcastle University >>
Research Visualisation >>
<strong href="#">Academic Intelligence</strong>
</span>
</div>
<!-- TITLE BAR -->
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2>Academic Intelligence</h2>
</div>
<div class="sg-navigation"> </div>
<div class="sg-content">
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
</nav> <!-- navbar -->
<!-- main content -->
<section class="container">
{{-- unique section to other pages --}}
#yield('content')
</section> <!-- main content; container -->
</div> <!-- sg-content -->
<!-- FOOTER -->
<div class="sg-clear"> </div>
<div class="sg-footer">
<p>Research & Enterprise Services<br/>Newcastle University, Newcastle Upon Tyne,<br/>NE1 7RU, United Kingdom<br/>Email Webmaster<br/><br/>© {{ date('Y') }} Newcastle University</p>
</div>
<!-- SCRIPTS -->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- local script -->
{{ HTML::script('js/script.js') }}
<!-- bootstrap js -->
{{ HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')}}
<!-- angularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- check browser version, if outdates, prompt for update -->
<script src="//browser-update.org/update.js"></script>
</body>
</html>
I am moving this existing web application into Laravel and so am trying to implement the various Blade components. In this case changing what was <script src="script.js"></script> to {{ HTML::script('js/script.js') }}. I cannot understand why the HTML Class is not being recognised though...
You can use the {!! HTML::script('whatever') !!}.
In Laravel 5 or 5.1, mostly you can use {!! codes !!} instead of {{ codes }}.
Related
So, I was studying the front-end course which was created in 2018 and this guy Brad Hussey was teaching Bootstrap, and when I downloaded the source code and everything to make the website work, the grid system for example was not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row">
<div class="col-sm-4">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You're missing closing div tags. Other than that it seems to work alright.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!--- you never closed --->
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row"> <!--- you never closed --->
<div class="col-sm-4">
</div>
</div> <!--- add </div> here --->
</div> <!--- add div here --->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
What I am trying to do here is display my HTML page when I run a XSL style sheet. The HTML with .CSS links is embedded inside my XSL. There is no .XML file in this case. I am trying to output the Bootstrap HTML page when the .XSL style sheet is executed. The HTML seems to working as I would expect the .CSS style sheets are not working.
Here is the .xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dp="http://www.datapower.com/extensions" xmlns:dpconfig="http://www.datapower.com/param/config" extension-element-prefixes="dp" exclude-result-prefixes="dp dpconfig">
<xsl:output method="html"/>
<xsl:template match="/">
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet"/>
<meta name="description" content="Error Page"/>
<meta name="author" content="AXA Datapower Team"/>
<link rel="icon" href="../../favicon.ico"/>
<title>Error Page</title>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">AXA Equitable</a>
</div>
</div>
</nav>
-->
<div class="container">
<div class="starter-template">
<!--<img src="images/warning.png" alt="Error" class="img-rounded">
<img src="images/error-7-xxl.png" alt="Error" class="img-rounded">
<img src="images/exclamation.png" alt="Error" class="img-rounded">-->
<img src="warning-xxl.png" alt="Error" class="img-rounded"/>
<h1>An unexpected error has occurred.</h1>
<p class="lead">Please contact your system administrator for assistance.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
</xsl:template>
These are the .CSS style sheets that are not being processed:
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet"/>
I am running the .XSL page in IBM DataPower. The HTML displays in the browser but with no .CSS Style. Is this simply because the .CSS is not pointing to the correct location on DataPower or is the problem more complicated?
If anyone can help me out here that would be great. This is a simple error page. nothing fancy.
I did an inline style sheet and it works fine. I must not have been linking the correct path to the .CSS withing Datapower.
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
I create a layout for my website using grails, but this layout is applied to my default page (the page where i redirect user after authentication) only
My layout :
<title><g:layoutTitle default="An example decorator" /></title>
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<g:layoutHead />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<header>
...
</header>
<!-- end header -->
<section id="content">
<div class="container">
<g:layoutBody/>
</div>
</section>
<!-- footer-->
<footer>
<div class="container">
<div id="footer">
...
</div>
</div>
</footer>
<!-- /footer-->
</div>
</body>
</html>
i call this layout in my GSP page like this :
<head>
<meta name="layout" content="application"/>
make sure you put your layout at:
grails-app/views/layouts/
and your layout name is:
application.gsp
OR
if your layout is for a specific controller put at:
grails-app/views/layouts/controllerName/
still with same name:
application.gsp
using a windows 7 and just a few days back i downloaded the bootstrap 3.3.1 dist file..... but i don't know how to install it.... i also don't know what to put for my href="???" in the link ....
this code is a mixture of my own writing and some copy/paste of the scripts from the bootstrap site... i'm totally messed up...someone please help......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edwin's School of Music</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>C:\Users\user\Desktop\bootstrap-3.3.1-dist\dist\css\bootstrap.min.css
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About</li>
<li>Materials</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h2>Welcome to...</h2>
<h1><strong>Edwin's School Of Music</strong></h1>
<h2>Make your DREAMS come true ...</h2>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
This will work & no need to install things
However, this will only work if you have an internet connection as they are being fetched from a server, rather than a local file on your machine.