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. --


 * Thanks again. Worked great! Now just 2 more things... sorry. :-/ Firstly, how would I change the background color on the message wall for my comments? Also, now when someone makes a comment (admin or otherwise), it shows on the "Wiki Activity" page, but it doesn't show up on the page that was commented on. Could these CSS changes have anything to do with that? :o -- Kyle$calise  (GL Wiki Founder) 19:38, July 17, 2012 (UTC)
 * Edit: Never mind about the comments, it seems to be okay now. :o Wonder what happened, it took longer than usual? O_o


 * Wikia is slow as molasses for me right now. And lots of stuff doesn't load. I just lost a 400 word post, because I made the mistake of switching to source mode :(


 * Coloring the message wall posts isn't possible with pure CSS either. You'd have to use JavaScript:


 * Put that in the Common.js page, but nothing happened, even after 5 hours. :-/ --


 * My mistake. "orange" should have been in quotes. Sorry. That was sloppy. --
 * Perfect! Now that orange is in quotes, the background color is working. Thank you. :) Now, if I may be more of a bother :p I need to change the color of the text, links, and horizontal line, as well as the font weight in message wall comments. xDD It just never ends, ey? Also, as shown here, there is an ugly out of place blue triangle to connect the comment to the avatar. Any idea how to make that orange? ^.^ -- Kyle$calise  02:17, July 18, 2012 (UTC)