Dostosuj Disqus - css, wordpress, mniej, disqus

Właśnie zintegrowałem Disqus z motywem Wordpress, który rozwijam. Wszystko działa dobrze z wyjątkiem CSS. Jak mogę zastosować własny styl css do Disqus?

W moim pliku .less napisałem to:

#disqus_thread {
position: relative;
display:block;
margin: 0 0 20px 0;
padding: 20px;
line-height: 1.5;
color: @brandGray !important;
background-color: @white;
.flat-box-shadow;
overflow: hidden;
clear: both;

iframe {

body.dark {

#layout {

#main-nav {

nav {

a {
color: @brandViolet !important;

&:link,
&:visited {
color: @brandViolet !important;
}

&:hover,
&:active,
&:focus {
color: @lightViolet !important;
}

}

}

}

}

}
}
}

Ale to w ogóle nie działa. Szukałem w Internecie i odkryłem, że mój styl css nie zostanie zastosowany, ponieważ Disqus jest w iFrame. I mogę znaleźć antyling, aby dostosować Disqus w panelu administracyjnym. Więc jak mogę to rozwiązać?

Pracuję na localhost. Czy to może być problem?

Wielkie dzięki!

Odpowiedzi:

0 dla odpowiedzi № 1

Odniesienie: http://casadeblundell.com/jonathan/custom-styling-for-disqus-css/

/* --- disqus css -- */

#disqus_thread {
color: #ffffff;
border-style: 0px solid;
border-color: #cccccc;
padding: 5px;
}

#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #000000;
}

.dsq-reaction-body {
color: #fff;
}

.dsq-reaction-header cite, .dsq-reaction-header span {
color: #ccc;
}

.dsq-reaction-retweets {
color: #ccc;
}

/*--- end disqus css --*/

---

0 dla odpowiedzi nr 2

Powtarzając to, co napisał @Assaf, ale aktualne instrukcje dotyczące stylizacji disqus są tutaj.

Wyjaśniają, że nie można stylizować wszystkiego, tylko kilka wybranych rzeczy. Na przykład dla linków można ustawić kolor, ale niewiele więcej. Próbowałem tego na moim blogu i zadziałało

#disqus_thread a {
color: red;
}

Ale spróbowałem tego

#disqus_thread a {
color: red;
font-weight: bold;           /* no effect */
text-decoration: underline;  /* no effect */
}

Zgodnie z tymi dokumentami, rzeczy, które możesz ustawić.

• Wybierz motyw jasny lub ciemny

  Jest on ustawiony na stronie administratora w obszarze Administrator> Ustawienia> Wygląd

• Ustaw kolor akapitów i linków

  #disqus_thread p {
  color: green;
  }
  #disqus_thread a {
  color: red;
  }
  

• Ustaw szerokość komentarzy

  #disqus_thread {
  width: 700px;
  }
  

• Dodaj swoje logo, jeśli płacisz za wersję Pro

---

0 dla odpowiedzi № 3

Ponieważ disqus dziedziczy kolory po elemencie macierzystym, najprostszym sposobem jest dodanie opakowania i nadanie mu stylu:

<div id="disqus-wrapper">
<div id="disqus_thread"></div>
</div>

#disqus-wrapper a:any-link {
color: #333; /* the color you want here */
}

---

-2 dla odpowiedzi № 4

Proste sztuczki do zmiany Disqus tło . Jeśli używasz wtyczki „disqus-comment-system”, otwórz plik comments.php. i szukaj disqus_thread ID. Teraz dodaj własną klasę. na przykład : <div id="disqus_thread" class="myclass">

I wreszcie dodaj tę klasę do pliku css. i zmień cokolwiek chcesz. jak: padding, background ,, etc Ta sama technika działa również w innych dyskusjach.

Dzięki

---