"_Styled"테마로 기본을 사용하여 사용자 정의 테마를 사용하여 Liferay UI를 사용자 정의하려고합니다.사용자 정의 테마 CSS와 Liferay CSS 간의 충돌
나는 _diff/css 폴더의 테마에 대응하고 "custom.css"파일을 가져온 내 자신의 CSS 파일이 있습니다 .However 그것의 liferay.In 내 프리젠 테이션의 프레 젠 테이션을 깨고 나는 모든 표준 body, div 등의 태그는 liferay UI에도 영향을줍니다.
이 충돌을 어떻게 해결할 수 있습니까? 미리 감사드립니다!
신속한 해결책은 liferays CSS 파일 (예 : "base.css")의 내용을 제거하고이 빈 파일을 테마의/diff/css/폴더에 저장하는 것입니다. 이렇게하면 base.css가 새로운 빈 파일로 오버라이드되어 스타일이로드되지 않습니다. 그리고 custom.css가 고려되는 유일한 스타일 시트가 될 것입니다.
물론 Liferay의 나머지 부분에도 모두 영향을 미칩니다. Liferay는 페이지의 HTML DOM을 상당히 제공합니다. 이러한 모든 요소의 프리젠 테이션을 변경하면 Liferay의 요소 스타일에도주의를 기울여야합니다.
충돌이 있습니까? 아니, 가장 단순한 경우에 가자. div {color:green;}이라고 선언한다. 물론 Liferay의 구성 요소는 물론 모든 구성 요소가 녹색 텍스트를 사용합니다. 자체 포틀릿의 스타일 만 지정하려는 경우 일부 포틀릿을 지정하고 싶을 수도 있습니다. div.portlet-my-own-application {color:green;}
색상이 너무 단순하다는 것을 알고 있지만 솔루션 전략을 보여주기를 바랍니다.
Liferay의 base.css를 대체하기위한 Artem Khojoyan의 제안을 따르기보다는 결과 CSS를 살펴보고 효과가있는 것을 추천하고 자신의 CSS를 단순화하는 것이 좋습니다. - Liferay 내에서 사용되도록 보이는 모든 요소에 대해 효과적인 CSS를 검사합니다. 방화범이나 그 친척은 당신의 친구입니다.
"나는 Liferay UI에 영향을주는 작업을 수행하고 있습니다."라는 세부 정보가있어 걱정할 필요가 없습니다. 사실, 당신이하는 일이 Liferay의 UI에 영향을 미치기를 바랍니다 ... 적절한 CSS 코드를 찾아야합니다.
스타일이 custom.css에서로드 된 경우 이상적으로 liferay를 덮어 쓰게됩니다. 기본 스타일. 당신은 부하의 순서에 관계없이 고려하는 당신의 스타일을 지정할 수 있습니다
body {
background-color: #fff
}
어떤 경우에는 , 예를 들어
중요한 CSS, 당신이 사용할 수있는 스타일을! 덮어 쓰려면을 Liferay 기본 스타일
body {
background-color: red !important;
}
감사합니다.이 시점에서, 내가 한 것은 각각의 웹 콘텐츠 템플릿에 내 모든 사용자 지정 CSS 파일을 가져온 것입니다. 저는 3 개의 다른 웹 콘텐츠를 보유하고있는 3 개의 웹 콘텐츠 표시 포틀릿을 가지고 있습니다. "link "WCM 속도 템플릿의 태그. 그러나 라이프 스타일에 영향을 미치지 않습니다. 그러나 템플릿의 모든 스타일을 가져와야하고 모든 CSS 가져 오기를 유지하는 기본 템플릿을 만들 수있는 방법이 있는지 찾아 내려고했습니다.이 템플릿을 다른 모든 것으로 확장합니다. 템플릿이 올바른 방법이라고 생각하세요? – manni