Support Forum

The callout arrow is actually an image that we created and then placed it into the topic content area using our theme's CSS file. The image we use here is this: It's a little slight of hand image where as it is a rectangle and left of the diagonal line it is transparent and right of it white to match the content area.
Depending on your theme you would need to change it or create one to match your colors.

Once created we added it to our theme's /images folder and echo'd it out from our spTopicView.php file.

sp_SectionStart('tagClass=spPostContentSection', 'content');
echo '<img alt="" class="spAuthorArrow" src="'.SPTHEMEICONSURL.'thread-arrow-author.gif">';                                 
sp_PostIndexContent('', 'Awaiting Moderation')

Then it was a matter of positioning it in our CSS file.

 In our case we used.

#spMainContainer .spAuthorArrow { position: relative; right: 33px; top: 22px;

Afterwards we did have to adjust a bit of padding in the content area to make up for it. 

These small adjustments would be different for whatever SP theme you might be using.

Feel free to grab the image if it matches your colors and if you get stuck or need help let us know.

From what I can tell that screenshot is of Group View. If so I would guess that the CSS file has a typo.

A quick look and in my example #spMainContainer .spAuthorArrow { position: relative; right: 33px; top: 22px;

I don't see the closing } bracket. If you did a copy paste of it then that could mess things up.

I also took a quick look at your forum. This has nothing to do with getting the arrow working but once you do it will be more noticeable. If you look at this post http://playingwithsuperpower.c.....ticle/#p23 the white content area doesn't go all the way to the bottom. There is a sliver of pink, the same color as the left side under it.

It looks like that is caused by the larger than normal user icons. You have them set at 100px wide which also allows the avatar to be taller than usual. When that large and there is no signature in the content of the post that will happen.

You can either reduce the avatars to like 75px or you will have to add more padding to the content area to make up for it.

If you want to try the adding of more padding look for

#spMainContainer .spTopicPostSection.spOdd .spPostSection

and

#spMainContainer .spTopicPostSection.spEven .spPostSection

and change the padding entry of 200px to something like 250px.

The reason I noticed is because I forgot to mention the left side border of the content area that is needed. You will notice you don't have one and here we do.

The border entry is in the same place as the padding entries above.
Add a  border-left: 1px solid #8B1A1A; to both of those entries to get it to show.

So to reiterate and test as you go this is what I would do.

• Decide what and where you want to make the change to the Avatar display to get rid of the pink area below the content. Make sure it looks good on all posts with and w/o signatures.
• Create the left side content border.
• Add in the CSS for the arrow.
• Save and test for errors and make sure left border is there.
• Add the gif iimage file to your theme's /images folder
• Enter the stuff to echo out the arrow image in TopicView.php file
• Check for display and errors

If there are no problems then from there you can change the CSS for the arrow "#spMainContainer .spAuthorArrow" >  top and bottom entries to move it around if needed.

My comment about 'adjusting things a bit' was basically changes in the margin of the content area of a few pixels here and there to match this theme's setup. You may or may not have to do that but won't know until you get the arrow where you want it to be.

BTW, I don't want this to sound like an advertisement but if you don't want to do this all yourself or if anyone else wants the same thing created for them you can click on the "Custom SP Theme Work" ad in the right sidebar of this page and contact me directly from there.