CSS for background banner?

http://bleachexecution.forumotion.com/

How do I get my banner to be like that? It fills the whole width of the forum and even if you right click on it, you are unable to see the image. I imagine that it has something to do with backgrounds as opposed to banners so I thought this would be the most appropriate section.

Hello @Aphery,

You're correct, it's a background image. Before I can give you an accurate answer I would need to link of your forum to provide the proper codes.

Try using this CSS rule. Add it in Display > Colors > CSS stylesheet

Code:

#pun-head {
  background:url(IMAGE_URL);
  height:200px;
}

Replace IMAGE_URL by the URL of your image, and adjust the 200px of height to change the height of the header.

That got the unable to be right clicked part down, but is there any way for me to get the banner to extend the whole width of the forum?

Something like this ?


CSS :

Code:

#pun-head #pun-navlinks { background:none }
#pun-head {
  padding-top:30px;;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

/* offset header position */
.pun { margin-top:250px }

Yes, that worked! Although I ended up changing the forum's skin because the navigation bar on top seemed to make the effect not look as nice. The code does not work for the new skin which has no CSS on it.

EDIT: While I am here, is there any way for me to create a navigation bar like the one in the forum I linked in my first post? I thought it would be better to post here than create a new thread.

EDIT2: Sorry, my bad! I actually meant navigation bar.

Aphery wrote:Yes, that worked! Although I ended up changing the forum's skin because the navigation bar on top seemed to make the effect not look as nice. The code does not work for the new skin which has no CSS on it.

EDIT: While I am here, is there any way for me to create a banner like the one in the forum I linked in my first post? I thought it would be better to post here than create a new thread.

Hello,

You can request a banner or anything in this section: https://help.forumotion.com/f31-graphic-requests .

Hope this helps,
-Brandon

Bump.

This is the forum you're using right ?
http://aonoexorcistrp.forumsmotions.com/

The last version was punbb, now you're using phpbb2. I just want to clarify, because if you're going to be using phpbb2 we'll need to do some template editing.

Yes, that is the forum I am using.

Bump.

I apologize for the late reply. Go to Administration Panel > Display > Templates > General and open the template overall_header

Find :

Code:

                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Replace by :

Code:

                          <div id="header">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table id="navbar" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
                          </div>

Save and publish.


Then go to Display > Colors > CSS stylesheet and paste the following rules :

Code:

.bodylinewidth { margin-top:300px }

#header {
  background:url(/IMAGE.gif) #FFF;
  min-height:200px;
  padding:30px 10px;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

#navbar {
  background:rgba(0,0,0, 0.3);
  box-shadow:0 0 6px rgba(0,0,0,0.3) inset;
  border-radius:6px;
  padding:20px;
}

#navbar a.mainmenu {
  color:#FFF;
  font-weight:bold;
}

Thanks a million! You can lock this now.

You're welcome

Topic archived