How do I add a logo to my site?
<a href='/index'><img src="IMAGE_URL"></a>
Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
Depending on what theme you use, you might have to change it through the css instead.HTML:<a href='/index'><img src="IMAGE_URL"></a>
I've made themes from scratch before, but I wouldn't say I'm very good at it :SThank you!
Also, while your here, do you have any experience of making themes from scratch?!
Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
Depending on what theme you use, you might have to change it through the css instead.HTML:<a href='/index'><img src="IMAGE_URL"></a>
I've made themes from scratch before, but I wouldn't say I'm very good at it :S
I would consider this one to be my best yet, but it's still pretty simple:
Spoiler: screenshot
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:What line should I place it on for the Main theme? Just at the end?
#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;
}
Yeah, since it takes time to get things to look right depending on how complex it is.That's actually really lovely. Would you want to be paid if I were to ask for you to make me a theme?
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:
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.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; }
Yeah, since it takes time to get things to look right depending on how complex it is.
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:
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.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; }
Yeah, since it takes time to get things to look right depending on how complex it is.
#image {
border-left:10px solid #fff;
border-right:10px solid #fff;
border-bottom:5px solid #fff;
background:url("Logo.png") left no-repeat #91C7F5;
height:150px;
}
$10 maybe? You could also make your own theme like this:How much would you be looking for or how could I make my own theme?
<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>
<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>
$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:
For style.css, you could start off by copying the code from style-city.css and adjusting stuff how you like.HTML:<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>
- 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:<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"
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:Oh wow great! So how do I customise it?
<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>
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:<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>
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 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).
Sure! I would need an example or something of how you want the theme to look though.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.
Sure! I would need an example or something of how you want the theme to look though.
Here is the background.
I was hoping that it would be white with this as the main background picture with the footer and header being just plain white. If possible, could the titles and headers be the colour of the blue feathers and then the rest of the text the colour of the grey feather?
Sure! How would you want it to look layout-wise though?
I might have it ready for you by the weekend, but I'll send progress screenshots as I go along. Most of the time will be making sure everything scales well on smaller/mobile devices, since that's the most tricky.I would like the fonts to be Cutie Patootie Skinny is that is okay? The text being around 23 px. The Menu at the top and then the User Links etc at the side like normal. Buttons plain white with maybe an icon on the left of each button which is one of the feathers off the background, just very small. User friendly interface and preferably mobile friendly if possible. If you need more info let me know May I ask how long it will take for you to make this? No rush, it is just out of interest.