고객 별 이미지 및 CSS와 함께 ASP.NET 테마 제공

Question

우리는 App_Theme/{selected theme}에서 images, css 및 .skin 파일을 사용하는 ASP.NET 솔루션을 보유하고 있습니다. 현재 테마에는 많은 파일과 이미지가 많이 포함되어 있으며 고객 테마의 경우 App_Themes에 새 폴더를 추가하고 모든 파일을 새 폴더에 복사하고 이미지, 스킨 및 CSS에 대해 10-200 개의 변경 사항을 적용합니다.

우리가 개발할 때 일반적으로 가지고있는 기본 테마가 테마 고객 테마를 시대에 뒤쳐져 발전시키는 것입니다. 따라서 업그레이드가 이루어지면 모든 파일을 검토하여 변경 사항을 찾고이를 모두 찾아야합니다. 때때로 우리는 정말로 중요한 것을 놓칩니다.

완벽한 솔루션은 기본 CSS, 스킨 및 이미지가 포함 된 기본 테마를 만드는 것입니다. 새로운 고객 테마를 추가 할 때 우리는 변경된 사항, 기본 CSS의 이미지 대신 사용할 CSS 선택기 및 무시할 이미지를 알려줍니다. 내 이해에서 App_Themes 폴더의 일반적인 ASP.NET 테마 기능을 사용하는 경우 기본 테마가 아닌 테마 만 가질 수 있으며 솔루션이 사용할 다른 배경 및 기타 이미지가있는 DeliveryCustomer 테마를 말합니다. BASE 테마에 속한 사람들의

누구든지 향후이를 유지 관리 할 수있는 방법으로 해결하기위한 지침이 있습니까? 사람들이 App_Theme 경로를 재정 의하여 사용자 정의 스킨에서 작동하게하는 것을 보았습니다.

감사합니다.

Answer 1

좋아, 그럼 내가 어떻게하는지 알았어. 필자는 필요한 모든 CSS 파일, 스킨 파일 및 이미지가 포함 된 원래 테마 인 기본 테마를 만들었습니다. 이 테마는 App_Themes 폴더에 있습니다. Theme I'v는 App_Themes 폴더 옆에 ThemeSkins라는 새 폴더를 만들었습니다. 이 폴더에는 모든 새 스킨이 다른 폴더에 있습니다. 폴더 이름은 원하는 새 테마의 이름입니다. 각 스킨 폴더에는 과부하시키고 자하는 셀렉터 만 들어있는 CSS 파일이 있습니다. 대체하고 싶은 이미지도 있습니다.

나는 세 가지 않는 ThemeCreator 도구를 만든 다음 App_Themes 폴더의 기본 테마를 제외하고

• 모두 제거 테마. 이것은 개발자를 위해 일할 하나의 메인 테마를 갖는 것입니다. ThemeSkins에서 수행해야하는 작업은 여전히있을 수 있지만 전반적인 작업 부하는 최소화됩니다.
• 다음으로이 도구는 ThemeSkins에있는 폴더를보고 이름이있는 각 스킨의 App_Themes 아래에 폴더를 만듭니다. 그런 다음 Default 테마를 방금 생성 한 모든 새 스킨 폴더에 복사합니다.
• 마지막으로 App_Themes에서 새로 만든 스킨에 스킨 특정 파일을 병합하고 사용자에게 정보 용으로 추가 된 파일이 무엇인지 알려줍니다.이 도구는 모든 CSS 파일에 접두어 "z_"를 추가하여 모든 CSS 파일의 마지막에로드되고 거기에서 기본 선택기에 과부하가 걸리게합니다.

남은 것은 스킨 파일을 업데이트하는 것입니다. 지금까지는 고객이이 파일을 변경할 필요가 없었습니다. 그러나 그들이 할 때, 나는 스킨 파일을 추가하고 css-selector가 할 수있는 것처럼 스킨 마커가 오버로드 될 수 없기 때문에 자동으로 기본값을 업데이트해야한다고 생각합니다.

정말 부드럽게 작동하고 테마에 따라 스킨을 사용하여 멋지게 작업 할 수 있습니다. 누구나 같은 결과를 얻는 방법을 더 잘 알고 있습니까? ASP.NET 테마를 사용하는 주된 문제는 기본 테마를 사용할 수 없다는 것과 스킨 파일의 모양 및 색상 속성을 사용하지 않고 스킨을 적용한다는 것입니다. 스킨 파일은 마크 업에 필요한 모든 장소에 모든 속성을 복사하고 CSS 클래스가 참조하는 것만이 아니라 모든 속성을 복사하므로 권장하지 않습니다.

Answer 2

설명 된 기본 테마의 개념을 사용하십시오. 모든 일반적인 CSS 규칙을 다른 파일로 가져오고 base.css으로 전화하십시오.

이 base.css을 가지고 공통적으로 모든 이미지 및 폴더 App_Themes의 외부에 넣어, 그냥 일반적으로 당신과 같은 CSS 파일을 포함 할 것이다 마스터 페이지에서 다른.

<link rel="stylesheet" type="text/css" href="/styles/base.css" /> <!-- Note this isn't in app_themes --> 

그런 다음 다양한 테마의 CSS 파일에는 스타일에 대한 델타 만 지정해야합니다.