How to add a logo to your site?!

goofyunicorn · #1 04-03-2018, 01:22 PM

Quote:

Originally Posted by Dinocanid

It should go above {$menu} so it will show at the top, since it would show at the bottom if you placed it at the end. Since it looks like you're using the main theme, you would have to go into the "media" subfolder and edit this in style-city.css instead:

Code:

#image {
border-left:10px solid #fff;
border-right:10px solid #fff;
border-bottom:5px solid #fff;
background:url("citylights.jpg") left no-repeat #91C7F5;
height:150px;
}

Replace citylight.jpg with your logo. In the event that your theme doesn't have "#image" in the css, then you would edit the template.tpl.

Yeah, since it takes time to get things to look right depending on how complex it is.

How much would you be looking for or how could I make my own theme?

Dinocanid · #2 04-03-2018, 01:41 PM

Quote:

Originally Posted by goofyunicorn

How much would you be looking for or how could I make my own theme?

$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"

goofyunicorn · #3 04-03-2018, 01:44 PM

Quote:

Originally Posted by Dinocanid

$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?

Dinocanid · #4 04-03-2018, 01:51 PM

Quote:

Originally Posted by goofyunicorn

Oh wow great! So how do I customise it?

To customize it, you'll have to tamper with the css and template.tpl file. The template file is where most of it will be though. Here's an example of a template using the tutorial layout from W3schools:

HTML Code:

<body>

<div class="container">

<header>
   <h1>Site name or Logo</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

<article>
  <h1>{$document_title}</h1>
  <p>{$document_content}</p>
</article>

<footer>Copyright info goes here</footer>

</div>

</body>
</html>

goofyunicorn · #5 04-03-2018, 03:06 PM

Quote:

Originally Posted by Dinocanid

To customize it, you'll have to tamper with the css and template.tpl file. The template file is where most of it will be though. Here's an example of a template using the tutorial layout from W3schools:

HTML Code:

<body>

<div class="container">

<header>
   <h1>Site name or Logo</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

<article>
  <h1>{$document_title}</h1>
  <p>{$document_content}</p>
</article>

<footer>Copyright info goes here</footer>

</div>

</body>
</html>

Would you take credits or currency for Beau's Aviary for a theme or is that not enough? :)

Dinocanid · #6 04-03-2018, 03:49 PM

Quote:

Originally Posted by goofyunicorn

Would you take credits or currency for Beau's Aviary for a theme or is that not enough? :)

I could do it without charge honestly, since I'm not really confident enough in my CSS skills to commission themes regularly (I still need a lot of practice).

goofyunicorn · #7 04-03-2018, 05:06 PM

Quote:

Originally Posted by Dinocanid

I could do it without charge honestly, since I'm not really confident enough in my CSS skills to commission themes regularly (I still need a lot of practice).

Would you be able to have a go at one for me? I am going to do a picture for the back ground and then I will send it to you if you don't mind. :)

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

What's New?

What's Hot?

What's Popular?