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)
 * And... now the JavaScript stopped working all of a sudden. :o -- Kyle$calise  04:01, July 20, 2012 (UTC)

Really? Message_Wall:Minifede looks fine for me. Do you see something different?

I seem to have missed your question about the triangles btw. We'll get to that next! --


 * I see the default colors for my messages on his wall. :( It's weird because it was showing up fine on the 18th, then all of a sudden stopped working sometime after. O_o Now I just checked on a different browser and it's showing up perfectly. -_- Something to do with chrome compatibility or maybe I just have to clear my cache again. :-/ Whatever, at least it will show up for some people. xD Thanks for your (upcoming) help on the traingles. (Don't forget about the text color, link color, horizontal line color, and font weight.) :P Just can't make it easy, can I? Good thing is, this should be the end of it. After all that's sorted, I should be able to leave you alone. xDDD -- Kyle$calise  07:49, July 20, 2012 (UTC)


 * It all works fine in Chrome as far as I can tell. If it does not work for you, there might be another unrelated JavaScript issue. When you test the page in Chrome, hit F12 and post all error message you see in the console here, please!


 * As for the triangles: The rule that gives them their color is this one:


 * You seem to want all kinds of little things :) so here's an idea: I'll write a little script for you that attaches a new class named "admin" to
 * the li elements of article comments
 * the li elements of message wall posts
 * the "masthead" of user profile pages

You can then style elements of this class with CSS however you like. From your first post I guess that CSS isn't much of a problem for you. --


 * I just clicked one of the message wall post names (which takes you to the single post) and went back and the colors were working again. (facepalm) Giving everything a class would be perfect. CSS is no problem for me. ;) -- Kyle$calise  13:22, July 20, 2012 (UTC)

Okay, this should do it:

As I said above, for article comments as well for message wall posts, it's the li-element, that gets the "admin" class. You need to base your CSS rules off of that. The avatar image of message wall posts e.g. could be addessed as:

In the case of user pages, it's the profile masthead, that gets the "admin" class.

You will have to keep the list of admins in this script up-to-date yourself. --


 * It all works perfectly, and you are amazing! Thank you!!!! :D -- Kyle$calise  16:21, July 20, 2012 (UTC)