Disqus in WP Mantra style

Norwegian: Disqus (nytt vindu/fane) i samme stil som WordPress themet jeg bruker, som er Mantra (nytt vindu/fane). Gjelder ikke Disqus 2012. Bruker Narcissus themet til disqus og har lagt egen css i «Disqus -> Settings -> Apperance -> Custom CSS». (koden kunne vært bedre, ettersom jeg ikke kan css, så vær forberedt på det hvis du ser unødvendig kode. Vekslet mellom themene før jeg bestemte meg for dette, så derfor er noe av css til det andre themet egentlig.)

English: Disqus (new window/tab) in the WordPress style theme I use, which is Mantra (new window/tab). Not for Disqus 2012. Use Narcissus theme in Disqus and have added own css in «Disqus -> Settings -> apperance -> Custom CSS». (code could be better, as i can’t css, so keep that in mind if you see code that’s not necessary. I tried both themes before i decided to go for this one, and some of css code is for other theme actually.)

Kommentarer til nå/Comments at this time: 2

 Legg til/add this:

#dsq-content .dsq-comment-header {
border-radius: 6px 6px 6px 6px;
background-color: rgb(245, 245, 245) !important;
border: 2px solid rgb(255, 255, 255);
color: rgb(102, 102, 102);
display: block;
font-size: 12px;
margin: 0px 1px;
padding: 0px 6px;
box-shadow: 1px 1px 3px rgb(204, 204, 204);
clear: both;
background-image: none;
}
#dsq-content .dsq-moderator .dsq-comment-header { background-image: none; }
#dsq-content #dsq-global-toolbar { display:none; }
.dsq-textarea-background { margin: 0px 0px 0px 15px; }
#dsq-content #dsq-authenticate .dsq-login-buttons {
background: none !important;
background-image: none !important;
margin-bottom: 0 !important;
}
#dsq-content img {
width: 24px;
height: 24px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(238, 238, 238);
border-radius: 3px 3px 3px 3px;
padding: 2px;
box-shadow: 0px 0px 3px rgb(204, 204, 204);
margin-right:1px;
}
#dsq-content .dsq-avatar img {
width: 24px;
height: 24px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(238, 238, 238);
border-radius: 3px 3px 3px 3px;
padding: 2px;
box-shadow: 0px 0px 3px rgb(204, 204, 204);
margin-right: 1px;
}
#dsq-content .dsq-comment .dsq-header-avatar a.dsq-avatar img {
padding: 2px;
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.4);
box-shadow: 0px 0px 3px rgb(204, 204, 204);
margin-right: 1px;
}
#dsq-content .dsq-moderator img.dsq-moderator-star {
display: inline;
margin-top: -5px;
vertical-align: middle;
height:10px;
width:10px;
background: transparent;
border: 0px;
border-radius: none;
padding: 0px;
box-shadow: none;
}
ul.dsq-comment-meta { padding: 0px 0px 0px 15px; }
.dsq-comment-message { padding: 0px 0px 0px 20px; }
#dsq-content ul { padding: 0px 0px 0px 15px; }
#dsq-content ul, #dsq-content li {
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 0px;
background: none !important;
text-indent: 0px !important;
}
#dsq-content .dsq-post-footer .dsq-button {
float: right;
margin-left: 3px;
margin-bottom: 10px;
}
#dsq-content h3 { display: none; }
#dsq-content .dsq-request-user-logout { display: none; }
#dsq-content .dsq-comment-text p { margin: 0em 0.7em 1em 0.5em !important; }
#dsq-content .dsq-comment:hover .dsq-comment-footer-left {
visibility: visible;
margin-left: 0.5em;
}
#dsq-content .dsq-editedtxt {
margin-top: 1em;
margin-left: 0.5em;
opacity: 0.3;
font-size: 12px;
}
#dsq-content .dsq-append-post .dsq-post-area { border-radius: 6px 0px 6px 6px; }

 

Hvis du vil ha Disqus global toolbar, som vist på bilde, bare fjern:
If you want Disqus global toolbar, as seen in the picture, just remove:
#dsq-content #dsq-global-toolbar { display:none; }

Disqus global toolbar

Se under på kommentaren(e) hvordan det ser ut/See the comment(s) under for the look.
(sorry for my bad english)

2

Tagged .Bokmerk permalink.
  • http://kandasa.net/ kandasa

    Slik ser det ut med den koden. Vekslet mellom themene før jeg bestemte meg for dette, så derfor kan noe css være relatert til det andre themet egentlig

    This is the look with that code. I tried both themes before i decided to go for this one, and some of css code might be for other theme actually.

    • Testbruker/Testuser

      Viser svar postet som gjest/ Show answer posted as guest