사용자가 웹 사이트의 색상 테마를 선택할 수있는 기능 추가

회사 인트라넷을 재 설계했습니다. 모든 페이지에서 동일한 스타일을 만들기 위해 5 개의 관련 색상을 기반으로 한 간단한 테마를 사용하고 있습니다. 한 가지 내가하고 싶은 것은 각 사용자가 자신의 "테마"를 선택할 수있게하는 것입니다. 내 디자인에서 작동 할 여러 색상 팔레트를 쉽게 만들 수 있습니다. 이걸 구현하는 가장 좋은 방법은 내가 가지고 놀고있는 것입니다.사용자가 웹 사이트의 색상 테마를 선택할 수있는 기능 추가

나는 두 가지 생각을 가지고 있지만 모든 제안에 개방적입니다. 첫 번째는 주제에 독립적이며 기본 스타일 시트를 균일하게 적용하는 기본 스타일 시트를 작성하는 것입니다. 그런 다음 별도의 테마 스타일 시트를 만듭니다. 그런 다음 서버 측 스크립팅 또는 JavaScript/jQuery를 통해 적용합니다. 다른 생각은 하나의 스타일 시트를 사용하고 jQuery를 사용하여 각 요소에 적용합니다. 따라서 예 :

<div class="theme_color_1"></div> 

<script type="text/javascript"> 
    function colorize(theme){ 
     if(theme === 0){ 
      $('.theme_color_1').addClass('blue_theme_1'); 
     } 
     else if(theme === 1){ 
      $('.theme_color_1').addClass('red_theme_1'); 
     } 
     else{ 
      $('.theme_color_1').addClass('default_theme_1'); 
     } 
    } 
</script>

각 테마 항목마다 하나씩. 나는 누군가가이 유형의 기능을 구현 한 경험이 있고 "가장 좋은"방법이 무엇이라고 생각하는지 궁금 할뿐입니다. 우리 사이트는 상당히 가벼워서 DOM 조작이나 페이지 로딩과 관련하여 처리 속도가별로 중요하지 않습니다.

감사합니다.

** 아직 구현하지 않았기 때문에 방금 아주 간단한 코드 예제를 사용했습니다. 코드에 설명이 충분하지 않으면 알려 주시면 추가 세부 정보를 제공해 드리겠습니다.

** 또한 고전 ASP (당분간 붙어있는 것), MS SQL, HTML 5, CSS 3 (기능 지원을 제공하기 위해 PIE 사용), JavaScript, jQuery, 및 jQuery UI.

출처

2014-06-19 ooomphlaa

클래스를 본문에 추가하고 해당 클래스를 기반으로 스타일을 지정하십시오. 설정을 데이터베이스에 저장하고 페이지 렌더링시 body 태그에 추가하십시오. 타다, 너 끝났어. – epascarello

흥미 롭다. 왜 그런 생각을하지 않았는지 모르겠다. 확실히 오버 헤드가 적어서 단일 스타일 시트와 단일 jQuery/JavaScript 함수를 사용할 수 있습니다. 나는 아직 계획 단계에 있지만 일단 그 점에 이르면 나는이 질문을 시도하고 업데이트 할 것이다. 감사! – ooomphlaa

사용자가 데이터베이스에서 선택한 테마를 저장할 수 있으며 로그인 한 사용자에 따라 스타일 시트를 적용 할 수 있습니다.

<% if rs("style") = 1 then %> 
<link href="theme1.css" rel="stylesheet" type="text/css" /> 
<% elseif rs("style") = 2 then %> 
<link href="theme2.css" rel="stylesheet" type="text/css" /> 
...etc.

기본 테마는 절대적으로 좋은 아이디어입니다.

출처

2014-06-25 01:42:10 Swagata

감사합니다. 이것은 사용할 솔루션 중 하나입니다. 나는 이것을 적용 할 수있는 개발 단계에 들지 않았다. 지금은 테마를 가질 수 있도록 핵심 CSS를 개발하고 있습니다. 일단 내가 충분히 먼 곳으로 가면 여기서 몇 가지 제안을 시도 할 것입니다. – ooomphlaa

사용자가 웹 사이트의 색상 테마를 선택할 수있는 기능 추가

답변

관련 문제