Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Questions and Supports
Reload this Page How to add a logo to your site?!
vBCommerceProjects FAQ Members List Calendar Search Today's Posts Mark Forums Read

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 04-03-2018, 01:05 PM
goofyunicorn's Avatar
goofyunicorn goofyunicorn is offline
Kelpie
  
Join Date: Feb 2018
Location: Unicorn Land
Posts: 101
Gender: Female
Credits: 17,703
goofyunicorn is on a distinguished road
Default
Quote:
Originally Posted by Dinocanid View Post
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?
__________________

Check out my Adoptable's Site! Art by the wonderful Eyesauce.
Reply With Quote
  #2  
Old 04-03-2018, 01:17 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 90,317
Dinocanid is on a distinguished road
Default
Quote:
Originally Posted by goofyunicorn View Post
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 View Post
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.
__________________
Reply With Quote
  #3  
Old 04-03-2018, 01:22 PM
goofyunicorn's Avatar
goofyunicorn goofyunicorn is offline
Kelpie
  
Join Date: Feb 2018
Location: Unicorn Land
Posts: 101
Gender: Female
Credits: 17,703
goofyunicorn is on a distinguished road
Default
Quote:
Originally Posted by Dinocanid View Post
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?
__________________

Check out my Adoptable's Site! Art by the wonderful Eyesauce.
Reply With Quote
  #4  
Old 04-03-2018, 01:41 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 90,317
Dinocanid is on a distinguished road
Default
Quote:
Originally Posted by goofyunicorn View Post
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"
__________________
Reply With Quote
  #5  
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: 17,703
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
  #6  
Old 04-03-2018, 01:51 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 90,317
Dinocanid is on a distinguished road
Default
Quote:
Originally Posted by goofyunicorn View Post
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>
__________________
Reply With Quote
  #7  
Old 04-03-2018, 03:06 PM
goofyunicorn's Avatar
goofyunicorn goofyunicorn is offline
Kelpie
  
Join Date: Feb 2018
Location: Unicorn Land
Posts: 101
Gender: Female
Credits: 17,703
goofyunicorn is on a distinguished road
Default
Quote:
Originally Posted by Dinocanid View Post
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? :)
__________________

Check out my Adoptable's Site! Art by the wonderful Eyesauce.
Reply With Quote
  #8  
Old 04-03-2018, 01:29 PM
goofyunicorn's Avatar
goofyunicorn goofyunicorn is offline
Kelpie
  
Join Date: Feb 2018
Location: Unicorn Land
Posts: 101
Gender: Female
Credits: 17,703
goofyunicorn is on a distinguished road
Default
Quote:
Originally Posted by Dinocanid View Post
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;
} 
__________________

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

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Hybrid Mode Hybrid Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 08:53 AM.

Currently Active Users: 3407 (0 members and 3407 guests)
Threads: 4,081, Posts: 32,032, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?
Mysidia Adoptables - Archive - Privacy Statement - Terms of Service - Top

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636