How to add a logo to your site?!

[goofyunicorn]

How do I add a logo to my site? :)

[Dinocanid]

Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
<a href='/index'><img src="IMAGE_URL"></a>
Depending on what theme you use, you might have to change it through the css instead.

[goofyunicorn]

Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
<a href='/index'><img src="IMAGE_URL"></a>
Depending on what theme you use, you might have to change it through the css instead.


Thank you!

Also, while your here, do you have any experience of making themes from scratch?!

[Dinocanid]

Thank you!

Also, while your here, do you have any experience of making themes from scratch?!
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:
http://www.clipular.com/c/5210489169379328.png?k=hzp7AElhoGKiFTekpRcMahPtSYk

[goofyunicorn]

Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
<a href='/index'><img src="IMAGE_URL"></a>
Depending on what theme you use, you might have to change it through the css instead.

What line should I place it on for the Main theme? Just at the end?

[goofyunicorn]

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:
http://www.clipular.com/c/5210489169379328.png?k=hzp7AElhoGKiFTekpRcMahPtSYk

That's actually really lovely. Would you want to be paid if I were to ask for you to make me a theme?

[Dinocanid]

What line should I place it on for the Main theme? Just at the end?
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:

#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.

That's actually really lovely. Would you want to be paid if I were to ask for you to make me a theme?
Yeah, since it takes time to get things to look right depending on how complex it is.

[goofyunicorn]

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:

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

[goofyunicorn]

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:

#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.


It isn't displaying on the website?
I put this in:

#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;
}

[Dinocanid]

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>
<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:
<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]

$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>
<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:
<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]

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 (https://www.w3schools.com/html/html_layout.asp):

<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]

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 (https://www.w3schools.com/html/html_layout.asp):

<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]

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]

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. :)

[Dinocanid]

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.

[goofyunicorn]

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? :)

http://preview.ibb.co/kdg27H/Website_Background.png (http://ibb.co/m2Zdgc)

[Dinocanid]

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? :)

http://preview.ibb.co/kdg27H/Website_Background.png (http://ibb.co/m2Zdgc)

Sure! How would you want it to look layout-wise though?

[goofyunicorn]

Sure! How would you want it to look layout-wise though?

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. :)

[Dinocanid]

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. :)
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.

[goofyunicorn]

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.

Thank you so much <3

[goofyunicorn]

How's the theme coming along? :)

[Dinocanid]

How's the theme coming along? :)

I just started today, lol. I'll send a screenshot in a minute.

[goofyunicorn]

I just started today, lol. I'll send a screenshot in a minute.

Ahh thank you so much <3

[Dinocanid]

This is what it looks like so far:
http://www.clipular.com/c/5389741105872896.png?k=xSqXQk2pI2R_0MDnyP1yZ-rhny4
(Testing it on my abandoned "adopttes" site, which is why there are extra links and stuff)

What color did you want the main box to be and stuff? I couldn't make it plain white, since you would have a very hard time reading the text on a white background.

[goofyunicorn]

This is what it looks like so far:
http://www.clipular.com/c/5389741105872896.png?k=xSqXQk2pI2R_0MDnyP1yZ-rhny4
(Testing it on my abandoned "adopttes" site, which is why there are extra links and stuff)

What color did you want the main box to be and stuff? I couldn't make it plain white, since you would have a very hard time reading the text on a white background.

It is looking so good! How about if you make all the colours grey on the text and then leave it plain white?

[Dinocanid]

Like this?:
http://www.clipular.com/c/6480797687873536.png?k=SfI2GxQ-1Vz6O-ScNZAeRcu2Hdg

[goofyunicorn]

Like this?:
http://www.clipular.com/c/6480797687873536.png?k=SfI2GxQ-1Vz6O-ScNZAeRcu2Hdg

Nope like if you make all the text grey and then the box white?

[Dinocanid]

OH, I got it:
http://www.clipular.com/c/5748279204380672.png?k=PmUVyxfgqtV94DtWeVhQ8y_lEfY

[goofyunicorn]

OH, I got it:
http://www.clipular.com/c/5748279204380672.png?k=PmUVyxfgqtV94DtWeVhQ8y_lEfY


:ohnoes: :ohnoes: :ohnoes: :ohnoes: :ohnoes: :ohnoes:

I LOVE IT THANK YOU SO MUCH

It will look so cute with the Cutie Patootie font too <3

[Dinocanid]

I added the font in this latest picture. I also tested different screen sizes with F12 and it appear to show up fine.

