How to insert banner in modern template?

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

How to insert banner in modern template?

Postby annaf » June 3rd, 2019, 10:22 am

Hi,

I'm trying to insert a banner but I'm not sure where in the code it goes? I've tried looking at other posts in the forum but those people are using different templates than mine. I just have the modern template - should I change it in order to put in a banner or is there somewhere in the code it belongs? Thanks.
User avatar
annaf
 
Posts: 18
Joined: August 12th, 2018, 1:31 pm

Re: How to insert banner in modern template?

Postby eishiya » June 3rd, 2019, 11:09 am

Where on the page do you want to put the banner? Do you want it to replace the comic title, do you want it above/beneath it, or somewhere else? Any template can have a banner added, it all just depends on where you want to put it.
Image
User avatar
eishiya
 
Posts: 9841
Joined: December 5th, 2009, 11:17 am

Re: How to insert banner in modern template?

Postby annaf » June 3rd, 2019, 12:16 pm

eishiya wrote:Where on the page do you want to put the banner? Do you want it to replace the comic title, do you want it above/beneath it, or somewhere else? Any template can have a banner added, it all just depends on where you want to put it.


Oh! I was hoping to have it replace the comic title at the very top.
User avatar
annaf
 
Posts: 18
Joined: August 12th, 2018, 1:31 pm

Re: How to insert banner in modern template?

Postby eishiya » June 3rd, 2019, 12:50 pm

In your Overall Layout, find this part:
Code: Select all
      <div id="overall_header">
      
         <a class="title" href="{SITE_URL_FULL}">
      
            {SITE_NAME}
            
         </a>

Replace {SITE_NAME} with the image code for your banner, e.g.
Code: Select all
<img src="your image URL here" alt="{SITE_NAME}">


You may need to do some additional styling to position the banner and to make sure it doesn't overlap the menu below.
To add custom styling, add a style element right above </head> in Overall Layout, e.g.
Code: Select all
<style>
/*custom CSS goes here*/
</style>
</head>


CSS to control the header height so that your banner doesn't overlap the menu or have too much empty space below it:
Code: Select all
#overall_header {
height: 94px;
}

Change the 94 to something more appropriate, such as the height of your banner.


CSS to change the distance of your banner from the side of the page:
Code: Select all
#overall_header .title {
margin-left: 26px;
}

Change the 26 to whatever you'd prefer. Set to 0 if you want your banner flush with the side of the page.
Image
User avatar
eishiya
 
Posts: 9841
Joined: December 5th, 2009, 11:17 am

Re: How to insert banner in modern template?

Postby annaf » June 3rd, 2019, 5:07 pm

eishiya wrote:In your Overall Layout, find this part:
Code: Select all
      <div id="overall_header">
      
         <a class="title" href="{SITE_URL_FULL}">
      
            {SITE_NAME}
            
         </a>

Replace {SITE_NAME} with the image code for your banner, e.g.
Code: Select all
<img src="your image URL here" alt="{SITE_NAME}">


You may need to do some additional styling to position the banner and to make sure it doesn't overlap the menu below.
To add custom styling, add a style element right above </head> in Overall Layout, e.g.
Code: Select all
<style>
/*custom CSS goes here*/
</style>
</head>


CSS to control the header height so that your banner doesn't overlap the menu or have too much empty space below it:
Code: Select all
#overall_header {
height: 94px;
}

Change the 94 to something more appropriate, such as the height of your banner.


CSS to change the distance of your banner from the side of the page:
Code: Select all
#overall_header .title {
margin-left: 26px;
}

Change the 26 to whatever you'd prefer. Set to 0 if you want your banner flush with the side of the page.


Thank you so much!!
User avatar
annaf
 
Posts: 18
Joined: August 12th, 2018, 1:31 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 10 guests