View Single Post
  #11  
Old 04-03-2018, 01:44 PM
goofyunicorn's Avatar
goofyunicorn goofyunicorn is offline
Kelpie
 
Join Date: Feb 2018
Location: Unicorn Land
Posts: 101
Gender: Female
Credits: 12,695
goofyunicorn is on a distinguished road
Default

Quote:
Originally Posted by Dinocanid View Post
$10 maybe? You could also make your own theme like this:
  • Create a new subfolder inside "templates" and name it whatever you want (I don't recommend names with spaces)
  • Create 3 new files: header.tpl, style.css, template.tpl. Inside header.tpl, paste this and save it:
    HTML Code:
    <html>
    <head>
    {$header->loadFavicon("{$home}favicon.ico")}
    {$header->loadStyle("{$home}{$temp}{$theme}/media/style.css")}
    {$header->loadStyle("{$home}{$css}/menu.css")}
    {$header->loadAdditionalStyle()}
    <!--[if lte IE 6]>
    {$header->loadStyle("{$home}{$css}/media/dropdown_ie.css")}
    <![endif]-->
    </head>
    For style.css, you could start off by copying the code from style-city.css and adjusting stuff how you like.
  • Inside template.tpl is where most of the layout goes. You can arrange where you want things to go with HTML in here. {$document_title} shows the title of whatever page you're on, {$document_content} shows the page content, {$menu} shows the dropdown menu, etc.
    It is also possible to add your own menu from scratch instead of using {$menu} (which I personally find easier). Here is an example of one I made with Bootstrap:
    HTML Code:
    <nav class="nav nav-fill" style="background-color: #0f0f0f; width:900px; font-family:'Bubblegum Sans', cursive; font-size:100%;">
      {if $logged_in}  
      <a class="nav-item nav-link active" href="/exploring" style="font-size:16px;"><i class="far fa-compass"></i> Explore</a>
      <a class="nav-item nav-link active" href="/tasklist" style="font-size:16px;"><i class="fas fa-paw"></i> Quests</a>
      {/if}
      <a class="nav-item nav-link active" href="/wiki" style="font-size:16px;"><i class="fas fa-book"></i> Wiki</a>
      <a class="nav-item nav-link active" href="http://wild-souls-game.proboards.com/" style="font-size:16px;"><i class="fas fa-users"></i> Forum</a>
    </nav>
  • Go to the adminCP and click "add new theme". Only fill in the first 2 fields (folder name must be the same as the one you created), and click the checkbox before submitting. Now you should be able to try it out at "yoursite.com/changestyle"
Oh wow great! So how do I customise it?
__________________

Check out my Adoptable's Site! Art by the wonderful Eyesauce.
Reply With Quote