Our Workshop

Here will be the discussion between myself and Ange, where we work together for the 2017 theme for GtR.  All special notes and inquiries will go here, work should begin sometime in September.  Below is a list of features that I wish to have or keep, so it includes features that GtR already has, as well.

- - - - - - - - - - -
Desired Features (Completed):

Editor Button Design (FAE)
Widget toggle (topic viewing page) (FAE)
Index widgets [KEEP]
Quick Nav (FAE)
Chat Toggle (with widget & quick nav toggle)
Secondary rank (editable by members)
Signature Toggle [KEEP]
Code: Select Content [KEEP]
Online Staff Widget
Like/Dislike System [KEEP]
Image Resizer [KEEP]
GIFActif
User-generated Emotes
Post Cards [KEEP]
Friends List Widget [KEEP]
User Activity in Profile
Notification Toolbar Flash (FAE)
New Messages Flash (FAE)
Mentions Avatar
Mentions Group Colorize
Search Bar Style (FAE)
Sub-Forum Hover Slide [KEEP]
Affiliates Page [KEEP]
Theme color changer

Current Concept Ideas: (Hidden)

Gradient (Index Forum):
https://i.servimg.com/u/f97/16/89/96/68/grinde10.png


Gradient (Forum Logo):
https://i.servimg.com/u/f97/16/89/96/68/grlogo10.png


Navigation Bar:
https://i.servimg.com/u/f97/16/89/96/68/navlef10.png
https://i.servimg.com/u/f97/16/89/96/68/navcen10.png
https://i.servimg.com/u/f97/16/89/96/68/navrig10.png


Post Profile Block (top right corner):
https://i.servimg.com/u/f97/16/89/96/68/post_p10.png

Post profile BLock (lower right corner):
https://i.servimg.com/u/f97/16/89/96/68/post_p11.png

@Leah7 I've added a few things so far :
- Editor Button Design (FAE)
- Notification Toolbar Flash (FAE)
- New Messages Flash (FAE)
( You'll see the layout in the CSS )

About the concept designs, I see they're red, but the current theme color is purple. Will the purple be the base color that we're designing in ? Just wanna make sure, before working on more stuff.

Oh, yesh!
I used red as the first color I designed the theme with, because black + red is usually one of the most difficult color schemes for me to work with.  ^^  However, the default theme color will be this purple one.  <3

Also, how do I change the editor icons? Can I make them myself, or did you use FontAwesome for that?

Post Card Test:
https://subjectochange.forumotion.com/t58-our-workshop#838

@Leah7 for the button icons you can edit the default image map and replace the icons in it with your custom images -- each icon in the map is 16x16 pixels btw. Once you're finished the image map, you just have to update it with CSS :

Code:

body .sceditor-button div, body div.sceditor-grip {
  background-image:url(NEW_IMAGE_MAP);
}

You can also use this method as well which allows you to edit each individual icon with a different image link. Personally, I recommend the image map method, because it's faster as it requires loading less resources. You'll still need to create separate images for custom buttons though, but the image map is perfect for the bulk.

I'll be working on the side panels / navigation first, but I'll be developing a free "easy-to-use" API which anyone can utilize, even off forumotion. Work in progress... The panels in FAE were built into the templates, so I'll be remaking this from the ground up with a simple JS plugin and some CSS.

Okay!    I got most of 'em done!  The ones that I knew what they were, anyway...>.>  I left everything else that I didn't recognize the same. (Except for the one next to the "switch editor mode" button, because I couldn't come up with a different icon for that one....)

Can you kind of tell what it all is?

They all look good to me. The last one near the "switch editor mode" is a clip board, like for pasting text into the editor.

I've added the rep system (like/dislike system) of yours and I edited the profiles just a little. >.>

Got some more tutorials added today! ^^

> More Tutorials Added
> Post Appearance Updated

I was looking at the concepts again and noticed that the widget title weren't styled yet. I whipped up the following CSS for it and you can view it on the main page. Lemme know if it needs any adjustments.

Code:

/* widget titles */
#wrap #right .module .h3, #wrap #left .module .h3 {
  color:#FFF;
  text-align:center;
  background:#6B25C1;
  border:none;
  border-radius:3px;
  padding:6px 3px;
  margin:0px 0px 6px 0px;
  position:relative;
}

#wrap #right .module .h3:before, #wrap #left .module .h3:before {
  border-bottom:6px solid transparent;
  border-top:6px solid transparent;
  content:"";
  margin-top:-6px;
  position:absolute;
  top:50%;
}

#wrap #right .module .h3:before {
  border-right:12px solid #6B25C1;
  left:-10px
}

