Coding Resource Megathread

WHAT IS THE SIZE OF A THREAD GRAPHIC, I GUESS IT USED TO BE 441 BY ANYTHING BUT NOT ANYMORE, ANYONE WHO COULD HELP OUT??

is there somewhere to test the BBC coding? i can’t find it

1 Like

i don’t think there is a separate thread for that, you can test all your codes on the html playground only

1 Like

You can test BB coding here if you’d like:

Do you still need help?

No, Thankyou

1 Like

my image upload is not working :frowning:

what parts of the w3school lessons would be most helpful in learning how to code threads? im not sure where to start,

1 Like

There aren’t really any dedicated self-taught resources for learning HTML from scratch specifically for Wattpad which can make the journey a little confusing but I can try point out the relevant sections for you. There are three pages on W3 in particular you should focus on.

At this stage you should use the the W3 in-browser editor. After you finish working on those pages (estimated reading time 15-20 minutes) I’ll point out a couple resources here on the forums which will allow you to apply those skills to Wattpad and get you started.

From W3 specifically start on this page here (HTML Elements), skip the first section called ‘HTML documents’ and begin with ‘HTML Headings’. This page should introduce you to some of the basic HTML elements, all of which except the button is relevant to coding on Wattpad.

The following page is a continuation and also called HTML Elements but goes more into the structure of the code. This too is all relevant except we can’t use <html> or <body> on wp.

The next page over is the last ‘mandatory’ page (HTML Attributes) which introduces you to some attributes. Learn the structure on how to use them but keep in mind that only some attributes will work on some HTML elements here on the forums. More on which ones will work on wp later. The ‘style’ attribute is where most of the coding in Wattpad is done so be sure to know that one well.

From here on the following pages just introduce you to different HTML elements but feel free to ignore them for now since not everything you learn from here on out will work on Wattpad.

Okay so now that you have an idea of what HTML elements and atrributes are you can jump onto Wikipad which documents and demonstrates how to use every single HTML Element, attribute and class available on these forums (admitedly alot of the elements/attributes/classes on there are unless but are documented anyway for the sake of completion). I wouldn’t bother going through every single post (what you learnt on W3 should be sufficient to get you started) but skim reading the descriptions of each element should be enough to give you an idea of what is available in your toolkit. The descriptions can admitedly be a bit stale and/unhelpful so you can alternatively just scroll through the demos starting from <a>. If you need to use any of them you can always come back so there’s no rush to learn everything right away. Estimated reading/scrolling time of 5 minutes for the descriptions.

What Wikipad won’t tell you is how to code using the ‘style’ attribute (which I did mention was where most of the coding on wp happens). Getting the style attribute to work here for the first time can be tricky since it is a little different from what you learnt on W3 and only works on <span> which can behave a little different from other elements. You should go to @astrophile to learn the styles. Keep in mind that all styles are available for use (and they’re all documented on the W3 website but Lumi will introduce you to them).

Sorry for the long post but it’s honestly quite a convoluted learning pathway. I’m sure sooner or later someone will post a dedicated HTML guide on here. Or maybe that someone will be you.

3 Likes

Hiiii, I made a thread that’s purely png but I can’t seem to figure out image mapping? I want the ‘examples’ and ‘forms’ to be clickable. Can anyone help me out? Thank you hehe.

1 Like

@astrophile & @SockMonster1 Incase y’all haven’t seen this ^ (see post above)

1 Like

There you go. I don’t know the exact dimensions of the buttons relative to the image so depending on the screen size it may shift around by a single pixel. It’s practically unnoticable but if those kinds of things bother you then I’d recommend coding the buttons in instead.

[center]

<span style="font-size:; display: inline-block; position: relative;">
  <img src="https://aws1.discourse-cdn.com/wattpad/original/3X/e/1/e1d969813cb09c41ef70ad663edff5f2e29c7fc3.png"/>
  <a href="*"><span style="font-size:; display: block; width: 38.2%; height: 14%; position: absolute; top: 54.5%; left: 52%"></span></a>
  <a href="*"><span style="font-size:; display: block; width: 38.2%; height: 14%; position: absolute; top: 72%; left: 52%"></span></a>
