CSS 코드를 이리저리 만지다가 되돌리기 어려운 변경을 몇 가지를 해버렸습니다. CSS에 대해서는 완전 초보라 애초에 건드리지 말았어야 했는데, 최악의 상황을 걱정하고 있습니다. 현재 제 사이트는 이렇게 보입니다.
이 이미지에서 제가 추가한 블러 효과는 백업 파일 이름 부분에만 적용되어 있습니다. 나머지는 웹페이지가 실제로 렌더링되는 모습입니다.
이것도 마찬가지입니다. 이전에 테마 CSS를 편집하러 들어갔던 ‘CSS 편집’ 버튼이 더 이상 보이지 않는 것을 확인할 수 있습니다. 결국 막혀버린 상태가 되어, 누군가가 해결책을 찾아주실 수 있도록 간곡히 도움을 요청드립니다.
다행히도 제가 완전히 무지한 것은 아니라서, 편집하기 전에 이전 버전의 CSS를 백업해 두었습니다. 아래는 제가 치명적인 실수를 저지르기 전에 표시되던 모습입니다.
//Roboto 폰트 사용
html {
font-family: "Roboto", sans-serif;
font-weight: 400;
}
.background {
position: absolute;
width: 100%;
height: 100%;
}
body input,
body button,
body select,
html {
background: url(linktoimage) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body textarea {
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
@mixin boxShadow {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}
@mixin buttonShadow {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
//버튼을 올리고 둥글게 만들기
.btn {
border-radius: 2px;
@include boxShadow;
}
//몇몇 버튼에서 그림자 제거
.d-editor-button-bar .btn,
.bulk-select-all,
.bulk-clear-all,
.period-chooser-header,
.topic-map .btn.no-text,
.badge-section .btn,
#revision .btn,
#new-account-link,
#login-link {
border-radius: 0;
box-shadow: none;
}
위 나열된 코드에서 다음 부분을 제거했습니다.
html {
background: url(linktoimage) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
그리고 다음 코드를 추가했습니다.
.page-bg {
background: url('linktoimage');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
모든 것이 잘 준비되어 있다고 어리석게도 생각하며 저장을 클릭해버렸습니다. 도와주세요.
