Changing 'Div' Property from HTML

StackOverflow https://stackoverflow.com/questions/23558673

  •  18-07-2023
  •  | 
  •  

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!

Was it helpful?

Solution

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>

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top