당신이 가지고 있지 않은 어떤 사이트도 테마화

너무 길어서 읽을 수가 없어요.결론 읽기!

수용물

내가 이걸 왜 썼는지

어떤 사이트에 대한 테마를 설정하는 방법

예: 주제 개발

예제 결과

결론

내가 이걸 왜 써?

몇 주 전, Stack Overflow가 드디어 어두운 주제를 발표했다.나는 their blog에서 그들이 유사 이래 가장 많은 표를 얻은 기능 요청이라는 것을 읽었다.
이것은 나로 하여금 생각하게 한다.나는 인터넷에 매우 엉망으로 보이는 사이트가 많고, 하나하나 사용자가 오류를 체험하는 것을 안다.만약 이 사이트들이 주제를 최종 사용자에게 남겨 두면 어떻게 합니까?사실은, 일부 사이트는 이미 해냈다!실제로 모든 사이트는 이렇게 하지만, 그 중 일부 사이트는 우리로 하여금 이 점을 더욱 어렵게 한다.
이 문제를 생각할 때, 나는 dev.to에서 한 사용자를 보았다.사실은 CSS를 잘 아는 사람들에게 dev.to는 이 소원을 쉽게 실현시켰기 때문에 이 포럼에는 많은 사람들이 있을 것이다.
나는 그 글의 평론에서 다음과 같은 주제의 원형을 발표했는데, 작가가 제공한 색깔만 사용했다.내가 보기에 원형은 그리 깔끔하지 않다.비록, 나는 확실히 어느 정도 그것을 좋아하기 때문에, 나는 여전히 그것을 사용하고 있으며, 그것을 교환할 계획이 없다.

어떻게 모든 사이트에 테마를 설정합니까

본고의 중점에 들어갑시다. 어떻게 하면 당신의 사이트에 속하지 않는 모든 주제를 설정할 수 있습니까?또는 실제로 방문한 웹 사이트의 CSS를 변경하는 방법솔루션은 실시간 CSS 편집이 가능한 브라우저를 사용하여 확장합니다.그중의 하나가 있습니다. 방문한 사이트에 CSS를 작성할 수 있습니다.
구글 라이브 css 편집기와 사용자가 사용하는 브라우저 이름을 결합하면 여러 가지 선택이 있습니다.나는 많은 시도를 해 본 적이 없기 때문에 어떤 구체적인 것도 추천하지 않을 것이다.하지만 개인적으로 나는 확실히 사용한다Amino.
안전성에 대한 설명.물론 이러한 확장은 사이트의 모든 데이터를 읽고 변경할 수 있는 권한이 있어야 한다.크롬의 확장 설정 페이지에서 어떤 사이트에서 활성화되었는지 확장할 수 있습니다.

예: 주제 개발

Amino를 사용하여 dev.to 스타일을 설정하는 방법을 살펴보겠습니다.이것은 their docs에서 묘사한 것처럼 간단하다.브라우저 도구 모음에 있는 아미노 아이콘을 클릭하여 자신의 CSS를 기입하세요.일반 CSS 우선 순위가 적용됩니다.
Dev.to는 CSS id:s와 클래스를 광범위하게 사용함으로써 이러한 클래스는 일부 CSS 프레임워크에서 자동으로 생성되지 않습니다.그 밖에 이것은 우리의 변경을 매우 오래 지속시켰다. 왜냐하면 CSS 선택기가 자주 변경되지 않을 수도 있기 때문이다. 불행하게도 이것은 문제의 사이트일 수도 있고 그들의 CSS를 많이 업데이트했기 때문이다.
이것은 제가 앞에서 언급한 팔레트 테마로 Amino to style dev.to에 추가한 CSS입니다.이것은 매우 빠른 해결 방안으로 조금도 전면적이지 않지만, 여전히 주제 색을 업데이트하기에 충분하다.

#top-bar {
    background-color: #d7eeff;
}

#page-content-inner {
    background-color: #e0d7ff;
}

#substories .single-article, #articles-list .single-article {
    background-color: #ffcce1;
}

.top-bar--search-input {
    background-color: #faffc7;
}

.crayons-btn, #substories .single-article .engage-button {
    background-color: #faffc7;
    color: var(--card-color);
}

CSS 선택기를 찾으려면 웹 페이지의 요소를 마우스 오른쪽 단추로 클릭하고 Inspect를 선택하여 Chrome 개발 도구에서 요소를 찾습니다.dev.to에 대해 말하자면, 적합한 id와 클래스를 쉽게 찾을 수 있다.선택기를 찾을 수 없으면 개발 도구에서 요소를 마우스 오른쪽 단추로 클릭하고 복사 선택기를 선택할 수 있습니다.
하지만 우리 좀 성실합시다.설령 dev.to가 모든 장모님의 꿈 사이트라고 해도 모든 사이트가 그렇게 쉽게 설계되는 것은 아니다.어떤 사이트의 풍격은 외관만큼이나 보기 흉하다.사용!중요한 CSS 속성은 확실히 CSS 코드를 거역하는 빠른 방법이다. 설령 내가 사이트를 개발할 때 영원히 추천하지 않는다 하더라도, 나는 아미노를 사용할 때, 너는 전체 사이트에서 마음대로 그것을 버릴 수 있다고 말할 것이다.네가 자신의 몇 줄의 CSS를 망치지 않는다면, 이로 인해 고통받는 사람은 아무도 없을 것이다.

예제 결과

나는 아미노기를 광범위하게 사용한다.다음은 구글이 나에게 보여준 모습이다.

유튜브예요.나는 그들의 짙은 색 테마를 사용했고, 예를 들어 글씨체 색을 빨간색으로 바꾸어 그들의 표지와 일치시켰다.

이것도 내가 읽는 신문의 기본 버전과 사용자 정의 버전이다.디스플레이:none도 사용했습니다.사이트 왼쪽 하단 부근의'tipsaoss-vigranskar'상자를 완전히 삭제합니다.이런 방식을 통해 아미노기는 광고 차단제의 보충으로 광고 차단제가 효력을 잃는 곳에 있다.

결론

만약 당신이 자신의 CSS로 사이트를 설계하고 싶다면.Google live css 편집기에서 브라우저와 함께 사용할 브라우저 확장자를 찾습니다.이것은 웹 사이트의 일반적인 CSS를 바탕으로 자신의 CSS 코드를 작성할 수 있도록 합니다. 이것은 웹 사이트의 주제나 다른 방식(예를 들어 필요하지 않은 요소를 삭제하거나 간격을 늘리는 것)의 스타일에 매우 유용합니다.개인적으로 저는 Amino를 사용하여 사이트 스타일을 디자인합니다.이전과 같이 확장에는 악성코드가 포함될 수 있다는 것을 기억하십시오.
조심해, 난 너의 친구야.