Social Network 0.6.0 and a Custom SubSilver2 Style

[chiroz223]

Hello Chi,

Thank you for the reply. Can you change that file to the code below and clear the cache? It is basically the default code with the username text removed as you have removed it in your edit.

Code: Select all

<div class="panel bg1">
	<div class="inner">
		<span class="corners-top"><span></span></span>
<!-- IF .fas_friend and SN_FAS_PAGINATION -->
		<div class="pagination">{SN_FAS_FRIENDS_TOTAL}, {SN_FAS_PAGE_NUMBER}, <span>
		{SN_FAS_PAGINATION}
		</span></div>
<!-- ENDIF -->
		<h3>{L_SN_FAS_FRIEND_LIST}</h3>
		<div class="snFasFriendsBlock">
			<!-- BEGIN fas_friend -->
      <span class="snFasFriend">
				<a href="{fas_friend.U_SN_PROFILE}" title="{fas_friend.USERNAME}">{fas_friend.AVATAR}</a>
			</span>
			<!-- END fas_friend -->
		</div>

		<span class="corners-bottom"><span></span></span>
	</div>
</div>

When it's on the page, let me know. I don't expect it to fix the issue or change anything visually, but it may get us closer to a solution code wise.

Thanks,

Patrick

Yes, the only thing I did was remove the 'name' to try and see if the images would align because if you login (on the site) and go to the user control panel > social network you will see that there is the same problem there as well. What it looks like to me is that somehow I need to combine my template with the properties of prosilver due to the huge template differences between subsilver2 and prosilver.

Chi~

[Patrick]

Hello Chi,

Thank you for your message.

Please apply that new code I provided and clear the cache. Right now, it appears that the code you shared, your edited code, still remains. There is more that has been changed than just removing the username and that code is repeating the snFasFriendsBlock div over and over again, which I think is causing one of the problems. Once we have that cleared, we can see about adjusting it to look right in your style.

If you look at your code and compare it to the code I said to replace it with, you'll notice this block in your code, which is different:

Code: Select all

      <div>
        <div class="snFasFriendsBlock"><!-- END fas_friend -->
        </div>
      </div>

This is what is repeating that div for each individual friend. It's easier to just go ahead and replace the code with what I provided versus adjusting what you have now, though.

Thanks,

Patrick

[chiroz223]

When I revert back to the old code, this is what I get:

Code: Select all

<div class="panel bg1">
	<div class="inner">
		<span class="corners-top"><span></span></span>
<!-- IF .fas_friend and SN_FAS_PAGINATION -->
		<div class="pagination">{SN_FAS_FRIENDS_TOTAL}, {SN_FAS_PAGE_NUMBER}, <span>
		{SN_FAS_PAGINATION}
		</span></div>
<!-- ENDIF -->
		<h3>&nbsp;</h3>
		<div class="snFasFriendsBlock">
			<!-- BEGIN fas_friend -->
      <span class="snFasFriend">
			<a href="{fas_friend.U_SN_PROFILE}" title="{fas_friend.USERNAME}">{fas_friend.AVATAR}</a></span>
			<!-- END fas_friend -->
	  </div>

		<span class="corners-bottom"><span></span></span>
	</div>
</div>

Where abouts do you want me to put that code in the original file?

[Patrick]

Hello Chi,

Thanks for that. I just wanted you to restore that original code.

You are looking for the avatars to just be displayed side by side, correct? If so, the main thing we need to figure out now is why the avatars do not line up visually with the first one being higher than the others. Try this, in that code block above:

Find:

Code: Select all

<span class="snFasFriend">

Replace with:

Code: Select all

<span class="" style="padding-right:20px;">

Please let me know if that is closer to what you are looking for.

Thanks,

Patrick

[chiroz223]

Hello, Patrick!
Yes, that fixed the problem, all the avatars are in-line with each other - thanks! Now I have to sort out the other problems. One of them being with the wall function which seems to cut off text if it is longer than the box and doesn't conform it instead.

Here is a screen shot:


Chi~

[Patrick]

Hey Chi,

Thanks for the note. Happy to hear that. This one was a little strange for me, but I think I may have figured it out. Open your userstatus_status.html file in the template/socialnet folder. Replace all of the text in it with this:

Code: Select all

