Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
So, I've customized the design for the 404 page - however, I'm having trouble implenting it.
I've learned quickly that for one you have to embed the CSS directly into the HTML - and secondly it doesn't seem like I can use html.erb or embedded ruby in other words. With that said, what is the best way for me to implement the following design code to my 404.html page?
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<title>New Error Design</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/mystyle.css" rel="stylesheet">
<link href="css/mediaquery.css" rel="stylesheet">
<link rel="stylesheet" href="css/selectify.css" />
</head>
<body>
<header class="navbar navbar-inverse">
<div class="container">
<div class="row">
<div class="col-md-3 logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="col-md-3 pull-right">
<button type="button" class="btn btn-info sign-i-u">Sign IN</button>
<button type="button" class="btn btn-info sign-i-u">Sign Up</button>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 error_text">
<h1> Sorry, the page you requested is not found</h1>
<div class="col-md-12">
<div class="col-md-6 col-md-offset-3 text-center">
<%= link_to 'sign Up', new_user_registration_path, class: "btn btn-primary buttons_style" %>
<%= link_to 'Login', new_user_session_path, class: "btn btn-primary buttons_style" %>
<%= link_to 'Return To Home', root_path, class: "btn btn-primary buttons_style" %>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p class="f-logo"><img src="images/footer_logo.png" alt="logo-image"></p>
<p class="links">
Blog
About
Privacy
Terms
Copyright
</p>
<p class="copy">2014 © Company name. All Rights Reserved</p>
</div>
</footer>
</body>
</html>
While this will mostly be opinion based, here's how I've done it...
I prefer to have a Rails template which I can use to generate the HTML for a 404 page, then simply save that page in the public/ folder of the app. This way, when the app changes, I can quickly visit a route to generate the 404 page, then save the HTML to the public/ directory.
Make sure you set up your application to use the custom pages. Rambling Labs has a good example of how to do this.
Related
Effect of html
This is what happens when I run below html in the browser (Chrome & Safari).
Can't be normal behaviour. What am I missing?
Using Materialize (materializecss.com) framework, no additional css with the materialize css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content="styling, interieur, kleur, inrichting">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/css/materialize.min.css">
<style>
.btn-floating {margin: auto;}
</style>
<title>BOOST-Restyling Interieur Styling</title>
<link rel="icon" type="image/gif" href="img/boost.ico">
</head>
<body>
<div class="center">
<div class="left">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar vorig project"
href="prj-5-detail.html"><i class="material-icons">chevron_left</i></a>
</div>
<div class="center">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Terug naar
projecten" href="projecten.html"><i class="material-icons">close</i>
</a>
</div>
<div class="right">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar volgend
project" href="prj-2-detail.html"><i class="material-icons">
chevron_right</i>
</a>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Compiled and minified Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/js/materialize.min.js"></script>
</body>
</html>
The solution appears to be to make the divs display: inline-block;. Then they'll align on one line.
Can u edit the codes be pre-viewable for icons?
I'm discovering coreUI.
I'm trying to create this login.html found on github:
https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-login.html
Everything works great but can't show the user-icon and the lock-icon. Instead, i get the default icon for both of them.
I'm working on a folder named coreUI that contains:
login.html
css folder (contains style.css and simple-line-icons.css both from the git repo)
bower_components folder ( that contains jquery, bootstarp and tether)
so the paths should be correct.
Moreover, when I inspect the element in the browser, i can see in the css rules tab, the content \e08e and \e005 for the lock-icon and the user-icon.
But they are displaying the same default icon. Any help would be appreciated.
I also tried it with register.html ; https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-register.html but the same problem. All icons show defaut.
this is my login.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, shrink-to-fit=no">
<meta name="description" content="...">
<meta name="author" content="....">
<meta name="keyword" content="....">
<!-- FavIcon link-->
<link rel="shortcut icon" href="../favicon.png">
<!-- Icons -->
<link href="css/simple-line-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>Login</title>
</head>
<body class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Sign In</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i>
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</div>
</div>
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
<div class="card-block text-center">
<div>
<h2>Sign up</h2>
<p>Site description....</p>
<button type="button" class="btn btn-primary active mt-3">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/tether/dist/js/tether.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I think you have not either added font folder or fonts in font directory.
SO create a folder fonts add fonts files of simple icon. if you have already font folder then add fonts in this folder.
This is how your angular.json should look if you want to use #coreui/icons
"styles": [
"src/styles.sass",
"node_modules/#coreui/coreui/dist/css/coreui.css",
"node_modules/#coreui/icons/css/all.css"
Your setting in angular.json maybe listing free:
"styles": [
"node_modules/#coreui/icons/css/free.css",
Change to :
"styles": [
"node_modules/#coreui/icons/css/all.css",
I have the following code and I am not sure why bg-info doesn't work for the whole body as I am new to bootstrap.
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Here's what I see:
Note: According to this video it should work though https://teamtreehouse.com/library/bootstrap-4-basics/getting-to-know-bootstrap-4/enhancing-the-page
You are using the alpha 4 of bootstrap(js), use bootstrap 3.x.
Also you have an extra </div> in the code.
This works:
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
What do you mean by doesn't work for the whole body? Try to add this CSS property to your custom CSS:
.bg-info {background: #5bc0de!important;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is my MyWebsite.html file
<DOCTYPE !html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="top">
<div class="panel-footer row"><!-- panel-footer -->
<div class="col-xs-6 text-left">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<img href="#" style="height:35px" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png">
<img href="#" style="height:35px" src="http://www.mosa.nl/files/8613/8668/4836/available-in-app-store-badge.png">
</div>
<div class="col-xs-6 text-right">
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Apps</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</body>
</html>
My CSS wont really matter because I've cleared it many times because it did not work.
When I open the website in Chrome, the CSS simply does not kick in and does not take effect. For example, I would do "text-decoration: none;" for all <a> tags, but still, there would be an underline when I hover over the text. Or, when I try to change the text color, it still stays black. Why doesn't it work?
You will have to place your own CSS file
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
below
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simple reason is that your CSS properties in MyWebsite.css gets overrided by the CSS properties in bootstrap.min.css file.
I am trying to fit mo website logo image inside a jumbotron. But somehow it just does not fits there. I have attached the output as an image. Here is the output:
http://imgur.com/8ETxyjg
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The DreamShream Quiz has the best and most updated quiz questions on various categories. Visit now!" />
<meta name="keywords" content="general knowledge, quiz, quiz website, online quiz, politics quiz, programming quiz, general knowledge quiz, gk quiz, history quiz, general knowledge questions" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" />
<title>Welcome to Best Quiz Questions Website</title>
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse">
<div class="pull-right">
<button type="button" class="btn btn-success">
Login
</button>
<button type="button" class="btn btn-success">
Sign Up
</button>
</div>
</div>
<div class="jumbotron">
<div class="pull-left">
<img class="img img-responsive" src="images/logo.png" />
</div>
<div class="pull-right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive -->
<ins class="adsbygoogle responsive"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="6352682258"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="navbar navbar-default">
<div class="navbar-text pull-left">
<ul class="nav nav-tabs">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy policy</li>
<li>Sitemap</li>
<li>Blog</li>
</ul>
</div>
</div>
Also, the adsense ad is not showing up on this page, although it is showing on pages that I have not yet started implementing in Bootstrap.
I am sorry for too many question in one question, but they are all much inter-related. Previously I was trying to use the image and the ad between the two navbar without the jumbotron, but in that case, the second navbar would overlay the image. Any help?
It's really hard to tell from that image, it would help if you installed something like chrome dev tools, but looking at it, my guess is that the image is a transparent PNG, and the there is a large transparent area around the logo, which you cannot see but its acting as margin, take the logo into photoshop and crop it accordingly.