How to design a permenant & changable theme for a site?

Question

I have a site with nearly much pages with the same look. the only difference is the content of them. each page is stored in an HTML file.

The problem of the site is that during maintenance (i.e. for changing the site theme and look) the CSS is done very nice (because all the pages are linked to a single CSS file) but changing a small <div> block can be really annoying to apply individually for all of the pages.

Is there any other way to use to avoid this? like a theme for a blog.

My own idea was to place the new page contents (section part) into a bare HTML page and place it in the site's homepage using <iframe> then I will only have one page that is the main page. and posts are loaded into an <iframe> in the section part of the main page.

But this would reduce the site's SEO. because of having only one page.

What else can I do?

I want to do the same thing a separate CSS file does to the page style, to the htmls content. I want the theme to be unique in all the pages. and if changed, the changes applies on all of the pages.

Why not use a CMS? That's really what they're for. You could use something as "simple" as Wordpress. — elixenide, Jan 06 '16 at 12:39
No. I don't want to use any programs. I have designed the site myself from the first word and I want to go on so. — AHB, Jan 06 '16 at 12:40
This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. — Paulie_D, Jan 06 '16 at 12:43
@BlueSky then roll your own solution using some basic scripting to include different parts of the page. If you aren't willing to do that, then your only options are what you have described (and maintenance and improvements will be nightmares). — elixenide, Jan 06 '16 at 12:44

score 0 · Answer 1 · edited May 23 '17 at 12:04

There are a few ways to do this:

1) PHP: Using PHP, you can simply include an html file into another one

<?php include('fileOne.html'); ?>

2) jQuery: Using jQuery, you can load an HTML page dynamically into another (this is kind of hacky in my opinion):

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Source: Include HTML Page via jQuery

3) Framework: Using a framework like Python/Django, you can use {% include %} blocks to create standalone html files that can be reused like blocks.

<html>
    {% include 'navbar.html' %}
</html>

My honest recommendation is #2 if you have to stay with just raw html, otherwise, if you are using PHP then includes are a no brainer. The last option is the frameworks, and that is really only if you have other heavy-duty functions you would need.

How to design a permenant & changable theme for a site?

1 Answers1