/ / Vlastné Disqus - css, wordpress, menej, disqus

Prispôsobiť Disqus - css, wordpress, menej, disqus

Som len integrovaný Disqus v téme Wordpress, že som "m rozvíjať. Všetko funguje okrem CSS. Ako môžem použiť svoj vlastný štýl css na Disqus?

V mojom .less súbore som napísal toto:

#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 vôbec to nefunguje. Hľadal som na internete a zistil som, že môj css štýl nebude použitý, pretože Disqus je v iFrame. A môžem nájsť antyhing prispôsobiť Disqus v paneli admin. Ako to teda môžem vyriešiť?

Pracujem na localhost. Mohol by to byť problém?

Veľká vďaka!

odpovede:

0 pre odpoveď č. 1

referencie: 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 pre odpoveď č. 2

Opakovanie toho, čo @Assaf napísal, ale aktuálne pokyny pre styling disqus sú tu.

Dávajú jasne najavo, že môžete "všetko štýlovať, len niekoľko vybraných vecí. Napríklad pre odkazy môžete nastaviť farbu, ale nie veľa iného. Skúšal som to na svojom vlastnom blogu a fungovalo to

#disqus_thread a {
color: red;
}

Ale aj ja som to skúšal

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

Podľa týchto dokumentov, veci, ktoré môžete nastaviť.

  • Vyberte si svetlú alebo tmavú tému

    Je nastavený na stránke administrátora v časti Správca> Nastavenie> Vzhľad

  • Nastavte farbu odsekov a odkazov

    #disqus_thread p {
    color: green;
    }
    #disqus_thread a {
    color: red;
    }
    
  • Nastavte šírku komentárov

    #disqus_thread {
    width: 700px;
    }
    
  • Ak platíte za verziu Pro, pridajte svoje logo


0 pre odpoveď č. 3

Keďže disqus zdedí farby z rodičovského elementu, najjednoduchším spôsobom je pridanie obalu a jeho štýl:

<div id="disqus-wrapper">
<div id="disqus_thread"></div>
</div>
#disqus-wrapper a:any-link {
color: #333; /* the color you want here */
}

-2 pre odpoveď č. 4

Jednoduché triky na zmenu Disqus pozadie . Ak používate zásuvný modul "disqus-comment-system", otvorte súbor comments.php. a hľadať disqus_thread id. Pridajte svoju vlastnú triedu. napríklad : <div id="disqus_thread" class="myclass">

A nakoniec pridajte túto triedu do vášho css súboru. a zmeniť čokoľvek chcete. ako: polstrovanie, pozadie atď Táto rovnaká technika funguje aj v iných diskusných moduloch.

Vďaka