Home

Welcome to the wiki!

This page is meant for people who don't have experience with HTML code, so i'm here to help.

The first thing you need to do when you've downloaded the template is edit this line:

<title>A Free Minecraft Template By Rick Klaasboer</title>

This is the text that will be shown on the browser tab. After you've done this, you'll have to edit the header.

<header id="head" class="parallax">
  <h1>A Minecraft Server</h1>
  <h3>play.yourdomain.com</h3>
</header>

This will be the text on the big banner, this can be whatever you want. If you want to edit the image, open up the main.css file, this file is located in the css folder. Now, to edit the image find this line:

#head {
  background-image: url("https://i.imgur.com/9GkIEjN.png");
  margin: 0;
  padding: 222px 0px 222px 0px;
  text-align: center;
  color: white;
}

Change the background-image: url("https://i.imgur.com/9GkIEjN.png"); line, you can just replace the imgur link with another link. If you want to use a image that is stored locally, place the image in the img folder, and change the css line to background-image: url("./img/YOURIMAGE.png"); Obviously, replace YOURIMAGE.PNG with the name of the image.

After you've done this, we can go and edit the features section. This one is a little more complicated since it uses Font Awesome icons. As an example, we're going to edit this feature.

<div class="col">
  <i class="fab fa-cloudscale feature"></i>
  <h2>We're fast, like sonic</h2>
  <p>Our servers are so blazing fast, even Sonic can't keep up, amazing, right?!</p>
</div>

To edit the Icon only change the fab fa-cloudscale part of the class, for example if you wanted it to be a bullhorn the line would look like <i class="fas fa-bullhorn feature"></i> this. Always keep feature in the class, this will define CSS code, without this, it will look weird.

You can find the font awesome icon list here.

Next, we're going to edit the image on the first banner. To start editing this, first find the following lines in the main.css file.

#banner {
  background-image: url("https://i.imgur.com/XL2PAd3.png");
  padding: 75px 0px 75px 0px;
  text-align: center;
} 

This will work the same way as the header. Just replace the imgur link with your own image and the image will be changed. The other banners will work the same way, just find these lines:

#banner2 {
  background-image: url("https://i.imgur.com/8P27W9N.png");
  padding: 75px 0px 75px 0px;
  text-align: center;
}

#banner3 {
  background-image: url("https://i.imgur.com/MljFIMA.png");
  padding: 75px 0px 75px 0px;
  text-align: center;
}

#banner2 will be the second banner and #banner3 will be the third one.

Now, we'll be editing the Gamemodes section.

<div class="row fixed-width">
  <div class="col-md mode">
    <h2>SURVIVAL</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu elementum justo. Morbi in venenatis dui. Mauris quis efficitur orci, ut venenatis massa. Pellentesque gravida ante sit amet condimentum tristique. Suspendisse at gravida nunc, mattis sagittis velit. Pellentesque molestie mauris risus, et elementum metus mattis sit amet. Aliquam id ex ac augue tempor convallis. Nunc id consequat nibh. Suspendisse rhoncus nulla at nisl egestas vulputate vel vitae ex. In est nibh, tempus vitae ipsum vel, eleifend dictum diam. Ut dapibus massa sed turpis dictum pretium. Mauris tempus sapien sit amet turpis sodales, sit amet sollicitudin augue tincidunt. Donec ullamcorper suscipit laoreet.</p>
</div>
  <div class="col-md img">
    <img class="res-img" src="https://via.placeholder.com/1920x1080">
  </div>
</div>

If you want to change the image, which you'll probably want to do, change the src url in <img class="res-img" src="https://via.placeholder.com/1920x1080"> to your own image. for locally stored images use src="img/YOURIMAGE.JPG"

---

This wiki will be expanded soon.