htmlcssbloggerblogger-dynamic-views

Background for static page within dynamic theme

Some improvements...

Using some modified CSS:

.article-content,.entry-content {
    background-color:#8a0202;
}

I was able to some of the background of the static landing page (http://www.sailingdee.com/p/welcometodee.html)

However, the background is not covering all the page (some white areas still persist).

And, the CSS applied the #8a0202 color to all the blog and i only want it to the static page...

Questions: 1- How to expand the #8a0202 to the totality of the landing page? 2- How to apply the CSS only to that specific page?

Solution

  • To make sure that the CSS is only applied to this specific page, you will have to wrap these styles within a Blogger conditional statement. As conditional statements only work inside the Template editor, the code snippet below will have to be inserted in the Theme 🢂 Edit HTML 🢂 insert anywhere after <head> tag

    <b:if cond='data:view.isPage &amp;&amp; data:view.pageId == 3526403800591689129'>
  <style>
    body{
      background-color:#8a0202;
    }
    .article-content,.entry-content {
      background-color:#8a0202;
    }
    .viewitem-panel div.viewitem-content, .viewitem-panel .article.hentry {
      background: #8a0202;
      border-image: none;
    }
  </style>
</b:if>

    The number 3526403800591689129 is the unique ID assigned to the page http://www.sailingdee.com/p/welcometodee.html by Blogger and can be found in the URL bar when editing this page via Blogger dashboard

    The page will look like the screenshot below after making the above changes page full background