Display Bootstrap HTML with .CSS links inside XSL stylesheet? - 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.

Related

Bootstrap problems with grid system

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>

How do I link an external css to overwrite bootstrap css for centering elements?

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>

Bootstrapping (Responsive image) doesn't work (PC/Mobile)

I'm trying to create a website for a friend. The challenge is to have only a image on the website. But the images can't be the same on both pc and mobile. So I have now made a function, so the one or other will be either shown or hidden.
But my problem is now that the responsive isn't working. And will the code for the PC and mobile be the same?
<!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>Danish Bread Studio</title>
<!-- Almindelig CSS -->
<link href="stylesheet.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- 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>
<img src="baggrund2.jpg" class="visible-xs" class="img-responsive" alt="responsive image">
<img src="baggrund.jpg" class="visible-lg" class="img-responsive" alt="responsive image">
<div class="box">
<p><center>Danish Bread Studio's hjemmeside er i øjeblikket under opbygning.</center></p>
</div>
</body>
</html>
Image tags you have written should be as follows. You have written class attribute 2 times.
<img src="baggrund2.jpg" class="visible-xs img-responsive" alt="responsive image">
<img src="baggrund.jpg" class="visible-lg img-responsive" alt="responsive image">
Why don't use CSS media query? MDN media query. It's lot simplier than a JavaScript. I suggest the mobile-first approach.

generator-angular-fullstack directive templateurl not rendering

Disclosue: This has been thoroughly checked for duplicates and on-topic/off-topic. This is an issue that my roommate also has when he tried it so it is obviously a common issue. I have found others with a similar issue, but there's was solved by something that won't solve this particular issue.
I am relatively new to all of these frameworks, but I could really use more eyes on this.
I am using the generator-angular-fullstack and when I simply generate a directive and the templateurl is not rendering as the title implies. There is no get on the Network as Angular doesn't work like that. I have tried writing my own directive which also didn't go so well and only worked with using template: instead of templateurl. If I try
ng-include="'app/geoData/geoData.html'"
on the main.html it populates fine, but I find this to be a terrible route considering the html looks so much cleaner with my custom directives, AND there is another call on the Network which in the end will slow everything way down. Is there something I am missing? Does generator-angular-fullstack have a new bug that hasn't been updated yet?
This is my directive, which is being called on the main.html which is called in the index.html.
'use strict';
angular.module('dangerzoneApp')
.directive('geoData', function () {
return {
templateUrl: 'app/geoData/geoData.html',
restrict: 'EA',
link: function (scope, element, attrs) {
}
};
});
This is my main.html
<div ng-include="'components/navbar/navbar.html'"></div>
<header class="hero-unit" id="banner">
<div class="container" >
<h1>O'HAI, there!</h1>
<geo-data></geo-data>
<img src="assets/images/yeoman.png" alt="I'm Yeoman">
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Features:</h1>
<ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in awesomeThings">
<li>{{thing.name}}<button type="button" class="close" ng-click="deleteThing(thing)">×</button></li>
</ul>
</div>
</div>
<form class="thing-form">
<label>Syncs in realtime across clients</label>
<p class="input-group">
<input type="text" class="form-control" placeholder="Add a new thing here." ng-model="newThing">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" ng-click="addThing()">Add New</button>
</span>
</p>
</form>
</div>
<footer class="footer">
<div class="container">
<p>Angular Fullstack v2.0.13 |
#tyhenkel |
Issues</p>
</div>
</footer>
And this is my index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" href="app/app.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/account/login/login.css">
<link rel="stylesheet" href="app/admin/admin.css">
<link rel="stylesheet" href="app/app.css">
<link rel="stylesheet" href="app/geoData/geoData.css">
<link rel="stylesheet" href="app/main/main.css">
<link rel="stylesheet" href="components/modal/modal.css">
<!-- endinjector -->
<!-- endbuild -->
</head>
<body ng-app="dangerzoneApp" geo-data>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<geo-data></geo-data>
<!-- Add your site or application content here -->
<div ui-view=""><geo-data></geo-data></div>
<geo-data></geo-data>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<script src="socket.io-client/socket.io.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,client}) app/app.js -->
<script src="app/app.js"></script>
<!-- injector:js -->
<script src="app/account/account.js"></script>
<script src="app/account/login/login.controller.js"></script>
<script src="app/account/settings/settings.controller.js"></script>
<script src="app/account/signup/signup.controller.js"></script>
<script src="app/admin/admin.controller.js"></script>
<script src="app/admin/admin.js"></script>
<script src="app/main/main.controller.js"></script>
<script src="app/main/main.js"></script>
<script src="app/message/message.controller.js"></script>
<script src="components/auth/auth.service.js"></script>
<script src="components/auth/user.service.js"></script>
<script src="components/modal/modal.service.js"></script>
<script src="components/mongoose-error/mongoose-error.directive.js"></script>
<script src="components/navbar/navbar.controller.js"></script>
<script src="components/socket/socket.service.js"></script>
<!-- endinjector -->
<!-- endbuild -->
</body>
</html>
File tructure: This is the standard file structure for generator-angular-fullstack.
├── client
│ ├── app - All of our app specific components go in here
│ ├── assets - Custom assets: fonts, images, etc…
│ ├── components - Our reusable components, non-specific to app
How folders are set up under app.
main
├── main.js - Routes
├── main.controller.js - Controller for our main route
├── main.controller.spec.js - Test
├── main.html - View
└── main.css - Styles
How geoData folder is set up under app.
├── geoData.directive.js - Controller for our main route
├── geoData.directive.spec.js - Test
├── geoData.html - View
└── geoData.css - Styles
I apologize for any typos in advance. I am looking for help not a smart mouth. Please be polite and courteous as this is my first delve into these frameworks. Thanks also in advance!
Know that 4.0.x of angular-fullstack does not presently support templateUrl. You have to use
template: require('filename');
This was very recently diagnosed in issue 2198 of angular-fullstack,
https://github.com/angular-fullstack/generator-angular-fullstack/issues/2198
It was diagnosed after your issue, so you didn't miss finding it.
Can you check if the js file containing the directive is loaded in the index.html file. This should resolve your issue - hopefully.

Navbar does not appear when the file is saved in a nested folder

Bootstrap: my navbar code does not appear when a copy of the same file is saved in a different folder, even though the code is exactly the same
Bootstrap: I have tried looking for an answer to this question on the net but I cannot find the answer.
Here is my code that works. It is located in file:///C:/Users/Spiridon/Desktop/bootstrap-3.2.0-dist/index-1.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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Navbar does not appear when I run a copy of the same file from another folder. Same code, but from this folder:
file:///C:/Users/Spiridon/Desktop/bootstrap-3.2.0-dist/index/index-1.html
By moving your page to a nested folder you've broken the relative paths to your prerequisites. For example,
<link href="css/bootstrap.min.css" rel="stylesheet">
needs to be
<link href="../css/bootstrap.min.css" rel="stylesheet">
in the second folder.