I wrote a project and want to add a template there. All styles work except one. It does not work for me "styleadmin.css". Although I think everything is written correctly. You can see if you made a mistake and did not write correctly. I want my style "styleadmin.css" to work on two pages - AdminDecorator.JSP and allStudentsAdmin.JSP
AdminDecorator.JSP
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Mountain King - Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/theme.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/styleadmin.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]-->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:300,700,900,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/pushy.css">
<link rel="stylesheet" href="css/masonry.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/odometer-theme-default.css">
<script>
window.odometerOptions = {
selector: '.odometer',
format: '(,ddd)', // Change how digit groups are formatted, and how many digits are shown after the decimal point
duration: 13000, // Change how long the javascript expects the CSS animation to take
theme: 'default'
};
</script>
</head>
<!DOCTYPE html>
<body class="">
<!-- Pushy Menu -->
<nav class="pushy pushy-left">
<ul class="list-unstyled">
<li><a href="#home">Home</a></li>
<li><a href="#feat">Features</a></li>
<li><a href="#about">About me</a></li>
<li><a href="#news">My Blog</a></li>
<li><a href="#history">My History</a></li>
<li><a href="#photos">Look my Photos</a></li>
<li><a href="#contact">Get in Touch!</a></li>
</ul>
</nav>
<!-- Site Overlay -->
<div class="site-overlay"></div>
<header id="home">
<div class="container-fluid">
<!-- change the image in style.css to the class header .container-fluid [approximately row 50] -->
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-10">
<a href="#" class="thumbnail logo">
<img src="images/your_logo.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-1 col-md-offset-8 col-xs-2 text-center">
<div class="menu-btn"><span class="hamburger">☰</span></div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-scrollspy.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/js/ie10-viewport-bug-workaround.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="js/masonry.js"></script>
<script src="js/pushy.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/odometer.js"></script>
<sitemesh:write property='body'/>
<jsp:include page="/WEB-INF/template/admintemplate.jsp"/>
</body>
</html>
styleadmin.css
/*------------------------------------*\
COMMONS CLASSES
\*------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-family: 'Roboto Slab', serif;
}
h1, h2, h3, h4, h5, h6
{
margin-bottom: 1.1em;
}
.features,
.blog,
.gallery,
.clients,
.prefooter .container-fluid
{
padding-top: 3.3em;
padding-bottom: 4.2em;
}
span.typcn::before, i.typcn::before
{
font-size: 2em;
}
span.x2:before, i.x2:before
{
font-size: 3.4em;
}
span.x3:before, i.x3:before
{
font-size: 4.4em;
}
span.x4:before, i.x4:before
{
font-size: 6em;
}
/*------------------------------------*\
HEADER
\*------------------------------------*/
header .container-fluid
{
background-image: url('https://unsplash.it/2560/1707?image=961');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
.hamburger
{
font-size: 2.3em;
color: #000;
}
.hamburger:hover
{
color: #FFF;
cursor: pointer;
}
.logo
{
background: none;
border: 0px;
}
.jumbotron
{
background: none;
text-align: center;
}
.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron small
{
color: #FFFFFF;
}
.jumbotron p
{
color: #FFFFFF;
margin-bottom: 5%;
}
/*------------------------------------*\
SECTIONS
\*------------------------------------*/
.number .container-fluid
{
background-image: url('https://unsplash.it/3000/2000?image=685');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.opaline
{
padding-top: 3em;
padding-bottom: 3em;
background-color: rgba(128, 215, 247, 0.660);
}
.opaline h1,
.opaline h2,
.opaline h3,
.opaline h4,
.opaline h5,
.opaline h6,
.opaline p
{
color: #FFFFFF;
}
.opaline .boxes
{
margin-top: 30px;
padding-top: 20px;
padding-bottom: 5px;
border: 1px solid #FFF;
}
.boxes .odometer.odometer-theme-default
{
font-family: 'Roboto Slab', serif;
}
.story .container-fluid
{
background-image: url('https://unsplash.it/3000/2000?image=531');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.gallery
{
background-color: #dddddd;
}
.prefooter .container-fluid
{
background: linear-gradient(
rgba(33, 37, 43, 0.6),
rgba(33, 37, 43, 0.6)
),
url(https://unsplash.it/4000/3000?image=528);
}
.prefooter h1,
.prefooter h2,
.prefooter h3,
.prefooter h4,
.prefooter h5,
.prefooter h6,
.prefooter p
{
color: #FFFFFF;
}
/*------------------------------------*\
FOOTER
\*------------------------------------*/
footer
{
background-color: rgba(36, 50, 59, 1);
padding-top: 2em;
padding-bottom: 1.2em;
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p
{
color: #FFFFFF;
}
.social
{
padding-top: 50px;
}
AllStudentsAdmin.JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="/css/styleadmin.css" rel="stylesheet" type="text/css">
<style><%@include file="/css/styleadmin.css"%></style>
<title>Все студенты</title>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="it">
<h3 style="color:greenyellow" >Список всех студентов</h3>
${message}
<br>
<br>
<table class="table">
<thead>
<tr>
<th bgcolor="#000000"><font color="#green" scope="col"># </font></th>
<th bgcolor="#000000"><font color="#green" scope="col">Name </font></th>
<th bgcolor="#000000"><font color="#green" scope="col">Surname </font></th>
<th bgcolor="#000000"><font color="#green" scope="col">Avatar </font></th>
<th bgcolor="#000000"><font color="#green" scope="col">Edit </font></th>
<th bgcolor="#000000"><font color="#green" scope="col">Delete </font></th>
</tr>
</thead>
<tbody>
<c:forEach var="student" items="${studentList}">
<tr>
<th bgcolor="#000000"><font color="#fff" scope="row">1 </font></th>
<td bgcolor="#000000"><font color="#fff">${student.name}</font></td>
<td bgcolor="#000000"><font color="#fff">${student.surname}</font></td>
<td bgcolor="#000000">
<c:if test="${empty student.avatar}">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/768px-No_image_available.svg.png"
style="max-height: 200px; max-width: 200px;"/>
</c:if>
<c:if test="${not empty student.avatar}">
<img src="${pageContext.request.contextPath}/avatar?avatar=${student.avatar}"
style="max-height: 200px; max-width: 200px;"/>
</c:if>
</td>
<td bgcolor="#000000">
<a href="${pageContext.request.contextPath}/admin/editStudent/${student.id}">
<button type="button" class="btn btn-primary">Edit</button>
</a>
</td>
<td bgcolor="#000000">
<a href="${pageContext.request.contextPath}/admin/deleteStudent/${student.id}">
<button type="button" class="btn btn-primary">Delete</button>
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</body>
</html>
MySitemeshFilter
public class MySiteMeshFilter extends ConfigurableSiteMeshFilter {
@Override
protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {
builder.addDecoratorPath("/*", "/WEB-INF/decorators/homeDecorator.jsp");
builder.addDecoratorPath("/allStudents", "/WEB-INF/decorators/homeDecorator.jsp");
builder.addDecoratorPath("/login", "/WEB-INF/decorators/loginDecorator.jsp");
builder.addDecoratorPath("/admin/allStudentsAdmin", "/WEB-INF/decorators/adminDecorator.jsp");
Aucun commentaire:
Enregistrer un commentaire