[How To] Make Side-Shoutbox a full shout box!
Standard member
For communities that want a more traditional shoutbox
Do you have a forum-ran community? Have you ever wanted to use Composer's side-shoutbox as a top of the forum traditional shoutbox? Want to do so while removing the extra fluff that would make it look weird?Well in this little tutorial I'll show you how to change the default sidepanel shoutbox to this:
I'll even show you how to put it at the top of your forums! It will require some template edits, so please make backups of all affected files first!
First step is that we need to make a comcode page. Go to Pages (Comcode pages) in the Content menu in your administrator zone. You'll want to add a new page so go to the bottom of that screen and type in a name proceeded by a colon. For example, you could type in :shoutbox. Whatever you do, don't name it after an existing page, especially don't name it Chat because you will get crazy results if you do.
For that comcode page, go ahead and delete everything on it (the h1 tag and the childpages stuff). Then using the dynamic block assistant on the fancy WYSIWYG editor (looks like a little red box), add the "Shout Box (side_shoutbox)" item.
Just fill out the defaults as needed. Once done, save the page.
Step Two is to edit the CNS_FORUMS template. Make sure to edit the template of the theme you are using. Place this in that template:
Code
{+START,IF,{$EQ,{ID},1}}
{$LOAD_PAGE,shoutbox}
{+END}
Change "shoutbox" to whatever you named your comcode page. Place that after
Code
{+START,IF_NON_EMPTY,{$TRIM,{FILTERS}}}
<div class="box box___cns_forum"> <div class="box_inner">
<span class="cns_pt_category_filters">{!CATEGORIES}:</span> {FILTERS}
</div> </div>
{+END}
If you want the shoutbox at the bottom of your forum, you could try placing it after TOPIC_WRAPPER.
Step Three. Now that you have your shoutbox at the top of your forum, we need to make it not so bulky. So, we need to replace some templates.
The first template we'll replace is BLOCK_SIDE_SHOUTBOX_MESSAGE.tpl Just replace everything in that template with the following:
Code
<div class="associated_details">
<p>{!BY_SIMPLE,{MEMBER} {!POSTED_TIME_SIMPLE,{TIME*}}</p>
<div class="chatbubble">{MESSAGE}</div>
</div>
That will make the messages not so bulky. If you want your shoutbox to look like mine with the little horizontal line seperating the chatting from the chat input box, edit BLOCK_SIDE_SHOUTBOX.tpl and add the
Code
<hr />Step Four. Now that we have the templates done, you need to add a bit of CSS. So go and edit your global.css file and place the following at the bottom of the file:
Code
.chatbubble {
background-color: #F0FFFF;
border: 1px solid #c8c8c8;
border-radius: 5px;
max-width: 69em;
max-height: 12em;
text-align: left;
padding: 2px;
overflow: auto;
}
You can edit the css as you like. Want a different background color for the bubble, change the background-color bit. Don't want to have a max-height, then remove it. I find that a max-height and max-width prevents the bubble from escaping the shoutbox while allowing it to display the whole message instead of truncating it.
Please note that these edits will affect the side_shoutbox. For example, it made mine look like
Anyways I hope you find this helpful!
Last edit: by Chris Graham
Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!
"Those who want help should first be willing to give help."
Standard member
John Morris
Founder and Creator of The Patriot Woodworker online woodworking community
Woodworkers on a Mission!
Founder and Creator of The Patriot Woodworker online woodworking community
Woodworkers on a Mission!
Standard member
I was going to add it to the tutorials section; but I can't quite make out how to do so. Is it a blog? Is it a news article? I'm not sure, so I'll leave it here for now
.EDIT: I figured out how to do so, at least I think so lol. So I submitted it to the tutorials.
Last edit: by mythus
Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!
"Those who want help should first be willing to give help."
Site director
I have cleaned up the code formatting on the post, I think the WYSIWYG editor mangled your code tags a bit – hopefully I got it right and am working to stop HTML-within-Comcode-within-WYSIWYG causing similar issues in the future.
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
1 guest and 0 members have just viewed this.