<!-- BEGIN us_status -->
<!-- IF not us_status.B_SN_US_NOT_ONLY_COMMENT -->
<div class="snUsStatusBlock" id="snUsStatus{us_status.STATUS_ID}">
	<span class="status_poster_avatar">
		<a href="{us_status.U_POSTER_PROFILE}">{us_status.POSTER_AVATAR}</a>
	</span>
	<div class="snUsStatusBox snActionBlockHidden">
		<div class="snActions">
			<!-- IF us_status.DELETE_STATUS -->
			 <div class="snUsDeleteStatus snActionDelete" name="{us_status.STATUS_ID}"></div>
		    <!-- ENDIF -->
		</div>
		<a href="{us_status.U_POSTER_PROFILE}"><span class="snUsername">{us_status.POSTER_USERNAME}</span></a>
		<!-- IF us_status.ANOTHER_WALL --><strong style="font-size:1.1em">&raquo;</strong> <a href="{us_status.U_WALL}"><span class="snUsername">{us_status.WALL_USERNAME}</span></a>&nbsp;<!-- ENDIF -->
		<!-- IF not us_status.B_ISPAGE --><div style="white-space:pre-wrap;">{us_status.TEXT}</div><!-- ELSE -->
		<div class="snUsPageURL" style="padding: 3px 0;"><a href="{us_status.PAGE_URL}" title="{us_status.PAGE_TITLE}">{us_status.PAGE_URL}</a></div>
		<div class="snUsPagePreview" style="float:left;padding: 2px 0px 0px">
			<!-- IF us_status.PAGE_VIDEO neq '' -->
			<div class="snUsPageVideo" style="float:left;padding: 0px 5px 0px 2px;white-space:pre-wrap;">{us_status.PAGE_VIDEO}</div>
			<div class="snUsVideoOverlay" style="background:#000;width:150px;height:150px;position:relative;margin-left:2px;opacity:0.4;cursor:pointer">&nbsp;</div>
			<!-- ENDIF -->
			<!-- IF us_status.PAGE_IMAGE neq '' -->
			<div class="snUsPageImage" style="float:left;padding: 0px 5px 0px 2px;white-space:pre-wrap;"><img src="{us_status.PAGE_IMAGE}" width="130" alt="image"/></div>
			<!-- ENDIF -->
		</div>
		<div class="clear" style="display:none"></div>
		<div class="snUsPageTitle" style="font-weight: bold">{us_status.PAGE_TITLE}</div>
		<div class="snUsPageDesc" style="font-size:0.9em;margin-top:10px;white-space:pre-wrap;">{us_status.PAGE_DESC_TEXT}</div>
		<!-- IF us_status.PAGE_VIDEO neq '' -->
		<div class="snUsPageInfo" style="margin-top:15px;white-space:pre-wrap;">{us_status.PAGE_VIDEOI}</div>
		<div class="snUsPageProvider" style="font-size:0.85em;white-space:pre-wrap;"><a href="{us_status.PAGE_VIDEOP}" title="{us_status.PAGE_VIDEOI}">{us_status.PAGE_VIDEOP}</a></div>
		
		<!-- ENDIF -->		
		<div class="snUsPageAdditional" style="font-size:0.9em;margin-top:10px;white-space:pre-wrap;">{us_status.PAGE_ADDITIONAL}</div>
		<div class="clear"></div>
		<!-- ENDIF -->
		<span class="status_time">{us_status.TIME}
			<!-- IF us_status.B_SN_US_CAN_COMMENT -->&bull;
			<a href="javascript://" class="snUsCommentStatus">{L_SN_US_COMMENT_STATUS}</a><!-- ENDIF -->
		</span>
	</div>
    <!-- IF us_status.SN_US_MORE_COMMENTS && B_LOAD_FIRST_USERSTATUS_COMMENTS -->
    <div class="snUsMore">
      <a href="javascript://" class="snUsGetMoreComments behind" user="{SN_US_USER_ID}"><span class="snUsCommentsCount">{us_status.SN_US_MORE_COMMENTS}</span> {L_SN_US_LOAD_MORE_COMMENTS}</a>
      <img src="{T_IMAGESET_PATH}/socialnet/ajax-loader2.gif" alt="" class="snUsCommentsLoader" style="display:none;"/>
    </div>
    <!-- ENDIF -->
	<!-- ENDIF -->
	<!-- BEGIN us_comment -->
	<div class="snUsCommentBox snActionBlockHidden" id="snUsStatusComment{us_comment.COMMENT_ID}" style="display:<!-- IF us_status.B_SN_US_NOT_ONLY_COMMENT -->none<!-- ELSE -->block<!-- ENDIF -->">
		<span class="comment_poster_avatar"><a href="{us_comment.U_POSTER_PROFILE}">{us_comment.POSTER_AVATAR}</a></span>
		<div class="snActions">
			<!-- IF us_comment.DELETE_COMMENT -->
			<div class="snUsDeleteComment snActionDelete delete_comment" name="{us_comment.COMMENT_ID}">
			</div><!-- ENDIF -->
		</div>
		<div class="comment_text">
			<a href="{us_comment.U_POSTER_PROFILE}"><span class="snUsername">{us_comment.POSTER_USERNAME}</span></a> {us_comment.TEXT}
		</div>
		<span class="status_time">{us_comment.TIME}</span>
	</div>
	<!-- END us_comment -->
	<!-- IF not us_status.B_SN_US_NOT_ONLY_COMMENT -->
	<!-- IF us_status.SN_US_MORE_COMMENTS && not B_LOAD_FIRST_USERSTATUS_COMMENTS -->
	<div class="snUsMore">
		<a href="javascript://" class="snUsGetMoreComments before" user="{SN_US_USER_ID}"><span class="snUsCommentsCount">{us_status.SN_US_MORE_COMMENTS}</span> {L_SN_US_LOAD_MORE_COMMENTS}</a>
		<img src="{T_IMAGESET_PATH}/socialnet/ajax-loader2.gif" alt="" class="snUsCommentsLoader" style="display:none;"/>
	</div>
	<!-- ENDIF -->
	<!-- IF us_status.B_SN_US_CAN_COMMENT -->
	<div class="snUsShareComment" name="{us_status.STATUS_ID}">
		<textarea id="snUsTextarea{us_status.STATUS_ID}" class="snUsInputComment" name="{us_status.STATUS_ID}" style="height:20px"></textarea>
		<div class="snUsButtonCommentOver">
			<input type="button" name="snUsButtonComment" sid="{us_status.STATUS_ID}" class="button1" value="{L_SN_US_COMMENT_STATUS}" />
		</div>
		<div class="clear"></div>
	</div>
	<!-- ENDIF -->