</span>

[/center]
1 Like

AHH! It works now, thank you so much!

1 Like

i looked through w3schools.com and i had a decent understanding of position:relative…but i’m not able to figure out position:absolute…may i get a bit of help?

Even though you already know position: relative; I’m going to explain it again but this time compare it with position: absolute;. Absolute will position itself relative to the most immediate parent element with a position of either relative, fixed or sticky.


I will try to demonstrate this. Consider the code below:

  1. The light blue square does NOT have a positioning of either relative, fixed or sticky

  2. The salmon square has a position of either relative, fixed or sticky

  3. The blue square has top: 10px; left: 10px;


<span style="... position: relative;"> <!-- Salmon -->
  <span style="... position: static;"> <!-- Light blue -->
    <span style="... top: 10px; left: 10px;"> <!-- Blue -->
    <span>
  </span>
</span>




Exhibit A:
We have not specificed the position therefore the top: 10px; and left: 10px; will get ignored.



Exhibit B:
Here the blue square has position: relative;. It has moved 10px away from the top and 10px away from the left of its original position (Exhibit A).



Exhibit C:
Here the blue square has position: absolute;. It has moved 10px from the top and 10px from the left relative to the salmon square. Essentially, it has ignored the light blue square despite being the most immediate parent element. It does this because of point 1:

The light blue square does NOT have a positioning of either relative, fixed or sticky

Whilst it does not ignore the salmon square because of point 2:

The salmon square has a position of either relative, fixed or sticky



Exhibit D:
The blue square has position: absolute; except the top, bottom, left and right have not been specified. In this case the element will remain in its original position.




I’m sure you can find a better explanation online but hopefully mine wasn’t too terrible.

3 Likes

@phvcyv I need to know how you got a gif for a pfp. It’s KILLING ME!

The gif pfp was something that you could do when the clubs first moved to here, the forums. Sadly you can no longer have a gif as a pfp T-T

2 Likes

:sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::sob:

1 Like

Hi! Can you expound on how to accurately get the top, left, right percentages to map an image?

1 Like

Sure thing but note that what I did wasn’t ‘accurate’ and you’ll see that in the screenshots below where the links are a pixel off. As I mentioned earlier this is dependent on the screen size (if you resize your window the mapping will shift back into place). To get it accurate you’ll need to know the exact size and coordinates of the buttons which requires the original project file.

I’m going to assume you know how the code works so I’m going to skip that part. I suspect what you’re having trouble with is the editor preview itself.

If you copy and paste the code into a new reply, you’ll notice that the content viewer will show the mapping as being distorted (see image below). I’ve coloured the links a transparent red.
Example thread as shown by the content viewer


Post the comment and it looks fairly normal:
Example thread when posted


That’s because the editor preview has injected some rogue css styles. If you use the element inspector (desktop browers only), you’ll notice this one particular line here:
Rogue css of the editor preview


You’ll want to disable this. Hover over it with your omuse and a checkbox should appear. Uncheck it.
Mouse hovering over rogue css


Your new display should look something like this:
Example thread as shown by the editor preview with rogue css disabled


This ‘fix’ isn’t permanent and you’ll have to repeat these steps every time you map links.
Hopefully that answered your question or were you looking for something else?


Code in question (from post 78)
[center]

<span style="font-size:; display: inline-block; position: relative;">
  <img src="https://aws1.discourse-cdn.com/wattpad/original/3X/e/1/e1d969813cb09c41ef70ad663edff5f2e29c7fc3.png"/>
  <a href="*"><span style="font-size:; display: block; width: 38.2%; height: 14%; position: absolute; top: 54.5%; left: 52%"></span></a>
  <a href="*"><span style="font-size:; display: block; width: 38.2%; height: 14%; position: absolute; top: 72%; left: 52%"></span></a>
</span>

[/center]
3 Likes