There used to be a problem with emoticons distrupting comments. If you enter a smiley on the phone, the rest of your comment after that smiley is done for. To fix this problem, codes now show in comment section, PM, and wall posts. Speculation. LOL. But, anyway... for stories and blog posts, there's still no easy way to show codes... sure there's the silly < div> spacing like that. I'm always shaking my head every time I see it. SMH Instead of inserting a silly space, just insert <i></i> or any other opening/closing tags. That opening and closing tag will disappear leaving you with <div>. You can just copy codes directly without having to fix those spaces. Of course, there's an easy way to get ride of all those spaces after copying the broken codes, but we're not addressing that right now. LOL.

So... example:

Typing in: <<i></i>div style="text-align:center;">&<i></i>nbsp;<<i></i>/div>

will appear on the chapter or post as: <div style="text-align:center;">&nbsp;</div>

That's how I've been showing the codes in Secret T#1. You can directly copy those codes with no extra step.

This tip is for the following AFF members:

1. Readers who click on a link and are redirected to an invalid story ID page.
2. Authors linking to other AFF stories and profiles within their story.

If you end up seeing a page like this:

Delete one of the view/ in the address bar (the words behind the storyID# does not matter, you can delete it or keep it there).

broken link: www.asianfanfics.com/story/view/view/storyID#/

fixed link: www.asianfanfics.com/story/view/storyID#/

Press ENTER or click GO.

I have also seen when story/ is duplicated. Simply remove one of them and go.

If you wish to help the author and others like yourself, please ask the author to kindly do the following:

Relink the story, profile, or whatever the broken link is. After entering the URL, make sure that https:// is selected. Do not use the insecure http://.

With the secure https://, the link will not break. It is safest to use the secure address ALWAYS.

I totally forgot about this one until I ended up on that damn invalid page again today, lolololo... will add this to my secrets blog in a day or two.

This tip is for the following AFF members:

1. Members who have their entire profile set to friends-only, but still wish to place a message viewable to all (including non-friend members and non-members).
2. Members who wish to have their entire profile hidden from non-friend members and non-members, but may not be aware that there are still information being made available to the general public.

I am just going to say it. The "About Me" section will be viewable to anyone and everyone... even if you have your profile on friends-only. If there is something you don't want non-friends and non-members to see... do not put it in the "About Me" section. Put everything in the "Personal Message" section.

For those who wish to have part of their profile visible to everyone... even with your profile on friends-only... remember... "Personal Message" section is hidden for non-friend members and non-members. "About Me" section is viewable to all.

I was going to bring this up with Nichiren, but then, I remembered. He decided to fix the PM privacy issue after all. LMAO

If you know basic html, you'll know that even with members-only and subscribers-only restrictions applied, anyone (non-members and non-subscribers alike) can freely view your chapters in its entirety. There's, certainly, a way to heighten security, made possible by a new marketplace layout change implemented earlier this year.

I will use my subscribers-only story as an example. Since I'm looking for a very specific audience with particular qualities (extra curious readers interested in historical fantasy adventures), this set up works for me. Hide everything from view.

So... non-members and non-subscribers will see this when viewing chapter two:

If they try to see the chapter text by viewing the html code, they will see this instead:

Subscribers, of course, will see the chapter in its entirety (minus the fun 'haha, access denied message').

Here is the general idea. Since Nichiren has disabled marketplace layout for non-members and non-subscribers to members-only and subscribers-only stories, it is possible to write your chapter as a layout, mark it draft/unlisted, buy it, and apply it. Non-members and non-subscribers will be unable to view the layout, therefore, they will be unable to view your chapter text.

If you wish to have a piece of your chapter viewable to all, this method can be easily modified. Type out the first paragraph (or whatever preview you wish to share with everyone) in the actual chapter... while typing up the rest in the layout and applying it to the chapter.

I will not be going into details on how to use marketplace layouts because, LMAO no thanks. There's already instructions in the AFF FAQ and the actual "layout creation" page.

This is for advanced coders only. This is not a step by step, I'm going to walk you through like a baby, thing. Those who are just learning stuff... this is so not for you.

General tip about making mobile-friendly layouts: Try to always use percentage for widths especially the actual widths of divs... margins... I guess you can use pixels for padding... just to feel less relative in life and more absolute in coding. If you must make a div with a definite width, no more than 260px... possibly floating here and there at the corners with margin:% and when you resize the screen, it comes together.

The stuff above should be straight forward. The stuff below may not be so straightforward. I will be showing you how to use already specified stacking/horizontal splitting classes on AFF.

Stacking

Okay, let's get right down to mobile-friendly business.

The "stack" and "sympl" classes are being used here along with a width specified class "onethird" aka 33.333333333% width. If you re-size the screen, you will see that the three columns will stack on each other to become one column.

Parent div will carry the "stack" and "sympl-stack" classes. Child divs will carry the "sympl" and "onethird" classes.

You can pretty much divide the columns however you want up to six equal columns. Six "onesixth" divs.

Examples of equal columns classes:

Go ahead and re-size the screen to see how they stack again on mobile screens

You can also make... different width columns and still have them stack equally on mobile. Examples:

You can see the pattern in the width classes: quarter (25%)..... half, twoquarters, threesixths (50%)... etc.

Stacking Images

The down side of the "sympl" class is probably that left padding. You can easily solve this by giving the div with the "sympl" class zero padding. Up next... lined up images that stacks upon re-sizing to a mobile screen width.

Go ahead and re-size. You will notice the images will go back to being the maximum size the current screen will allow (that is... if your image is large enough to cover the width). If you don't like the spacing in between the pictures, simply give the image a negative margin-bottom.

The basic codes:

In-between Screen

Side Column

Line 1

Line 2

Line 3

 

Line 4

 

Line 5

 

Line 6

 

Lots of blue here because Rose likes blue which is always relevant to everything. Now... there is such a thing as a screen in-between desktop and mobile. It's like... a wider mobile... which has been given the letter "L" to represent it. So... when I put the class "onefifth," "l-quarter," and "m-full" in the same div, I'm pretty much telling that div to be one-fifth of the screen when on desktop, re-size to one-fourth of the screen when in-between, and turn full width when in mobile. The side column div you see on the left has been given the class="sympl onefifth l-quarter m-full" while the main column/container (this one) has been given the class="sympl fourfifths l-three-quarters m-full".

 

Re-size the screen all the way. The side column will stack on top.

 

<div class="stack sympl-stack">
<div class="sympl onefifth l-quarter m-full" style="color:#fff;padding:0px;">
<div style="background-color:#3366cc;">
<div style="margin-left:20px;">
<h3 style="color:#fff;">Side Column</h3>
</div>
</div>

<div style="background-color:#0099ff;">
<div style="text-align:center;">Line 1</div>
</div>

<div style="background-color:#0099cc;">
<div style="text-align:center;">Line 2</div>
</div>

<div style="background-color:#33cccc;">
<div style="text-align:center;">Line 3</div>
</div>

<div style="height:5px;"> </div>

<div style="background-color:#0099ff;">
<div style="text-align:center;">Line 4</div>
</div>

<div style="height:5px;"> </div>

<div style="background-color:#0099cc;">
<div style="text-align:center;">Line 5</div>
</div>

<div style="height:5px;"> </div>

<div style="background-color:#33cccc;">
<div style="text-align:center;">Line 6</div>
</div>

<div style="height:5px;"> </div>

<div style="background-color:#0099ff;">
<div style="text-align:center;"><img src="imageurl" alt="imagealt" style="margin-top:6px;"></div>
</div>
</div>

<div class="sympl fourfifths l-three-quarters m-full" style="padding:0px;background-color:#99ccff;border-width:10px;border-style:solid;border-color:#3366cc;">
<center>
<div style="width:96%;margin:10px 0px 10px 0px;background-color:#fff;color:#3366cc;">
<div style="padding:10px;text-align:justify;">CHAPTER TEXT</div>
</div>
</center>
</div>

 

l-width classes: l-full, l-half, l-onethird, l-twofifths, l-threesixths... etc. the only one that is inconsistent with the rest is l-three-quarters... You got l-quarter, l-twoquarters... and then suddenly l-three-quarters. But... whatever.

Note... if you put the side column on the right, it will stack below the main column/container. And don't float the sympl divs... that's just weird. And don't mind the .98 opacity and flashing background. That's just me.

Ex. Image Stack

KING JAEJOONG

QUEEN CYNDI

KNIGHT WONJUN

KNIGHT SUNWOO

KNIGHT SUNGJUN

KNIGHT MINSU

KNIGHT SUWOONG

 

UPCOMING MATCH AGAINST: QUEEN A-YEON/KING BERNARD/GOT7 KNIGHTS 12PM KST

Jaejoong and Cyndi pictures or at half screen for desktop, in-between, and full screen for mobile. Boys Republic are onefifth of the screen each for desktop and in-between... and full screen for mobile. You will probably rather not see the codes to this because LMAO... but... let's go.

This was originally posted in place of The Jaeling Arena as an April Fool's.