Question

我想在点击按钮时更改整个网站的颜色。每当我不改变时，这将保持不变。如果我转到另一页，颜色应保持与我之前选择的相同。例如。 https://india.gov.in/

在顶部标题中，当选择黑色时，整个网站将为黑色，直到我们不更改为止。同样我想要功能。

我已经完成了更改当前但不是wholw页面的颜色。当我转到另一页时，默认颜色即将到来。

<script>$(document).ready(function () { 
$('#demo-wrapper ul li').on('click', function () { var path = $(this).data('path');$('#color-switcher').attr('href', path); }); 
}); </script>

<ul class="dropdown-menu multicolors-name"> 
<li data-path="Content/theme/assets/admin/css/custom_website.css‌">
<a href="#">Green</a></li><li data-path="Content/theme/assets/admin/css/blue.css"><a href="#" >Blue</a>
</li>
</ul>

Answer 1

执行此操作的方法是获取DROP TABLE IF EXISTS my_table; CREATE TABLE my_table (CodeX CHAR(1) NOT NULL ,CodeY INT NOT NULL ,Alpha CHAR(1) NOT NULL ,ISO CHAR(2) NOT NULL ,PRIMARY KEY(CodeX,CodeY) ,INDEX(CodeX,Alpha) ); INSERT INTO my_table VALUES ('B',1123,'A','AU'), ('B',2343,'C','AU'), ('C',6678,'A','AU'), ('D',8980,'B','AU'), ('D',7789,'A','AU'); CREATE TABLE my_new_table AS SELECT Code,Alpha,ISO, @i:=@i+1 id FROM my_table, (SELECT @i:=0) vars; SELECT * FROM my_new_table; +-------+-------+-----+------+ | Code | Alpha | ISO | id | +-------+-------+-----+------+ | B1123 | A | AU | 1 | | B2343 | C | AU | 2 | | C6678 | A | AU | 3 | | D8980 | B | AU | 4 | | D7789 | A | AU | 5 | +-------+-------+-----+------+ SELECT a.Code , a.Alpha , a.ISO , a.i FROM ( SELECT x.* , CASE WHEN @prev = alpha THEN @i:=@i+1 ELSE @i:=1 END i , @prev := alpha FROM my_new_table x , (SELECT @prev:=null,@i:=0) vars ORDER BY alpha , id ) a ORDER BY id; +-------+-------+-----+------+ | Code | Alpha | ISO | i | +-------+-------+-----+------+ | B1123 | A | AU | 1 | | B2343 | C | AU | 1 | | C6678 | A | AU | 2 | | D8980 | B | AU | 1 | | D7789 | A | AU | 3 | +-------+-------+-----+------+文件。在此文件中，您可以导入其他css文件。像这样：

master.css

然后你可以在另一个@import 'header.css' @import 'main.css'导入其他css文件。更改master-theme2.css文件的方法如下： https://stackoverflow.com/a/22445820/4673847

为了保持每页主题，您应该使用master.css或sessions

Answer 2

最简单的方法是使用一些css预处理器，例如LESS。然后，您可以循环准备好的颜色架构设置：

    .generate-widget-colors(@list) {
      .iter(length(@list));
     .iter(@index) when (@index > 0) {
    .iter(@index - 1);
    @item: extract(@list, @index);
    @key: extract(@item, 1);
    @color: extract(@item, 2);

    .color-schema-@{key} {
        color: @color;
    }

    .background-color-schema-@{key} {
        background-color: @color;
    }

    div.connect-container.wizard-schema-@{key} > div > div > div > h3 {
        color: #25414c;
    }

    div.connect-container.wizard-schema-@{key} .widget-icon {
        color: @Green;
    }`
  }
}

.generate-widget-colors(@WidgetColors);

当我从后端将颜色（键）值传递到此循环中并且我的所有小部件都获得新颜色时，这是我自己的示例。为了保存模式，您可以使用浏览器本地存储，或者如果您有身份验证，那么在db中存储用户模式

Answer 3

布局中的

应用此jquery。获取所选的颜色值并在此处应用。

window.jQuery("#ButtonId").click(function () 
{ 
window.jQuery('#Layoutid').css("color", "selectedcolor");
});

Answer 4

您可以使用 HTML5本地存储空间或Cookie 来实现它。您需要存储所选颜色，然后在窗口加载时检索它。

我创建了一个基于HTML 5本地存储的工作小提琴。只需选择一种颜色并重新加载小提琴，背景颜色将保持与您选择的相同。

你可以用这样的东西切换CSS文件。

<span class="css-selector" id="style1" data-css="path_to_style1.css">Theme 1</span>
<span class="css-selector" id="style2" data-css="path_to_style2.css">Theme 2</span>

$(".css-selector").click(function() {
    $("head link#maincss").attr("href", $(this).data("css")); //where main css is placed in head like <link rel="stylesheet" id="maincss" type="text/css" href="path_to_style1.css">
}

对于简单的颜色切换，您可以使用以下代码：

 <div class="selector">
    <span class="color red" data-color="#990000"></span>
    <span class="color green" data-color="#009900"></span>
    <span class="color blue" data-color="#000099"></span>
    </div>

    <div class="content">
    India is a "Sovereign, Socialist, Secular, Democratic Republic" with a parliamentary system of government. This section seeks to introduce the Constitution of India, its origin, the Parliament, various Acts and Rules that govern the nation, Documents, Public Notifications, Welfare Schemes and Application Forms to avail them, apart from updates on what’s happening around us. Know the "Who's Who" of the Indian Government and check out a range of such vital information that may help you in your daily life.
    </div>

      $(document).ready(function(){

    var themeColor="#ffffff"; // define default theme color

   if(typeof(Storage) !== "undefined") {
      if (localStorage.themeColor) {
        themeColor = localStorage.themeColor //get stored color
            }

            $('.content').css('background', themeColor); set stored color as background

       }

    });


    $('.selector .color').click(function(){

    themeColor = $(this).data("color");
    $('.content').css('background', themeColor); //set selected color as background

 if(typeof(Storage) !== "undefined") {
    localStorage.themeColor = themeColor; // store selected color
    };


    });




 .color{
    display:inline-block;
    height:20px;
    width:20px;
    border-radius:50%;
    margin:5px;
    cursor:pointer;
    }

    .red{
    background-color:red;
    }
    .green{
    background-color:green;
    }

    .blue{
    background-color:blue;
    }

在这里查看。 https://jsfiddle.net/hcfejaez/3/

多主题网站

4 个答案: