<div class="tutorial-block">

  <h2>Uploading Your User Page Logo via FTP</h2>
  <p>
    This tutorial shows you how to upload your user page logo to your web space using
    <strong>FileZilla</strong> or your web host’s <strong>cPanel</strong>.  
    Your logo file will be uploaded into the <code>HTDOCS</code> folder so it can be used on your site.
  </p>

  <hr>

  <h3>Dummy FTP Users (Example Setup)</h3>
  <p>Use these example FTP users for practice in tutorials or screenshots:</p>

  <ul>
    <li><strong>Master FTP hostname:</strong> <code>ftp.fasthosts.co.uk</code></li>
    <li><strong>Master FTP username:</strong> <code>lowmaintenancesweetheart.online</code></li>
  </ul>

  <p><strong>Dummy FTP users:</strong></p>
  <ul>
    <li><code>bpdnarc</code> – practice user for logo uploads</li>
    <li><code>thebiglad</code> – practice user for images and assets</li>
    <li><code>wiki-iESP54</code> – practice user for wiki-related files</li>
    <li><code>wikimedia</code> – practice user for shared media uploads</li>
  </ul>

  <p>
    In a real hosting account, you would create these users in your control panel and assign each one
    a password and a home directory (usually <code>/htdocs/</code> or <code>/public_html/</code>).
  </p>

  <hr>

  <h3>Method 1: Uploading Your Logo with FileZilla</h3>

  <h4>Step 1 – Install FileZilla</h4>
  <ol>
    <li><strong>Download:</strong> Go to <a href="https://filezilla-project.org" target="_blank">filezilla-project.org</a>.</li>
    <li><strong>Install:</strong> Download the <em>FileZilla Client</em> and install it on your computer.</li>
  </ol>

  <h4>Step 2 – Create a New FTP Connection</h4>
  <ol>
    <li><strong>Open FileZilla.</strong></li>
    <li><strong>Open Site Manager:</strong> Click <em>File &gt; Site Manager…</em>.</li>
    <li><strong>New Site:</strong> Click <em>New Site</em> and name it <em>My User Page Logo</em>.</li>
    <li><strong>Enter connection details:</strong></li>
  </ol>

  <ul>
    <li><strong>Host:</strong> <code>ftp.fasthosts.co.uk</code></li>
    <li><strong>Port:</strong> <code>21</code></li>
    <li><strong>Protocol:</strong> <em>FTP – File Transfer Protocol</em></li>
    <li><strong>Encryption:</strong> <em>Require explicit FTP over TLS</em> (or <em>Only use plain FTP</em> if required by your host)</li>
    <li><strong>Logon Type:</strong> <em>Normal</em></li>
    <li><strong>User:</strong> e.g. <code>bpdnarc</code> (or any of your FTP users)</li>
    <li><strong>Password:</strong> the FTP password you set for that user</li>
  </ul>

  <p>Click <strong>Connect</strong>. If prompted about a certificate, accept it if the hostname matches.</p>

  <h4>Step 3 – Navigate to the HTDOCS Folder</h4>
  <ol>
    <li>In the <strong>right-hand panel</strong> (Remote site), browse to <code>/htdocs/</code> (or <code>/HTDOCS</code>).</li>
    <li>This folder is your website’s root. Files here are visible on your site.</li>
  </ol>

  <h4>Step 4 – Upload Your Logo</h4>
  <ol>
    <li>In the <strong>left-hand panel</strong> (Local site), find your logo file (e.g. <code>user-logo.png</code>).</li>
    <li>Drag the logo file from the left panel into the <code>HTDOCS</code> folder in the right panel.</li>
    <li>Wait for the transfer to complete (check the status at the bottom of FileZilla).</li>
  </ol>

  <h4>Step 5 – Verify the Upload</h4>
  <ol>
    <li>Open your browser and visit your site, e.g. <code>https://yourdomain.example/user-logo.png</code>.</li>
    <li>If the image loads, your logo is successfully uploaded and ready to be used on your user page.</li>
  </ol>

  <hr>

  <h3>Method 2: Uploading Your Logo via cPanel File Manager</h3>

  <h4>Step 1 – Log In to cPanel</h4>
  <ol>
    <li>Open your browser and go to your host’s cPanel URL (e.g. <code>https://yourhost.example/cpanel</code>).</li>
    <li>Log in with your cPanel username and password.</li>
  </ol>

  <h4>Step 2 – Open File Manager</h4>
  <ol>
    <li>In cPanel, find the <strong>Files</strong> section.</li>
    <li>Click <strong>File Manager</strong>.</li>
  </ol>

  <h4>Step 3 – Navigate to HTDOCS</h4>
  <ol>
    <li>In File Manager, open the folder named <code>HTDOCS</code> (or <code>public_html</code>, depending on your host).</li>
    <li>This is the folder where your website files live.</li>
  </ol>

  <h4>Step 4 – Upload Your Logo</h4>
  <ol>
    <li>Click the <strong>Upload</strong> button in File Manager.</li>
    <li>Choose your logo file (e.g. <code>user-logo.png</code>) from your computer.</li>
    <li>Wait for the upload to finish, then return to the <code>HTDOCS</code> folder view.</li>
    <li>Confirm that <code>user-logo.png</code> appears in the file list.</li>
  </ol>

  <h4>Step 5 – Test Your Logo</h4>
  <ol>
    <li>Visit <code>https://yourdomain.example/user-logo.png</code> in your browser.</li>
    <li>If the image displays, you can now reference it in your user page HTML or wiki markup.</li>
  </ol>

  <hr>

  <h3>Quick Reference: Connection Settings</h3>
  <ul>
    <li><strong>Host:</strong> <code>ftp.fasthosts.co.uk</code></li>
    <li><strong>Port:</strong> <code>21</code> (FTP/FTPS) or <code>22</code> (SFTP, if supported)</li>
    <li><strong>Username:</strong> one of your FTP users (e.g. <code>bpdnarc</code>, <code>thebiglad</code>, <code>wiki-iESP54</code>, <code>wikimedia</code>)</li>
    <li><strong>Password:</strong> the password you set for that FTP user</li>
    <li><strong>Remote folder:</strong> <code>/htdocs/</code> or <code>/HTDOCS</code></li>
  </ul>

</div>