#wrap #left .module .h3:before {
  border-left:12px solid #6B25C1;
  right:-10px
}

ALSO I was thinking of touching up the input fields, drop downs, and buttons, because they stand out right now, and some of the text is hard to read too. ( e.g. search, preview, send, select a forum.. ) Have any ideas for them or should I wing it ?

EDIT :
OOH code boxes and blockquotes'll need some editing as well. I'll slow down so we can do one at a time LOL

The widget titles look lovely...thank you so much!  ^^  They are outstanding.  And ARGH.  I didn't even think of any of the code boxes or anything.  x.x'  I've been so focused on trying to decide what to do for all the buttons.  

I don't honestly have any idea what to do for the drop downs except to make them gray to match all themes, so...feel free to come up with whatever.  xD

I'd really like to do something different for codes and quotes, something different than usual...maybe some how give them odd shapes like we did with the post profile, somehow?  I'm not sure...what do you think?

I also still need to finish the post profiles. O-O  I never did put the BG behind the top slots of the text, like I had in the sample.  I think I was going to ask you if I needed images for the whole tab or just the left sides where it bends around the page...I didn't know if it would be better to use just images or to code in some of it, too.

I actually put in the dark background behind those profile fields because of the fact that the colors could change and all that (and not all of it will look good on the background colors that will change from the theme changer).  I wanted to be sure that it would all be legible, regardless of the theme chosen per user.  

Is there a way to do that for the "profile" widget title?  To put a dark background just behind the username?  As it stands, the username will change color based on group, as well, so I'd like it to be always legible, if possible.

@Ange Tuteur
OH WAIT. You did say we could just make the post buttons just the text and the contact icons just icons and that your theme changer makes the buttons, themselves...should I make the text WHITE, then, to be legible? Or did you think a darker color would be better?

Leah7 wrote:The widget titles look lovely...thank you so much!  ^^  They are outstanding.  And ARGH.  I didn't even think of any of the code boxes or anything.  x.x'  I've been so focused on trying to decide what to do for all the buttons.  

Cool, no problem. Ah we can work on it as we move along.

Leah7 wrote:I don't honestly have any idea what to do for the drop downs except to make them gray to match all themes, so...feel free to come up with whatever.  xD

Hmm.. I was thinking something along the same lines :
- Text : #CCC
- Background : #111
- Border : #333:default --> #555:hover --> main_theme_color:focus

This is the CSS I've applied to the theme :

Code:

select {
  color:#CCC;
  background:#111;
  border:1px solid #333;
  padding:3px;
  margin:3px;
  outline:none;
}