</div>
<!-- ENDIF -->
<!-- END us_status -->

Basically, this is adding white-space:pre-wrap; a bunch of times and (I hope) hitting the right area to make sure the text wraps.

Please let me know what happens when you have uploaded and cleared your cache.

Thanks,

Patrick

[chiroz223]

Hey, yes it worked a treat! Pretty much now I need to do is make some cosmetic changes with the cascading stylesheet and workout how to fix the mainpage which aligns in the centre when I want it to align left - looking from what I have learnt from you, its to do with the classes and ids of the tags which are causing the problems.


Here's what I mean:
http://www.gamzic.net16.net/mainpage.php

Thanks so much for your help,
Chi~

[Patrick]

Hey Chi,

Thanks for the note. My pleasure. Let me know if you run into any roadblocks. To fix the text align, open up the socialnet.css file and find:

Code: Select all

.snUsProfile .snUsStatusBox {
	/*color: #000;*/
	font-size: 12px;
	min-height: 50px;
	padding-right: 20px;
}

Replace with:

Code: Select all

.snUsProfile .snUsStatusBox {
	/*color: #000;*/
	font-size: 12px;
	min-height: 50px;
	padding-right: 20px;
	text-align: left;
}

To fix the align in the comments box below the actual items, find:

Code: Select all

.snUsProfile .snUsCommentBox {
	background-color: #EDEFF4;
	padding: 5px;
	/*color: #000;*/
	font-size: 11px;
	margin-top: 3px;
	/* margin-left: 60px;*/
}

Replace with:

Code: Select all

.snUsProfile .snUsCommentBox {
	background-color: #EDEFF4;
	padding: 5px;
	/*color: #000;*/
	font-size: 11px;
	margin-top: 3px;
	/* margin-left: 60px;*/
	text-align: left;
}

I think that should do the trick.

Thanks,

Patrick

[chiroz223]

Hey Patrick. Sorry for the late reply, I made the edits but there seems to be no change in how it looks and another problem has arised, if you login to the site and look at your profile I posted a random video and it seems to overlap the comment box, it gets worse when the video box expands. Any ideas? :/

http://gamzic.net16.net/memberlist.php?mode=viewprofile&u=76

Chi~

[Patrick]

Hey Chi,

The changes made seem to have fixed the center align. The left is now left align and looks good. On my browser, at least.

With the video thing, I just don't know. Is it possible to change a setting to make it display in a different way?

Thanks,

Patrick