http://www.clipular.com/c/4896902332809216.png?k=ueb37uRQcbRE4wPdy9K22C7qUv0
http://www.clipular.com/c/6072002700640256.png?k=6JnvnvxJ5PUo8i90Rj0u8ppnnjg

EDIT: Can't send files through PM, I forgot. I attached it in this post.
To install it, just upload the zip file to your templates folder, click on it, then select "extract". You should get a new folder called "aviary" with all of the files inside.

To install it, go to the adminCP and create a new theme. Type "aviary" into the only first two fields and check the checkbox before submitting.

[goofyunicorn]

I added the font in this latest picture. I also tested different screen sizes with F12 and it appear to show up fine.

http://www.clipular.com/c/4896902332809216.png?k=ueb37uRQcbRE4wPdy9K22C7qUv0
http://www.clipular.com/c/6072002700640256.png?k=6JnvnvxJ5PUo8i90Rj0u8ppnnjg

EDIT: Can't send files through PM, I forgot. I attached it in this post.
To install it, just upload the zip file to your templates folder, click on it, then select "extract". You should get a new folder called "aviary" with all of the files inside.

To install it, go to the adminCP and create a new theme. Type "aviary" into the only first two fields and check the checkbox before submitting.

OH. MY. GOSH. I LOVE IT!

One problem.

I made it the default theme and the deleted the Change Style link in ACP > Links > Edit Links and now I am having this error.

Fatal error: Uncaught exception 'SmartyException' with message 'Unable to load template file 'template.tpl'' in /home/beausavi/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php:127 Stack trace: #0 /home/beausavi/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php(374): Smarty_Internal_TemplateBase->fetch('template.tpl', NULL, NULL, NULL, true) #1 /home/beausavi/public_html/classes/class_template.php(135): Smarty_Internal_TemplateBase->display('template.tpl') #2 /home/beausavi/public_html/classes/class_view.php(280): Template->output() #3 /home/beausavi/public_html/classes/class_frontcontroller.php(102): View->render() #4 /home/beausavi/public_html/index.php(74): FrontController->render() #5 /home/beausavi/public_html/index.php(78): IndexController::main() #6 {main} thrown in /home/beausavi/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php on line 127

[Dinocanid]

Did the error show up right after you installed it or after you made it the main theme?
Does the error go away if you go to "yoursite.com/changestyle/index/main"?

[goofyunicorn]

Did the error show up right after you installed it or after you made it the main theme?
Does the error go away if you go to "yoursite.com/changestyle/index/main"?

Nope. I added the link back for changing themes on a Testing Account but the the error appeared after I logged out. Now I can't log into the ACP or BA. I delete all themes except for main and it still doesn't work. I have set everyone's themes to main.

[Dinocanid]

You can reset the main theme by going into phpMyAdmin and going to the adopts_settings table (not sure of the exact name...the table where the main theme is set)
You may have to click on the structure tab and check "primary" for one of the rows before you can edit it. I'll get on the computer in a minute so I can try it out. It worked fine on my test site, so I don't see why it wouldn't work :/
To be sure, the "aviary" folder is inside the templates folder right? If you open it up, are all 3 files there? Check that none of the files are empty too. I had a weird problem with another theme where all the code was missing after I uploaded it.

[goofyunicorn]

You can reset the main theme by going into phpMyAdmin and going to the adopts_settings table (not sure of the exact name...the table where the main theme is set)
You may have to click on the structure tab and check "primary" for one of the rows before you can edit it. I'll get on the computer in a minute so I can try it out. It worked fine on my test site, so I don't see why it wouldn't work :/
To be sure, the "aviary" folder is inside the templates folder right? If you open it up, are all 3 files there? Check that none of the files are empty too. I had a weird problem with another theme where all the code was missing after I uploaded it.

It's all good now. I tried to change the default theme to aviary again but it comes up with an error.

[Dinocanid]

You should try switching themes on a test account with changestyle first before you set it as the default, because otherwise you have to reset it manually again if it's an error.
Are all the files there (and not empty) and in the right place? (public_html/templates/aviary)

[goofyunicorn]

You should try switching themes on a test account with changestyle first before you set it as the default, because otherwise you have to reset it manually again if it's an error.
Are all the files there (and not empty) and in the right place? (public_html/templates/aviary)

All files are there. I tried on a test account but it still doesn't do the default thing. It's okay though. Do you have any experience doing ACP themes too? :) Last of all the only links working are the User CP ones. All the menu ones aren't for some reason.

[Dinocanid]

