Tutorials Latest Topicshttps://archive.solero.me/forum/24-tutorials/Tutorials Latest TopicsenMaking a simple bootstrap website (self-made theme) + Tipshttps://archive.solero.me/topic/60-making-a-simple-bootstrap-website-self-made-theme-tips/ Hey Solero,

Today I decided to make a tutorial on how to make a bootstrap themed website, (title says it all), basically all you have to do is follow my tutorial... 

I posted this on Aureus, but hey why not post it here and expand it a little with more information and explanations. 

Basic Requirements: 

Okay, so now let's get started..

First off here's an HTML code that you have to put in every bootstrap themed website --  

<html lang="en">
  <head>
    <title>Home | Example</title>
    <font face="Segoe UI Light">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  <body>
    <br>
    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-center"> <!-- This is the style of your website, The one I put for SnowyCP is the tabs navigation bar.. The second website is like a bootstrap content hub, similar to CPPSHub, You can find all kinds of codes that could be used in your website.. --> 
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Play</a></li>
            <li role="presentation"><a href="#">Register</a></li>
            <li role="presentation"><a href="#">Team</a></li>
            <li role="presentation"><a href="#">Rules</a></li>
          </ul>
        </nav>

That is the basic navigation bar code and all the CSS that has to be in it. At the end of the tutorial I will put a zip for you all to download with all the assets, css and images. Obviously you can replace the images with whatever works best for you, But please do not touch any of the CSS as it will mess up your website. I will also consider releasing the Swizel site with a team page, rules page, faq page, play page and possible a commands page. All you have to do is just edit it to however you want it to be. If you use it for your site, please give me credit wherever you want it on the site, doesn't matter to me. You don't have to ask me for permission to use it, it's free for everyone just give credit. 

Now let's get to the jumbotron and the carousel slider,  

<div class="jumbotron">
        <h1>Welcome to Example!</h1>
        <p class="lead">A brand new fast, unique, secure and advanced AS2 CPPS out there!</p>
        <p><a class="btn btn-lg btn-info" href="#" role="button">Create an Account</a></p>
      </div>

<!-- That is the basic jumbotron code, the jumbotron looks pretty cool.. Anyways, for the buttons you can either choose from Dark Blue, Light Blue, Red (Danger), Orange (Warning), Green (Succes), and a basic "Link".. the code is the same (<a class="btn btn-lg btn-(name of the button), so if you want the white one like snowycp has on the jumbotron you can do <a class="btn btn-lg btn-secondary" href="#" role="button">Create an Account</a></p> which auto updates the button color. Dark blue is "primary", light blue is "info", green is "sucess", white (secondary), red (danger), orange, (warning) and link would be "link". -->

<!-- Now for the carousel /// -->

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- That would be put right after the ending of the navigation bar... Obviously in the src (You put the desired image you want), The image can contain the URL link or put the image in the files where the index.html so it can actually show up -->
Oh yeah and if you want the captioning  on the slides with the indicators you can simply put this code --- 

<!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('#');"></div>
                <div class="carousel-caption">
                    <h2>Caption her</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('#');"></div>
                <div class="carousel-caption">
                    <h2>Caption here!</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('#');"></div>
                <div class="carousel-caption">
                    <h2>Caption here!</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>
Here's a simple card code, you can put it on the team page or not.. I did that before, turned out okay but I'm going to try out a new different looking style possibly. 

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="#" alt="Card image cap"> <!-- image URL or file name in "src" -->
  <div class="card-block">
    <h4 class="card-title">Rank</h4>
    <p class="card-text">Player Description</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Also, I just realized you don't need a assets and css file for this, since I actually don't have one.. My mistake, it just auto updates it since you put the CSS coding in the stylesheets...

Now, Let's get onto the alerts  

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>


<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>


<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>


<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

<!-- Be aware that all of that does not go together or else all 4 of the alerts will pop up unless you want it to be like that... -->

alerts.png.80d19625a4d107011e470a8d262b7d43.png

That's what the alert design would look like on your website.. Now obviously, you can change the words and here's how you make a bigger and wider expanded one.  

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

So that would basically look like this - 

pp.png.1d119c7846cf70d3b39a8afa3dd6d8a8.png

If you want you can also add progress bars on your website, there are many different styles you can put.  

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- You can add all 5 of them if you'd like, whatever you want.. -->

Here's what one of them would look like -- 

progress.png.641ffd35c4ae6167dfcf7ed7d3550b8e.png

Look's like a real progress bar, right?

Now, let's move onto the accordion which is basically the FAQ system --  

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Now, when that is done. It would look like this - 

faq.png.251335c96da4f44ff4081ba6fb12b02e.png

When you open one of them, it would look like this - 

openfaq.png.5bc1275b023b47ca548c73de933586af.png

You can obviously open and close it by click the title or if you want to open a new one and close the current one just open the #2 or second once then the first one will close. 

Now, Let's move onto some play page embedding, here's a simple code to embed your CPPS play page into your play page. 

<center><iframe name="loadPenguins" src="http://127.0.0.1/play/load.swf" width='1050' height='700' frameborder=0></iframe></center>

<!-- Change the src ip link to your VPS ip that way it can work unless you're using localhost, therefore keep it like that -->

Also, obviously you have to change the src link to your VPS IP or the localhost link for it to appear on the page.  By the way, If you do NOT want the bootstrap default nav bar, then you can simply code your own CSS navigation bar. So basically, Once you have coded the CSS nav bar don't remove any of the links in the <head></head> just simply attach your CSS file, so like main.css or style.css it would be <link rel="stylesheet" href="style.css">

This tutorial is now way too long, I'll be back later making more programming/cpps tutorials. If you need help feel free to contact me. You can soon see a live demo of the finished site at http://loungecp.us/hub/ and that is also a CPPSHub made by myself and Dev which will also soon be up after some issue fixes, etc. Anyway, See ya! 
~ Zermias

]]>60Tue, 13 Jun 2017 04:10:13 +0000