Is this possible to use different text color for admins/moderators, so all users instantly recognize those users ?

Comments

Michelle’s picture

Status: Active » Fixed
kerios83’s picture

Thx, Michelle but I was wondering if it's possible with their post text color (AF). But usernames in a different color is a nice feature to.

Something like:

user
gadkgfjlajgk

user2
gfdsajgfldagda

admin
fkhbakfjaksfa <- different text color

I know I can use wysiwyg for that, but doing it again and again is very frustrating. I would like to have it hardcoded somewhere (it's a nice option for Artesian Forum to do that). So any user with admin/moderator ID would write their text in... red color for example.

Michelle’s picture

Oh, well, you can do it with CSS. The UID of the poster is in the markup. Alternately, you could write a filter for it so you would put, say, [admin]lorem ipsum[/admin] for text you want specially highlighted. That takes coding, though. Doing it with CSS off the UID is easier but then hardcoded to the UID.

Michelle

batigol’s picture

I don't see user ID anywhere... 7.x-2.0-beta2

test topic created:

<div class="tabs">
		<h2 class="element-invisible">Primary tabs</h2><ul class="tabs primary"><li class="active"><a href="/forum/test" class="active">View<span class="element-invisible">(active tab)</span></a></li>
<li><a href="/node/183/edit">Edit</a></li>
<li><a href="/node/183/translate">Translate</a></li>
</ul>		</div>
		
		<h2>test</h2>
				  <div class="region region-content">
    <div id="block-system-main" class="block block-system">

    
  <div class="content">
    
  
<div id="forum-topic-header" class="forum-topic-header clearfix">
	
  <div class="topic-post-count">
  1 post / 0 new  </div>

      <div class="topic-reply-link">
    <div class="topic-reply-allowed"><a href="/forum/test#comment-form" class="af-button-large active"><span>Quick reply</span></a></div>    </div>
  
  
  

  <a id="forum-topic-top"></a>
</div>

<div id="node-183" class="forum-post clearfix en posted-by-1  post-by-viewer"  about="/forum/test" typeof="sioc:Item foaf:Document">
  <div class="forum-post-info clearfix">
    <div class="forum-posted-on">
      <span property="dc:date dc:created" content="2011-11-26T18:04:25+01:00" datatype="xsd:dateTime">Sat, 11/26/2011 - 18:04</span>
                </div>  
    
        
    <span class="forum-post-number"><a href="/forum/test" class="active">#1</a></span>
  </div> 
  <div class="forum-post-wrapper">
    <div class="forum-post-panel-sub">
              <div class="author-pane"><a href="/users/root" title="View user profile." class="username" xml:lang="" about="/users/root" typeof="sioc:UserAccount" property="foaf:name">root</a>  <div class="user-picture">
    <a href="/users/root" title="View user profile."><img typeof="foaf:Image" src="http://my.site/files/styles/user-picture/public/user-pictures/picture-1-1321613786.jpg" width="80" height="80" alt="root&#039;s picture" title="root&#039;s picture" /></a>  </div>
</div>          </div>

    <div class="forum-post-panel-main clearfix">
              <div class="forum-post-title">
          test        </div>
      
      <div class="forum-post-content">
        <div class="form-item form-type-item">
  <label>Language </label>
 English
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>test</p>
</div></div></div>      </div>

      
              <div class="author-signature">
          <p>test !</p>
        </div>
          </div>
  </div> 
  <div class="forum-post-footer clearfix">
    <div class="forum-jump-links">
      <a href="#forum-topic-top" title="Jump to top of page" class="af-button-small"><span>Top</span></a>
    </div>

    <div class="forum-post-links">
      <ul class="links inline"><li class="post-edit first"><a href="/node/183/edit?destination=node/183" class="af-button-small"><span>edit</span></a></li>
<li class="post-delete last"><a href="/node/183/delete" class="af-button-small"><span>delete</span></a></li>
</ul>    </div>
  </div> </div> 
<div id="forum-comments" class="comment-wrapper">
        <h2 class="title comment-form">Add new comment</h2>
    <form class="comment-form" action="/comment/reply/183" method="post" id="comment-form" accept-charset="UTF-8"><div><div id="edit-author--2" class="form-item form-type-item">
  <label for="edit-author--2">Your name </label>
 <a href="/users/root" title="View user profile." class="username" xml:lang="" about="/users/root" typeof="sioc:UserAccount" property="foaf:name">root</a>
</div>
<div class="field-type-text-long field-name-comment-body field-widget-text-textarea form-wrapper" id="edit-comment-body"><div id="comment-body-add-more-wrapper"><div class="text-format-wrapper"><div class="form-item form-type-textarea form-item-comment-body-und-0-value">
  <label for="edit-comment-body-und-0-value">Comment <span class="form-required" title="This field is required.">*</span></label>
 <div class="form-textarea-wrapper"><textarea class="text-full form-textarea required" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="5"></textarea></div>
</div>
<fieldset class="filter-wrapper form-wrapper" id="edit-comment-body-und-0-format"><div class="fieldset-wrapper"><div class="filter-help form-wrapper" id="edit-comment-body-und-0-format-help"><p><a href="/filter/tips">More information about text formats</a></p></div><div class="form-item form-type-select form-item-comment-body-und-0-format">
  <label for="edit-comment-body-und-0-format--2">Text format </label>
 <select class="filter-list wysiwyg form-select" id="edit-comment-body-und-0-format--2" name="comment_body[und][0][format]"><option value="filtered_html" selected="selected">Filtered HTML</option><option value="tiny_mce_admin">Tiny MCE - admin</option><option value="full_html">Full HTML</option><option value="plain_text">Plain text</option></select>
</div>
<div class="filter-guidelines form-wrapper" id="edit-comment-body-und-0-format-guidelines"><div class="filter-guidelines-item filter-guidelines-filtered_html"><h3>Filtered HTML</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Allowed HTML tags: &lt;a&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;</li><li>Lines and paragraphs break automatically.</li></ul></div><div class="filter-guidelines-item filter-guidelines-tiny_mce_admin"><h3>Tiny MCE - admin</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li></ul></div><div class="filter-guidelines-item filter-guidelines-full_html"><h3>Full HTML</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Lines and paragraphs break automatically.</li></ul></div><div class="filter-guidelines-item filter-guidelines-plain_text"><h3>Plain text</h3><ul class="tips"><li>Web page addresses and e-mail addresses turn into links automatically.</li><li>Lines and paragraphs break automatically.</li><li>Allowed HTML tags: &lt;a&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt; &lt;p&gt; &lt;br&gt;</li></ul></div></div></div></fieldset>
</div>
</div></div><input type="hidden" name="form_build_id" value="form-_Q2Lt1D0fEqkBM_Y07JQdrtgOy4BibKy5mCT2A4" />
<input type="hidden" name="form_token" value="rYQfq0lRhd8Nxno1QF1GsbPfixymsfZ0F_5UI8" />
<input type="hidden" name="form_id" value="comment_node_forum_form" />
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit" /><input type="submit" id="edit-preview" name="op" value="Preview" class="form-submit" /></div></div></form>  </div>
  </div>
</div>
  </div>
Michelle’s picture

posted-by-1

Michelle

kerios83’s picture

I think that doing it with the css is easier and you can always change it, whenever you want. Honestly I don't know how http://api.drupal.org/api/drupal/includes--theme.inc/function/theme_user... can help me. Could you give me a little advice ? Thx.

Michelle’s picture

I suggested that before you clarified that you meant the post color, not the user name.

Michelle

batigol’s picture

@Michelle

'Oh, well, you can do it with CSS. The UID of the poster is in the markup.'

Could you be more specific ? I presented you the code from 7.x-2.0-beta2 after created a test topic. I'm sorry for being such a pain in the ass but I need this option (different text color). Could you give an example how to achieve this ?

Michelle’s picture

I gave you the class name you need in #5. Not sure what more you need to know. You can find examples on how to style classes in any CSS primer...

Michelle

batigol’s picture

Ohhh thx. I didn't noticed it. Wow everything works fine!

When you try to change text color for admins/moderators class .posted-by-1 have 'inside' some other classes so you styling should looks something like:

/* forum topic/post style */

.forum-posted-on
{float:none;
text-align:left;
display:inline;}

.forum-post-number
{float:left;}

.forum-post-panel-sub
{}

.author-pane
{}

.forum-post-panel-sub .author-pane .user-picture
{display:block;}

.forum-post-panel-sub a.username /* username if linkable */
{display:block;
margin:20px 0px 10px 0px;
padding:0;
font-weight:bold;
font-size:13px;
overflow:hidden;}

.forum-post-panel-sub span.username /* username if not linkable */
{display:block;
margin:20px 0px 10px 0px;
padding:0;
font-weight:bold;
font-size:13px;
overflow:hidden;}

.forum-post-panel-main
{}

.forum-post-title /* only 1 post title */
{display:none;}

.forum-post-panel-main .forum-post-content
{padding:50px 15px 10px 15px;}

.author-signature
{color:gray;
margin:10px 15px 10px 15px;
font-size:10px;
overflow:hidden;}

/* / forum topic/post style */

/* admin-moderator text color */

.posted-by-1 /* this is your UID - if you have 2 moderator and they id are 12 and 13 it should look like: posted-by-12, posted-by-13 */
{color:blue;}

.forum-posted-on
{color:black; /* your default color */}

.author-signature
{color:gray; /* your default color */}

/* / admin-moderator text color */

Advanced forum style: Naked

When I finish styling this forum I will give a link here so every interested user can watch/ask question about the code.

Now I need to figure out how to style comments like that :)

EDIT:

add

.post-edited
{color:black; /* your default color */}

for edited message post text color

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.