Как добавить на сайт возможность менять темы оформления? Что для этого нужно добавить в имеющийся код?
Вот код главной страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ТСЖ "Пробуждение"</title>
<link rel="stylesheet" href="D:\Winginx\home\localhost\public_html\Ignatjev\style.css" type="text/css" />
<link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.imagepov
{
transform: rotate(90deg);
}
</style>
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="\Ignatjev\index.php"><img src="\Ignatjev\Images\logo.png" alt="ТСЖ Пробуждение"" title= " ТСЖ Пробуждение " /></a>
<img src= "\Ignatjev\Images\tel.png" alt="+7 (986) 987-26-65" title="+7 (986) 987-26-65" class="telefon" /> <p class = "telefon" align = "right" style=" color :#8fbc8f" font size = "2" > +7 (986) 987-26-65 </p>
</div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="\Ignatjev\o-tsj.html">О ТСЖ</a></li>
<li><a href="\Ignatjev\Documents.html">Документация</a></li>
<li><a href="\Ignatjev\requisites.html">Реквизиты</a></li>
<li><a href="\Ignatjev\as.html">АС</a></li>
<li><a href="\Ignatjev\pokazaniya.html">Передача показаний счётчика</a></li>
<li><a href="\Ignatjev\contacts.html">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Левое меню и Контент -->
<div id="content">
<!-- Контент - правый блок -->
<div class="right">
<div id="text">
<h1 align = "middle" >ТСЖ "Пробуждение"</h1>
<p> Дорогие посетители! Мы рады приветствовать вас на нашем сайте!</p>
<p>Здесь вы сможете получить актуальную информацию о деятельности нашей организации, ознакомиться с последними новостями и объявлениями,а так же узнать результаты собрания.</p>
<p>Также с помощью этого сайта жители смогут воспользоваться удобными и полезными онлайн-сервисами. Теперь можно будет быстро и легко отправить показания счетчиков, подать заявку в диспетчерскую службу, написать обращение руководству или бухгалтерии.</p>
<p><img src= "\Ignatjev\Images\Facad2.JPG" width="470" height="500" ></p><!--class = "imagepov"-->
</div>
</div>
<!-- Левое меню - левый блок -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="\Ignatjev\reception-days.html">Дни приема</a></li>
<li><a href="\Ignatjev\news.html">Новости дома</a></li>
<li><a href="\Ignatjev\sobranieprav.html">Собрания правления</a></li>
<li><a href="\Ignatjev\sobraniesob.html">Собрания собственников</a></li>
<li><a href="\Ignatjev\kaprem.html">Капитальный ремонт</a></li>
<li><a href="\Ignatjev\svyaz.html">Обратная связь</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
<div class="myclr"></div>
<!-- Подвал -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">ТСЖ “Пробуждение” 2019г.<br/>
г. Саратов, ул Лебедева-Кумача 70Д</div>
</div>
<div class="myclr"></div>
<script>
//вывод вкладки из верхнего меню в кантентную область
$(function(){
$('#menu-top a').on('click', function(){
let url = $(this).attr('href');
$.ajax({
type: "GET",
url: url
}).done(function(data){
$("#text").html(data);
});
return false;
})
//вывод вкладки из левого меню в кантентную область
$('#left-menu a').on('click', function(){
let url = $(this).attr('href');
$.ajax({
type: "GET",
url: url
}).done(function(data){
$("#text").html(data);
});
return false;
})
})
</script>
</body>
</html>
Одна из побочных страниц:
<html>
<head>
<title>ТСЖ "Пробуждение"</title>
<link rel="stylesheet" href='\Ignatjev\style.css' type="text/css" />
<link rel="shortcut icon" href="\Ignatjev\Images\logo.png" type="image/x-icon">
</head>
<body>
<h1><p align = "middle">Контакты</h1></p>
<p>410018, Саратов, ул. Лебедева-Кумача,дом 70 Д</p>
<p>Диспетчер ТСЖ +7 (960) 340-75-06 (с 8-00 до 17-00 час.)</p>
<p>Офис ТСЖ +7 (960) 340-75-06 (с 8-00 до 17-00 час.)</p>
<p>График работы офиса ТСЖ «Пробуждение»</p>
<p>Понедельник-четверг 09.00 — 17.00 час.</p>
<p>Пятница 09.00 — 16.00 час.</p>
<p>Перерыв 13.00 — 14.00 час.</p>
<p>tszh-probuzhdenie@mail.ru</p>
<p>Заявления от жильцов можете опускать в ящик ТСЖ «Пробуждение» в любое время.</p>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aca827cbfb46ba2c0df4bb07b09171e5b19d6d99a2d2898375ed346cda340a41b&width=458&height=400&lang=ru_RU&scroll=true"></script>
<p></p>
</body>
</html>
И вот CSS с помощью которой на данный момент задается бэк и цвет текста:
body {padding:0px; margin:0; background:#8fbc8f; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#a8e4a0;}
a:hover {text-decoration:none;}
li.none-bg {background:none!important;}
.telefon {float:right; font-size:8pt;}
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#8fbc8f repeat-x; padding:0 0 0 10px;}/* задний фон */
.bg-2 {width:940px; height:8px; background:#a8e4a0; margin:0 auto;}/* передний фон и цвет текста в верхнем меню */
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left;padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#a8e4a0; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#a8e4a0;}
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
p { text-indent: 25px; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#8fbc8f; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#a8e4a0;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#8fbc8f;}
.block-menu {width:240px; border-left:10px solid #a8e4a0; background:#8fbc8f;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px;}
li.none-bg {background:none!important;}
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #8fbc8f; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#a8e4a0;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}
#qwe {
transform:scale(2.2);
opacity:0.9;
cursor:pointer;
}
И все это связывает PHP:
<?php
include "D:\Winginx\home\localhost\public_html\Ignatjev\index.html";
include "D:\Winginx\home\localhost\public_html\Ignatjev\bd.php";
echo "<link rel='stylesheet' href='\Ignatjev\style.css'>";
?>
