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
Related
i am beginner in the spring and i try to create a simple layout with child view in the spring using hibernate.
but i can't understand how to create it.
please help me.:D
simple layout in asp.net core
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>ProDent - Dentist Template</title>
<meta charset="UTF-8" />
<meta name="description" content="ProDent dentist template" />
<meta name="keywords" content="prodent, dentist, creative, html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link href="/img/favicon.ico" rel="shortcut icon" />
<link href="~/css/fontiran.css" rel="stylesheet" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
<!-- Stylesheets -->
<link href="~/css/persianDatepicker-default.css" rel="stylesheet" />
<link href="~/css/RegistrationStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/flaticon.css" />
<link rel="stylesheet" href="/css/owl.carousel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<!-- rtl -->
<link rel="stylesheet" href="/css/rtl.css" />
#RenderSection("StylesOnViews", false) <!--here rendering styles on child views-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Page Preloder End -->
<!-- Header section -->
#(await Component.InvokeAsync("HeaderSiteComponent"))
<!-- Header section end -->
#RenderBody() <!--here rendering child view-->
<!-- Footer top section -->
#(await Component.InvokeAsync("footerSiteComponent"))
<!-- Footer top section end -->
<!--====== Javascripts & Jquery ======-->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/circle-progress.min.js"></script>
<script src="/js/main.js"></script>
<script src="~/js/FactsScripts.js"></script>
<script src="~/js/persianDatepicker.js"></script>
#RenderSection("ScriptsOnViews", false) <!-- here rendering scripts on child views -->
</body>
</html>
and my child view :
all of this html file replaced with #RenderBody in layout
#{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<section class="page-info-section set-bg" data-setbg="img/page-info-bg/1.jpg">
<div class="container">
<h2 class="text-center">ورود کاربران</h2>
</div>
</section>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(img/dentists.jpg);">
<span class="login100-form-title-1">ورود کاربران</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="لطفا نام کاربری خود را وارد کنید!">
<span class="label-input100">نام کاربری</span>
<input class="input100" type="text" name="username" placeholder="نام کاربری خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="لطفا رمز عبور خود را وارد کنید!">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" name="pass" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30 text-right" dir="rtl">
<div>
رمز عبور خود را فراموش کرده اید؟
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">مرا بخاطر بسپار</label>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">وارد شوید</button>
</div>
</form>
</div>
</div>
</div>
#(await Component.InvokeAsync("HeaderSiteComponent"))
and
#(await Component.InvokeAsync("footerSiteComponent"))
in the layout are header(menu items and..etc) and footer.
menu items in the header component load form dataBase and also i can send data to this component..
what is this equivalent in spring?
i found answer this question :
for create a layout or component i should create fragment in spring using thymeleaf.
for example :
1-create footer html file and called footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footer">
<p>your content....</p>
</footer>
</body>
</html>
notice : only attention to footer tag because only footer will be
insert into homePage moreover you should call footer by name that put front th:fragment
2- now you may call footer in homePage.
see following code :
<body>
...
<div th:insert="fragments/footer :: footer"></div>
</body>
more information :
https://attacomsian.com/blog/thymeleaf-fragments#:~:text=A%20fragment%20in%20Thymeleaf%20is,repeated%20used%20on%20multiple%20pages.
In your opinion, you should first define a fragment and then set the output format with the following code
<body>
<div th:insert="fragments/components :: header"></div>
<div th:replace="fragments/components :: header"></div>
<div th:include="fragments/components :: header"></div>
</body>
So I am new to html coding and am trying to just make a simple portfolio and I want it to look nice so I have been looking at tutorial websites online however I did something weird and I don't know what I did. If anyone could help me with this issue that would be great.
Screenshot:
The Code Is Below (https://pastebin.com/GDCW2jsu):
<!DOCTYPE html>
<html>
<head>
<title>Ryan Cole Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><border>Ryan Cole Home</border>
</a></h1>
<nav>
About Me
Portfolio
Contact Me
</nav>
</header>
<!-- Welcome To The Homepage -->
<footer>
<p>Welcome To The Homepage</p>
</footer>
</body>
</html>
<!-- Scripts -->
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js">
</script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?
footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/
Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>
I have a website when I open my frontpage on my website it goes www.website.com and when I press Contact it goes www.website.com/Contact That's fine, but when I go back to my Frontpage it display www.website.com/Default How do I remove "Default" I want it to only write www.website.com when I press my logo or redirect to my frontpage.
SiteLayout.cshtml
<head>
<meta charset="utf-8" />
<title>Website Title</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="Images/Website White.png" height="50" />- My Website Text</p>
</div>
Default.cshtml
#{
Layout = "~/_SiteLayout.cshtml";
}
#section featured {
<title>Website Title</title>
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h2></h2>
</hgroup>
<p>
A lot of text
</p>
</div>
</section>
}
let me know if you need more code.
The Default part of the URL is coming out because it is in your link back to the homepage, I'm guessing this one <a href="~/Default">.
As the root URL links to the Default page anyway, you can just remove 'Default' part from your href, in order to go the root without the path:
<a href="~/">
Aside from this the alternative is to redirect www.website.com/Default to www.website.com in your server-side code.