Forum:Completely Styling Admin Comments

Hi, I've began styling comments for the admins on my wiki. (For now just myself to test it.)

So far, I have .comments li[ data-user= "Kyle$calise" ] blockquote { background : #FF9900 !important; } .comments li[ data-user= "Kyle$calise" ] blockquote<span class="re2" style="color:rgb(51,51,255);">:after <span class="br0" style="color:rgb(0,170,0);">{ <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">border-color <span class="sy0" style="color:rgb(0,170,0);">: <span class="kw2" style="color:rgb(153,51,51);">transparent <span class="re0" style="color:rgb(204,0,204);">#FF9900 <span class="re0" style="color:rgb(204,0,204);">#FF9900 <span class="kw2" style="color:rgb(153,51,51);">transparent !important<span class="sy0" style="color:rgb(0,170,0);">; <span class="br0" style="color:rgb(0,170,0);">} <span class="re1" style="color:rgb(102,102,255);">.comments li<span class="br0" style="color:rgb(0,170,0);">[ data-user<span class="sy0" style="color:rgb(0,170,0);">= <span class="st0" style="color:rgb(255,0,0);">"Kyle$calise" <span class="br0" style="color:rgb(0,170,0);">] blockquote div <span class="br0" style="color:rgb(0,170,0);">{ <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">background <span class="sy0" style="color:rgb(0,170,0);">: <span class="kw2" style="color:rgb(153,51,51);">transparent !important<span class="sy0" style="color:rgb(0,170,0);">; <span class="br0" style="color:rgb(0,170,0);">} <span class="re1" style="color:rgb(102,102,255);">.comments li<span class="br0" style="color:rgb(0,170,0);">[ data-user<span class="sy0" style="color:rgb(0,170,0);">= <span class="st0" style="color:rgb(255,0,0);">"Kyle$calise" <span class="br0" style="color:rgb(0,170,0);">] blockquote <span class="br0" style="color:rgb(0,170,0);">{ <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">color <span class="sy0" style="color:rgb(0,170,0);">: <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">black !important<span class="sy0" style="color:rgb(0,170,0);">; <span class="br0" style="color:rgb(0,170,0);">} <span class="re1" style="color:rgb(102,102,255);">.comments li<span class="br0" style="color:rgb(0,170,0);">[ data-user<span class="sy0" style="color:rgb(0,170,0);">= <span class="st0" style="color:rgb(255,0,0);">"Kyle$calise" <span class="br0" style="color:rgb(0,170,0);">] blockquote a <span class="br0" style="color:rgb(0,170,0);">{ <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">color <span class="sy0" style="color:rgb(0,170,0);">: <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">blue !important<span class="sy0" style="color:rgb(0,170,0);">; <span class="br0" style="color:rgb(0,170,0);">} <span class="re1" style="color:rgb(102,102,255);">.comments li<span class="br0" style="color:rgb(0,170,0);">[ data-user<span class="sy0" style="color:rgb(0,170,0);">= <span class="st0" style="color:rgb(255,0,0);">"Kyle$calise" <span class="br0" style="color:rgb(0,170,0);">] blockquote hr <span class="br0" style="color:rgb(0,170,0);">{ <span class="kw1" style="font-weight:bold;color:rgb(0,0,0);">background-color: <span class="re0" style="color:rgb(204,0,204);">#000000 !important<span class="sy0" style="color:rgb(0,170,0);">; <span class="br0" style="color:rgb(0,170,0);">} So, a few things:

I'm now looking for a way to frame the avatar. (Meaning, add a border to the avatar in the comments.)

Also, I was looking to add the same style to the message wall and forum comments by admins. Any ideas?

Thanks!

 Kyle$calise  (GL Wiki Founder) 15:05, July 16, 2012 (UTC)


 * You should get Firefox/Firebug or Chrome! Both make it easy to find elements and their IDs and classes.




 * For example, for you, it would be:

Sam Wang (talk) 21:40, July 16, 2012 (UTC)

@Pecoes- I am using chrome, and I could see the class, just didn't know how to apply it.

@Sam Wang- Thanks! I put the code in, refreshed a comment page, and it worked immediately... then, I added some code, refreshed again, and it wasn't working. I even recopied the code from you and put it in, still not working. The same thing happened with the hr color code. :(

 Kyle$calise  (GL Wiki Founder) 22:22, July 16, 2012 (UTC)


 * I just re-read your original question: You only want the images of admins to have borders, right? For article comments that would be something like this:


 * (You may have to replace the "$" in your nick with "%24")


 * That will not work on the profile masthead of user pages however. If you want to give those the same treatment, you will have to use JavaScript:

Still not working on the comments page. ._. I don't understand how Sam's worked for a few seconds and all of a sudden stopped. Where would I add that JS, btw? -- Kyle$calise  (GL Wiki Founder) 14:06, July 17, 2012 (UTC)


 * Most JS in wikis go to MediaWiki:Common.js, but if it's only for the wikia skin, use MediaWiki:Wikia.js, MediaWiki:Monobook.js is only for the monobook skin -- Sam Wang (talk) 14:11, July 17, 2012 (UTC)


 * Odd. Can you post a link to a page where it's not working? --
 * Ok, so here is a comment made by me. The colored background and "Admin" image in the bubble are working perfectly. However, the avatar border that Sam provided and the hr background color are not working (even though they both worked at first.) And here is the Wikia.css page. Thanks again for all your help. :) -- Kyle$calise  (GL Wiki Founder) 16:31, July 17, 2012 (UTC)


 * Have you tried the CSS that I posted? --
 * Yeah, I did before, but just to make sure it wasn't my error, I just tried again both ways ($ and %24), still nothing. :( -- Kyle$calise  (GL Wiki Founder) 16:56, July 17, 2012 (UTC)

Hm. This is what I'm looking at:


 * I don't understand, though. I'm not seeing it in Chrome nor Safari. On top of that, I changed the CSS to make it an orange border, instead of blue. O_o This whole thing is so weird. -- Kyle$calise  (GL Wiki Founder) 17:31, July 17, 2012 (UTC)


 * Oh, sorry. I didn't mean to confuse you! That's not your CSS. I entered in the live editor of Firebug. --
 * EDIT: I was wrong about the "%24" btw. "$" apparently does just fine.
 * Ahh!! It just started working!! :o Let's hope I don't screw anything up again. -- Kyle$calise  (GL Wiki Founder) 18:10, July 17, 2012 (UTC)
 * Sometimes JS and CSS changes don't "take" immediately. You may have to manually reload the page. Or get yourself the PurgeButton script.
 * You edited your post... um... you had a question about the hr's. Their background-color looks fine, but you might want to set the border to "none". --


 * Yeah, I noticed they take a bit to take effect. I decided to clear my cache to help it out a little. :p I edited the post because it wasn't that big of an issue, but thanks for the info! Hope it works, just to make the comments look a bit more uniform. BTW, any idea how to do all of this on the message walls as well? xD I looked at the classes in Chrome, but there's so much, and it's hard to find exactly what I'm looking for. :o -- Kyle$calise  (GL Wiki Founder) 18:55, July 17, 2012 (UTC)

The message wall uses full URLs. You could generalize the rule like this:

This should work on the message wall and in comments. --