Changing 'Div' Property from HTML - html

I'm using StackEdit (Which is amazing!).
It has a feature to export HTML file of the document.
The document uses The CSS File which is the default.
For instance, I downloaded HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
What I want to do is change the background color if the 'div' element with ID: "container" without changing any other property of his.
I only have access to the basic template which is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>
How can I do that the simplest way?
Notes:
I can only edit the template.
I want to change the color into f6f7f9.
I want any other properties of the elements to be kept.
Updates
Tried your suggestions on the sample code above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
It doesn't work, it changes the whole look of the document.
You can try by creating a local HTML file and see. -> I was wrong. It works!


if you are only able to edit the template, use inline styling like this:
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
or since your template is the whole page, you can add custom styles in the head and use !important directive to override any other custom styling.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<%= documentHTML %>
</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style type="text/css">
.container {
background-color:#f6f7f9 !important;
}
</style>
</head>
<body>
<div class="container">
<%= documentHTML %>
</div>
</body>
</html>


Add the style background-color:yellow; to the container div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:yellow;"><%= documentHTML %></div>
</body>
</html>


try this one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
.container
{
background:#f6f7f9;
}
</style>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"> <%= documentHTML %></div>
</body>
</html>


Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
</body>
</html>

Related

CSS not linking in html

I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.

In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?

That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>

Adding additional stylesheets/scripts to a grails layout from a view or controller

I want to use a grails layout to define a common layout for all pages in the application. Currently it looks something like this:
<!DOCTYPE html>
<html lang="dk">
<head>
<meta charset="UTF-8">
<title><g:layoutTitle default="Title"/></title>
<asset:stylesheet src="css/default.css"/>
</head>
<body>
<header><h1><g:layoutTitle default="Title"/></h1></header>
<main></main>
<footer></footer>
</body>
<asset:javascript src="jquery-3.4.1.min.js"/>
</html>
Some views may require additional stylesheets or scripts over the defaults provided in the layout, but if I simply add these to the view, they do not appear:
<%# page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang=\"dk\">
<head>
<meta name="layout" content="index" />
<asset:stylesheet src="css/additional.css"/>
</head>
<body>
<main>${content}</main>
</body>
<asset:javascript src="js/extra.js"/>
</html>
Is there no simple clean way to do this?

Check out: http://docs.grails.org/3.1.1/ref/Tags/layoutBody.html
Example decorated page:
<html>
<head>
<meta name="layout" content="myLayout" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
Example decorator layout:
<html>
<head>
<script src="global.js" />
<g:layoutHead />
</head>
<body><g:layoutBody /></body>
</html>
Results in:
<html>
<head>
<script src="global.js" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>

intellij configuration html formatting does not work

I tried every configuration settings like CODE STYLE > FILE AND CODE TEMPLATES or HTML FORMAT SETTINGS ,but no matter what I did I can never reform this ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
what I want is as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
My code style format for HTML is:

HTML Code formatting is configured in Settings | Editor | Code Style | HTML; to get the desired result, you need to remove html and body from Do not indent children of: list in Other tab:

Thymeleaf functionality on Meta tag

I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.
Raising my clarification. Does thymeleaf based html page allow meta tags within its head?
I've this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
which displays the page I'm looking for.
But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.
My modified code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
Is there something I need to consider? Please help.

Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
(with the ending slash). The server log error message will contain the details of the error.

PHP DomXPath - Select html code except header, content and footer

I am using DomXPath for the first time and I don;t know how to select some html code.
For Example I've got:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<div class="header">
header content
</div>
<div class="content">
content
</div>
<div class="footer">
footer content
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
And I need to make 2 selections. First with the code before header div
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
And second with the code after footer div
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
How can I do this? What should I use?
Thank you
Edit: I found out how to delete all divs, but I don't know how to separate the code before header and code after footer.
At the moment I've got this:
$html = file_get_contents('..');
$doc = new \DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
$finder = new \DomXPath($doc);
foreach ($finder->evaluate('//div') as $node) {
$node->parentNode->removeChild($node);
}
which gives me the code in one variable. How can I split it?

So I'm not completely sure if you still need help on this problem but I have a regex that will match everything before your "header" <div>:
^<[\w\n\s="<>\/\-,.#!m]+(?=<div)
The pattern above would match this chunk of your HTML:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
As for the tail end of you HTML, it is a bit too tricky to get everything after your <div class="footer"> tag, but if you switch it from div to footer, you can accomplish this easily. Below is an example of using footer:
<footer class="footer">
footer content
</footer>
The following will match everything from </footer> all the way until the closing </html> tag:
(<\/footer>)[\w\n\s="<>\/\-,.#!m]+<\/html>
Please Note: above regex includes </footer>. Hope this helps!