Mysidia Adoptables Support Forum
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Mysidia Adoptables Support Forum (http://www.mysidiaadoptables.com/forum/index.php)
-   Questions and Supports (http://www.mysidiaadoptables.com/forum/forumdisplay.php?f=18)
-   -   How to add a logo to your site?! (http://www.mysidiaadoptables.com/forum/showthread.php?t=5563)

goofyunicorn 04-03-2018 12:31 PM
How to add a logo to your site?!
 
How do I add a logo to my site? :)

Dinocanid 04-03-2018 12:41 PM
Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
HTML Code:
<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 04-03-2018 12:55 PM
Quote:
Originally Posted by Dinocanid (Post 37067)
Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
HTML Code:
<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 04-03-2018 01:00 PM
Quote:
Originally Posted by goofyunicorn (Post 37068)
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:

goofyunicorn 04-03-2018 01:05 PM
Quote:
Originally Posted by Dinocanid (Post 37067)
Go to templates->your theme->template.tpl. In there is where you can place a logo for your site with regular html, like this:
HTML Code:
<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 04-03-2018 01:06 PM
Quote:
Originally Posted by Dinocanid (Post 37069)
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:
That's actually really lovely. Would you want to be paid if I were to ask for you to make me a theme?

Dinocanid 04-03-2018 01:17 PM
Quote:
Originally Posted by goofyunicorn (Post 37070)
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:

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.

Quote:
Originally Posted by goofyunicorn (Post 37071)
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 04-03-2018 01:22 PM
Quote:
Originally Posted by Dinocanid (Post 37072)
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?

goofyunicorn 04-03-2018 01:29 PM
Quote:
Originally Posted by Dinocanid (Post 37072)
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.

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

PHP Code:
#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 04-03-2018 01:41 PM
Quote:
Originally Posted by goofyunicorn (Post 37073)
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 04-03-2018 01:44 PM
Quote:
Originally Posted by Dinocanid (Post 37075)
$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 04-03-2018 01:51 PM
Quote:
Originally Posted by goofyunicorn (Post 37076)
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 04-03-2018 03:06 PM
Quote:
Originally Posted by Dinocanid (Post 37077)
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 04-03-2018 03:49 PM
Quote:
Originally Posted by goofyunicorn (Post 37078)
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 04-03-2018 05:06 PM
Quote:
Originally Posted by Dinocanid (Post 37079)
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 04-03-2018 05:45 PM
Quote:
Originally Posted by goofyunicorn (Post 37080)
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 04-04-2018 06:18 AM
Quote:
Originally Posted by Dinocanid (Post 37081)
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? :)

Dinocanid 04-04-2018 10:18 AM
Quote:
Originally Posted by goofyunicorn (Post 37082)
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?

goofyunicorn 04-04-2018 10:31 AM
Quote:
Originally Posted by Dinocanid (Post 37083)
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 04-04-2018 10:59 AM
Quote:
Originally Posted by goofyunicorn (Post 37084)
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 04-04-2018 11:01 AM
Quote:
Originally Posted by Dinocanid (Post 37085)
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 04-05-2018 01:03 PM
How's the theme coming along? :)

Dinocanid 04-05-2018 01:22 PM
Quote:
Originally Posted by goofyunicorn (Post 37103)
How's the theme coming along? :)
I just started today, lol. I'll send a screenshot in a minute.

goofyunicorn 04-05-2018 01:51 PM
Quote:
Originally Posted by Dinocanid (Post 37104)
I just started today, lol. I'll send a screenshot in a minute.
Ahh thank you so much <3

Dinocanid 04-05-2018 02:53 PM
This is what it looks like so far:
http://www.clipular.com/c/5389741105...MDnyP1yZ-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 04-05-2018 03:13 PM
Quote:
Originally Posted by Dinocanid (Post 37106)
This is what it looks like so far:
http://www.clipular.com/c/5389741105...MDnyP1yZ-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 04-05-2018 04:13 PM
Like this?:
http://www.clipular.com/c/6480797687...-ScNZAeRcu2Hdg

goofyunicorn 04-05-2018 04:15 PM
Quote:
Originally Posted by Dinocanid (Post 37109)
Nope like if you make all the text grey and then the box white?

Dinocanid 04-05-2018 04:20 PM
OH, I got it:
http://www.clipular.com/c/5748279204...DtWeVhQ8y_lEfY

goofyunicorn 04-05-2018 04:50 PM
Quote:
Originally Posted by Dinocanid (Post 37112)

: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 04-05-2018 05:44 PM
1 Attachment(s)
I added the font in this latest picture. I also tested different screen sizes with F12 and it appear to show up fine.

  Spoiler: 67% zoom (so I could fit the layout in one image) 

  Spoiler: 100% zoom (normal view) 


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 04-06-2018 06:37 AM
Quote:
Originally Posted by Dinocanid (Post 37114)
I added the font in this latest picture. I also tested different screen sizes with F12 and it appear to show up fine.

  Spoiler: 67% zoom (so I could fit the layout in one image) 

  Spoiler: 100% zoom (normal view) 


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.

  Spoiler: 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 04-06-2018 08:00 AM
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 04-06-2018 08:07 AM
Quote:
Originally Posted by Dinocanid (Post 37116)
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 04-06-2018 09:06 AM
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 04-06-2018 09:29 AM
Quote:
Originally Posted by Dinocanid (Post 37118)
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 04-06-2018 09:45 AM
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 04-06-2018 09:50 AM
Quote:
Originally Posted by Dinocanid (Post 37120)
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 04-06-2018 09:55 AM
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 04-06-2018 09:57 AM
Quote:
Originally Posted by Dinocanid (Post 37122)
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?


All times are GMT -5. The time now is 05:10 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.