Changing 'Div' Property from HTML

Question

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 <a href="https://stackedit.io/">StackEdit</a>.</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 <a href="https://stackedit.io/">StackEdit</a>.</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!

@Banana, Where do I put this line in the template? I can only edit the template. — Royi, May 09 '14 at 07:21

Banana · Accepted Answer · 2014-05-09T07:30:24.323

1

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>

edited May 09 '14 at 07:30

answered May 09 '14 at 07:23

Banana

7,424
3
22
43

Will it keep all other properties in tact? – Royi May 09 '14 at 07:23
yep, it will only change the style background color, nothing else. – Banana May 09 '14 at 07:27
For some reason, it doesn't work. Could you try it on the sample code I posted above the template? It changes the whole look. – Royi May 09 '14 at 07:29
i did use it on your code, i just used a code formatter to make it look pretty and it added a space in the `<%=d ocumentHTML %>` accidentally, i fixed it now :) – Banana May 09 '14 at 07:31
i see that if you use inline styling, the text disappears, this is not supposed to happen. its most likely an issue with StackEdit, but it can easily be fixed if you add "color:auto;" `style="background-color:#f6f7f9; color:auto;"` – Banana May 09 '14 at 07:41

score 1 · Answer 2 · edited May 09 '14 at 07:27

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>

score 1 · Answer 3 · answered May 09 '14 at 07:35

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>

score 0 · Answer 4 · edited May 09 '14 at 07:27

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>

Changing 'Div' Property from HTML

Updates

4 Answers4