The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS for background banner?

View previous topic View next topic Go down

Solved CSS for background banner?

Post by Aphery on March 8th 2015, 7:57 pm

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.

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 9th 2015, 1:57 am

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 9th 2015, 5:28 pm


Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 9th 2015, 6:07 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 9th 2015, 8:08 pm

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?

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 9th 2015, 8:21 pm

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 }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 9th 2015, 8:45 pm

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.


Last edited by Aphery on March 9th 2015, 8:55 pm; edited 1 time in total

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by brandon_g on March 9th 2015, 8:49 pm

@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: http://help.forumotion.com/f31-graphic-requests Smile.

Hope this helps,
-Brandon

brandon_g
Support Moderator
Support Moderator

Male Posts : 5140
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 10th 2015, 10:19 pm

Bump.

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 11th 2015, 6:21 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 11th 2015, 10:52 pm

Yes, that is the forum I am using.

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 12th 2015, 11:53 pm

Bump.

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 13th 2015, 5:13 am

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

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


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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS for background banner?

Post by Aphery on March 13th 2015, 5:31 pm

Thanks a million! You can lock this now.

Aphery
New Member

Male Posts : 16
Reputation : 1
Language : English

http://academiaveil.bosforum.net/

Back to top Go down

Solved Re: CSS for background banner?

Post by Ange Tuteur on March 13th 2015, 6:42 pm

You're welcome Wink

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum