how to edit layouts

So I've decided to release some step-by-step help here in case anyone's having difficulties using layouts on AFF :) Although, of course, you can definitely give this a read even if you're not having any problems to avoid any future accidental mistakes. If you're still having any problems after going through this, feel free to approach me!

index

01. What do I do if the layout's messed up?

02. Changing text content

03. Changing images

04. Changing music

05. Changing video

06. Changing links

07. Changing multiple layer text content

08. Changing hover text content

09. Removing content

(I want to say "click to jump to section" but I can't figure out the code for that T^T)

 

01. What do I do if the layout's messed up?

Sometimes layouts get messed up and you notice things being in the wrong place or things going missing. That's MOST LIKELY because some parts of the code were accidentally deleted somehow. Yes, it is definitely possible to remove parts of the code without going into the source even once.

If you try to restore the layout back at this point, it's probably going to be very hard, especially for roleplay or shop layouts since they are typically rather complicated.

What I would recommend you to do would be to first back up all your content (ie. your rules etc.) on a separate document (such as Word Document) so you won't have to re-type everything again later. Next,

(i) undo whatever changes you made until the layout looks presentable again; or

(ii) delete the whole layout and start afresh again with the original codes.

Now, make the changes you want to layout again but this time, following the steps shown below so as to avoid messing with the codes :)

 

02. Changing text content

When replacing the dummy text used in layouts to your own content, please DO NOT highlight the whole text because you will likely select more than just the text (some parts of the code which you won't be able to see will be selected as well). DO NOT loooong press backspace to remove the text too as you will likely end up removing more than you intend to (ie. the codes you can't see).

 

WRONG:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium congue turpis, facilisis posuere sapien dapibus a. Donec tortor lacus, dapibus ut volutpat ut, mattis in lacus. Cras et nunc eget dolor dapibus posuere. Ut pretium nisi ac massa rutrum pulvinar. Ut vitae molestie ante. Mauris neque sapien, ultricies non tortor hendrerit, congue porttitor leo. Etiam at bibendum ante.

 

Instead, highlight the text from the second character to the second to last character before replacing the text. In the following example, I have left the first character "L" and the last character "." not highlighted.

 

CORRECT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium congue turpis, facilisis posuere sapien dapibus a. Donec tortor lacus, dapibus ut volutpat ut, mattis in lacus. Cras et nunc eget dolor dapibus posuere. Ut pretium nisi ac massa rutrum pulvinar. Ut vitae molestie ante. Mauris neque sapien, ultricies non tortor hendrerit, congue porttitor leo. Etiam at bibendum ante.

 

You can now proceed to paste or type your content in.

 

LHello! I'm here to show you how to replace dummy text..

 

Next, remove the unwanted first and last character with the backspace. DO NOT highlight the first and last character before pressing backspace. Be careful not to press the backspace more than you need to or some parts of the code will be deleted.

 

Hello! I'm here to show you how to replace dummy text.  

03. Changing images

(i) If you are able to click on the image (ie. it becomes highlighted when you click on it)

 

- Double click the photo or click on the add image button on the editor while the photo is still highlighted.

 

 

- Make sure to remember the width and/or height of the original image if the layout has a fixed width and/or height for the image.

 

 

- Change the url of the image to the one of your desired image. If you're getting your image from imgur, use the direct link. Make sure the url of the image ends with a valid image extension such as ".png", ".jpg" or ".gif". Somehow, the direct link of gifs on imgur ends with a ".gifv". You'll need to remove the "v", making it a ".gif" for it to work.

 

 

- Change the width and/or height of the image accordingly before clicking "OK".

#NOTE: If the layout is mobile friendly, the width and height of the original layout would likely be left blank. After changing the image, you should make sure to leave the width and height of the new image blank too so that it'll resize itself according to the size of the screen used.

 

 

(ii) If you are unable to click on the image (ie. image does not get highlighted when you click on it); background image

 

- You'll have to go into the source and change this image in the code. Look for instructions in the code on how to do this. They are grey and italics words encased in <!--this-->.

 

 

- Change only the following part that I've highlighted to the url of your new image. Do not remove the quotation marks surrounding the url.

 

 

 

04. Changing music

Soundcloud music players are embeded into the layouts as an iframe, but such iframes are not visible while in the editor.

 

In chapter view:

 

In editor view:

 

As you can see, in this case, the music player is seen as a white triangle between the image on the left and the texts on the right in the chapter view. However, in the editor view, the music player is no longer visible. You'll have to approximate the position of the music player and click on it, causing it to be highlighted.

 

 

- Double click the music player and a window