It works the same way, you just copy-paste the code from the files and use that inside the fields that are on the add new theme page. (Copy the code from header.tpl, paste it in the header field. Copy the css, paste that in the css field, etc.)
The only difference is that you don't check the checkbox and the bottom.

[goofyunicorn]

It works the same way, you just copy-paste the code from the files and use that inside the fields that are on the add new theme page. (Copy the code from header.tpl, paste it in the header field. Copy the css, paste that in the css field, etc.)
The only difference is that you don't check the checkbox and the bottom.

For the ACP?

[goofyunicorn]

The menu links aren't working and it seems that the buttons on the community tab are missing and just the same as the Explore tab. On the the UCP is working on the left. :/

[Dinocanid]

Yeah, unless you mean the theme for the ACP itself?
The menu doesn't match the links because it's using html instead. To change the links, just go into the template.tpl and edit them. I had to make a new menu because the default one doesn't really scale well, and it was hard to style.

[goofyunicorn]

Yeah, unless you mean the theme for the ACP itself?
The menu doesn't match the links because it's using html instead. To change the links, just go into the template.tpl and edit them. I had to make a new menu because the default one doesn't really scale well, and it was hard to style.

I meant for the ACP itself and how do add links to the pages on the dropdown menus from template.tpl?

[Dinocanid]

You would use html, like this:
<a class="dropdown-item" href="URL">SomeText</a>

Each dropdown is seperated into a list. For example, this is the "adoptables" dropdown:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Adoptables</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adoption Center</a>
<a class="dropdown-item" href="#">Pound</a>
<a class="dropdown-item" href="#">My Adopts</a>
<a class="dropdown-item" href="#">Promo Codes</a>
</div>
</li>
The URLs are set to "#", which doesn't lead anywhere. Replace it with whatever URL is needed to reach the page, like this for example:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Adoptables</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="adopt">Adoption Center</a>
<a class="dropdown-item" href="pound">Pound</a>
<a class="dropdown-item" href="myadopts">My Adopts</a>
<a class="dropdown-item" href="promo">Promo Codes</a>
</div>
</li>
To reach a page made with the ACP, you would make a link like this:
<a class="dropdown-item" href="pages/view/pagename">MyPage</a>

For an ACP theme, I did make myself one in the past. It was basically just a mobile-friendly recolor though:
http://www.clipular.com/c/5853047818027008.png?k=ns2d12CTr-9GQxmZkgXg11MC7Co
(I have less links in the sidebar because my site doesn't use a lot of them)

[goofyunicorn]

You would use html, like this:
<a class="dropdown-item" href="URL">SomeText</a>

Each dropdown is seperated into a list. For example, this is the "adoptables" dropdown:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Adoptables</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adoption Center</a>
<a class="dropdown-item" href="#">Pound</a>
<a class="dropdown-item" href="#">My Adopts</a>
<a class="dropdown-item" href="#">Promo Codes</a>
</div>
</li>
The URLs are set to "#", which doesn't lead anywhere. Replace it with whatever URL is needed to reach the page, like this for example:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Adoptables</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="adopt">Adoption Center</a>
<a class="dropdown-item" href="pound">Pound</a>
<a class="dropdown-item" href="myadopts">My Adopts</a>
<a class="dropdown-item" href="promo">Promo Codes</a>
</div>
</li>
To reach a page made with the ACP, you would make a link like this:
<a class="dropdown-item" href="pages/view/pagename">MyPage</a>

For an ACP theme, I did make myself one in the past. It was basically just a mobile-friendly recolor though:
http://www.clipular.com/c/5853047818027008.png?k=ns2d12CTr-9GQxmZkgXg11MC7Co
(I have less links in the sidebar because my site doesn't use a lot of them)

Would you be able to make an ACP theme too if you have the time? :) I can pay you with credits or adoptables on BA if you require payment. Thank you so much for the theme, I love it.

[Dinocanid]

I'll be busy today, but I can start on it. What would it look like? Would it be similar to the new theme?

[goofyunicorn]

I'll be busy today, but I can start on it. What would it look like? Would it be similar to the new theme?

Yeah I guess just an ACP version of the theme.

How do I edit non "custom" pages? :)

[Dinocanid]

To edit a page that wasn't made in the ACP, you have to edit it's view file, found in public_html/view/somescriptview.php.

[goofyunicorn]

To edit a page that wasn't made in the ACP, you have to edit it's view file, found in public_html/view/somescriptview.php.

Perfect. Thank you so much for doing the ACP theme too :)