select:hover { border-color:#555; }
select:focus { border-color:#6B25C1; }

Should be able to see it on the select drop downs now. We could use the same design for the input fields too.

Leah7 wrote:I'd really like to do something different for codes and quotes, something different than usual...maybe some how give them odd shapes like we did with the post profile, somehow?  I'm not sure...what do you think?

I think it'd be interesting to give a try. We can place up to 2 pseudo-elements to give unique effects -- maybe more depending on the child elements that each codebox has.

Leah7 wrote:I also still need to finish the post profiles. O-O  I never did put the BG behind the top slots of the text, like I had in the sample.  I think I was going to ask you if I needed images for the whole tab or just the left sides where it bends around the page...I didn't know if it would be better to use just images or to code in some of it, too.

I actually put in the dark background behind those profile fields because of the fact that the colors could change and all that (and not all of it will look good on the background colors that will change from the theme changer).  I wanted to be sure that it would all be legible, regardless of the theme chosen per user.  

It should be possible with CSS alone. We can use a little CSS trick to create arrows or corners, Chris has some good examples one how it can be achieved here. ANYWAYS I put together a the concept you had -- using a similar method to create the corners -- so lemme know if it works for you. The CSS I wrote is below btw.

Code:

.post { margin-left:10px }

.postprofile dt > strong, .postprofile dt > a:last-child, .postprofile dt + dd > span {
  text-align:center;
  background:#151515;
  display:block;
  position:relative;
  border-radius:3px 3px 3px 0px;
  margin:5px 15px 0px -15px;
  padding:4px 0;
}

.postprofile dt > strong:before, .postprofile dt > a:last-child:before, .postprofile dt + dd > span:before {
  content:"";
  position:absolute;
  left:0px;
  bottom:-5px;
  border-bottom:5px solid transparent;
  border-right:5px solid #0B0B0B;
}

.postprofile dt > br, .postprofile dt + dd > br, .postprofile dt + dd + dd { display:none; }

I'll probably need to make some adjustments to the overflow, because I had to make it visible to show the corners outside of the post bodies.

Leah7 wrote:Is there a way to do that for the "profile" widget title?  To put a dark background just behind the username?  As it stands, the username will change color based on group, as well, so I'd like it to be always legible, if possible.

Oh crap I forgot about that ! Dx On the themes I've made I usually disable the color with the snippet I have below. That way the text remains legible regardless of group affiliation. Which way do you want to do it : background or plain text ? I'm cool with either way.

Code:

.module .h3 > span[style*="color"] { color:#FFF !important; }

Leah7 wrote:@Ange Tuteur
OH WAIT.  You did say we could just make the post buttons just the text and the contact icons just icons and that your theme changer makes the buttons, themselves...should I make the text WHITE, then, to be legible?  Or did you think a darker color would be better?

The thing I did for FAE is that I made images that are white text and transparent, then I'd color the background with CSS depending on the chosen theme.


So the browser knew what images to color, I added a special query onto the image URL -- usually something like ?color=primary&size=s so the URL would look like https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary&size=s

And the CSS looks something like this :

Code:

.contact-info a, .profile-icons a, .buttons a { display:inline-block; }

img[src*="color=primary"] { background-color:#69C; }
img[src*="color=primary"]:hover { background-color:#58B; }
img[src*="color=primary"]:active { background-color:#369; }

img[src*="color=secondary"] { background-color:#345; }

img[src*="size=s"] { padding:4px 6px; }
img[src*="size=m"] { padding:6px; }
img[src*="size=l"] { padding:9px 16px; }

From : https://github.com/SethClydesdale/forumactif-edge/blob/master/css/fa_edge.css#L394

We can use the same method since it'll save you from making a gazillion images per theme color !

HOLY CRAP, those post profile flags look amazing...like woah.  O-O  I had no idea you could code folds, like that!  This is the first time I've ever seen "last child" in code, before.  I will be playing with that some time just to figure out how it all works.  *o*
- - - - - - -

Here soon, I'll work on the weird little warning bars I had set up inside those little tabs, so that we can have one for it, too.  :3  Then, that'll be the last of the profile slots that will need a bg.

Either way, I'm probably going to have to make the post profile longer and fiddle with the codes again.  x.x'  Freaking personal title already makes some of the contact icons go off of the box.  Then again, maybe I could just remove all other info from the post profiles and make them only visible in the actual profiles?  That may conserve some space, there...which method do you think would be wiser?
- - - - - - -

I think your drop downs look amazing, good sir.  Amazing.  They don't hurt my eyes and that makes me happy. lol  So nice bonus, indeed.  Even the scroll bars around here aren't too eye-hurty, somehow...
- - - - - - -

As for the profile widget title, I'm totally okay with it being white.  That way, it'll match the other widget titles.  ^^  I didn't even think of that; thank you very much!  You're a pro, as usual.
- - - - - - -

And yes, I do think just doing transparent text for the icons and buttons will be the way to go, like you did for yours.  I just hope the white won't be too bright?  It doesn't seem too bright on the contact icons, so I think those will be okay.  However, I can also use the dark grey, like what I have for the logo...which do you prefer?  ^^
- - - - - - -

I'm guessing the "color=primary/secondary" is from the theme/color changer codes and that's what it uses to identify which color to use?
- - - - - - -

Also, is it possible to change the default text for the navigation bar? If so, I'd like to know how I can change "you have no new messages" to "Messaging" and the "you have a new message" to "New Message." ^^

> Added Features
> Added Codes
> Added Images

Leah7 wrote:HOLY CRAP, those post profile flags look amazing...like woah.  O-O  I had no idea you could code folds, like that!  This is the first time I've ever seen "last child" in code, before.  I will be playing with that some time just to figure out how it all works.  *o*

There's many possibilities since CSS pseudo content was added. The ":last-child" selector refers to the last element of a parent. For example "p > strong:last-child" would style the last strong tag in a paragraph.

Code:

<p>
  <strong>:first-child strong text. </strong>
  <strong>just some more strong text. </strong>
  <strong>:last-child strong text.</strong>
</p>

I added it to the selector set for "a" just in case the user's name isn't strong, and since there's two "a" tags in ".postprofile dt" I added last-child to select the last one only.

Leah7 wrote:Here soon, I'll work on the weird little warning bars I had set up inside those little tabs, so that we can have one for it, too.  :3  Then, that'll be the last of the profile slots that will need a bg.

Either way, I'm probably going to have to make the post profile longer and fiddle with the codes again.  x.x'  Freaking personal title already makes some of the contact icons go off of the box.  Then again, maybe I could just remove all other info from the post profiles and make them only visible in the actual profiles?  That may conserve some space, there...which method do you think would be wiser?

I saw you had them up and was going to work on them, but when I edited the image links to add a selector and saved the field all the images disappeared. I don't know why either. o_O Could you post the image links for the warning bars so I could try that again ? I would've saved the links beforehand if I knew that was going to happen. Dx

What do you think about increasing the profile by about 200 pixels ? I was thinking we should put the profile fields at a fixed height of about 100 or 150 pixels, and add a scroll bar. Here's what the CSS would look like for that :

Code:

.postprofile dt + dd + dd + dd {
  height:100px;
  overflow:hidden;
  overflow-y:auto;
}

Leah7 wrote:I think your drop downs look amazing, good sir.  Amazing.  They don't hurt my eyes and that makes me happy. lol  So nice bonus, indeed.  Even the scroll bars around here aren't too eye-hurty, somehow...

Cool, I'll look into adding the design to the rest of the input fields. I can add some custom scroll bars for webkit browsers if you want. Maybe something like the one below ?

Can make it change colors based on the chosen theme too !

Leah7 wrote:As for the profile widget title, I'm totally okay with it being white.  That way, it'll match the other widget titles.  ^^  I didn't even think of that; thank you very much!  You're a pro, as usual.

Righto, I'll add it to the stylesheet.

Leah7 wrote:And yes, I do think just doing transparent text for the icons and buttons will be the way to go, like you did for yours.  I just hope the white won't be too bright?  It doesn't seem too bright on the contact icons, so I think those will be okay.  However, I can also use the dark grey, like what I have for the logo...which do you prefer?  ^^

I agree that white on dark themes can be a bit harsh. I sometimes use either #CCC or #999 for text -- depends how dark the theme is. I think #CCC or something close to it -- but below -- will work perfectly.

Leah7 wrote:I'm guessing the "color=primary/secondary" is from the theme/color changer codes and that's what it uses to identify which color to use?

Yep ! I also used these two colors so it was easier to style the images with CSS. Primary was #69C and seconday was #3.. something -- a darker color. I used secondary mainly for the active buttons like multi-quote and thanks.

Leah7 wrote:Also, is it possible to change the default text for the navigation bar?  If so, I'd like to know how I can change "you have no new messages" to "Messaging" and the "you have a new message" to "New Message."  ^^

Yeah it's possible. We can use CSS to hide the original texts and pseudo content to create new texts. I added the CSS below to the stylesheet. Let me know if it looks okay on your end.

Code:

a.mainmenu[href="/privmsg?folder=inbox"] { font-size:0 !important; } /* hide original texts */

a.mainmenu[href="/privmsg?folder=inbox"]:after {
  content:"Messaging";
  font-size:12px !important;
}

a.mainmenu[href="/privmsg?folder=inbox"] .new-message:after {
  font-size:12px !important;
  color:#B31144;
  content:"New Message";
  background:#111;
  position:relative;
  margin-right:-70px; /* hides "messaging" */
}

Okay, I increased the profile by 200px. Here are the warning bar images, I uploaded them again.
https://i.servimg.com/u/f37/16/89/96/68/311.png
https://i.servimg.com/u/f37/16/89/96/68/211.png
https://i.servimg.com/u/f37/16/89/96/68/111.png
https://i.servimg.com/u/f37/16/89/96/68/011.png

I like the scrollbar! And the new navbar fields. ^^ They look great; thank you. I figured making them shorter would be a great idea, since I have to put up affiliates, too. That'll make it longer and I didnt' want it to overlap on my screen res.

Ah looks like a good amount of space now, we should be able to increase the profile fields by about 50 or 75 pixels. Thanks for reuploading them ! I'm having a problem though.. whenever I try to add the images to the warning field they don't work -- even the little plus icon does nothing. x.x Does it work for you ? ( I think forumotion eff'ed somethin' up >.>... )

I added the custom scroll bar which you'll be able to see on browsers like chrome, safari, or opera. I gotta question though ! Do you want the gutter to be white or black like the background color ?

White is on the left and black is on the right.

I can't do the images, either. O-o Weird. What did FM do???

I like both scroll bar thingies! ^^ Which one do YOU prefer? I'm not really super picky about it, but I'm also mostly not-biased, since I use firefox and I won't really see it, anyway. LOL

Also, the tabs in the post profile slants down, but they are curvy on the category titles in the index. I think I want them to be the same, so should I make the post profile curvy like they are on the categories, or do you think we should slant the category ones? I don't mind either one. :3

No Idea, but that plus button is completely useless.. x.x Anyways I managed to put the images back -- you have to add them one at a time, clicking "save" for each new image. Buuuut for adding the profile field to one of those label thingies we'll need to edit the templates just a bit, and add a javascript too.

Can you go to Admin Panel > Display > Templates > General > viewtopic_body and delete everything in this template and replace it with the code below ?

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };


$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }

    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }

 return false;
};

//]]>
</script>

<h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
 <div class="buttons">

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>

 <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->
 </p>

 <div class="pagination">
 {PAGE_NUMBER}
  • 
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  • 
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </div>
 <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
 <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 <div class="postbody">

 <ul class="profile-icons">
 <li>{postrow.displayed.THANK_IMG}</li>
 <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
 <li>{postrow.displayed.QUOTE_IMG}</li>
 <li>{postrow.displayed.EDIT_IMG}</li>
 <li>{postrow.displayed.DELETE_IMG}</li>
 <li>{postrow.displayed.IP_IMG}</li>
 <li>{postrow.displayed.REPORT_IMG_NEW}</li>
 </ul>

 <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
 <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
 <div class="clearfix"></div>

 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div style="display:none"></div>
 <div class="content clearfix">
 <div>{postrow.displayed.MESSAGE}</div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file clearfix">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->

 <!-- BEGIN switch_no_comment -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
 <!-- END switch_no_dl_att -->

 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
 </div>
 {postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <dl>
 <dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <dd>
 <!-- BEGIN profile_field -->
                                          <span class="profile-field">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>

 <div class="clear"></div>

 <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a></p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <div class="clear"></div>
 <div>
 <!-- BEGIN link -->
 » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <span class="corners-top"><span></span></span>
 <div class="h3"> {L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
 <div class="buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
 </div>

 <div class="pagination">
 {PAGE_NUMBER}
 </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
 <label>{L_JUMP_TO}: </label>
 {S_JUMPBOX_SELECT} 
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}: </label>
 {S_SELECT_MOD}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Once you've done that, just save and publish the template.

I'll be adding the script below to JS codes management. It'll add unique classes to each profile field once you've made the template modification.

Code:

$(function() {
  for (var field = $('.profile-field'), i = 0, j = field.length; i < j; i++) {
    field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) {
        var c = s.charCodeAt(0);
        if (c == 32) return '-';
        return '__' + ('000' + c.toString(16)).slice(-4);
    });
  }
});

I think the black background might be good for a dark theme like this. YOU SHOULD TRY IT OUT ! lol It sucks that firefox doesn't allow you to style their scroll bars though.. >.>

Hmm.. I think curvy would be good for the profiles.

The templates have been added and the post profiles have been updated.

To discuss the forum/index & status icons:
If you look at the sample, the larger, red boxes are meant to be the forum icons where I'll be making an inner icon for each, individual forum (which will be the same as the ones that GtR currenly has, but shrunken down) so that we can put the box that you see currently underneath it, coded to match the theme color.

You said before that this could be done easily, is that still the case? :3 I have made a small icon as a temporary placement, for the time being. >.> I'll go ahead and put those in the forums that we currently have so that we can work on at least making the purple square for it.

As for the others smaller boxes (the gray and green ones in the sample), those are meant to be the status icons (no new posts, new posts, locked, etc.) and I'm wanting those to be just images, I think. My question for that, though, is if I need to make the full square an image or if I should make it so that the corner is missing, so that it won't overlap the coded forum boxes? I'd really like them to overlap like they are in ze sample, if possible.

Ah perfect ! I updated the CSS and JS to change the position of the warning field. Since that modification is done, I'll let you in on an awesome secret. You should be able to style each profile field individually now. >.>

For example the class for the posts field is ".field_posts" so the CSS would look like below.

Code:

.field_posts { color:red; } /* whole field */
.field_posts .label, .field_posts .label span  { color:blue !important; } /* label */

Fields that have a space in their label will have a dash in the class, ".field_join-date" for example. Best to inspect the element just to double check though.


Anyways, about the icons, yeah it's still possible to code a box onto the forum icons. The CSS will look something like this :

Code:

.dterm > div > .hierarchy + br + img[style*="float:left"] {
  background:#151515;
  border:6px solid #6B25C1;
  border-radius:4px;
}

( you can put it in the stylesheet to see the result )

That's a sample though since we'll still need to move the icons so they overlap the status ones. You should make the status icons full squares, because we can move the forums icons with CSS so that they overlap the status icons. That's what you're wanting, right ?

P.S.
Sorry for the late reply. x.x

Yes, I would like them to overlap, please. ^^ Just like me sample, if possible. Sorry for all the trouble!