Announcement

Collapse
No announcement yet.

Overlaying a .jpg banner graphic over the forum

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Overlaying a .jpg banner graphic over the forum

    Hey all.
    I am trying to overlay my headline banner graphic overtop of the top inital vbulletin bar. You can see what I am working on at www.Forum4All.com. I am working to get the banner that says 'launched' to drop down and overlay a tiny bit in the box that says 'Welcome'. Yes that gap was an attempt at making a transparent .png thinking it would drop flush. I don't know what I was thinking. :/

  • #2
    If you want to get rid of the gap just put a white background behind the image since your image is transparent. That should close the gap.
    last + blue = lsatblu

    Tales Otaku Admin - Tales Forums Admin

    Comment


    • #3
      Gap

      Closing the gap isn't the problem. I dont want the title banner to be that long. I just want the small part of the launched banner, to drape over the Vbilletin. Almost like bringing a layer to the front. Thanks for the tip though. Any other ideas.

      Comment


      • #4
        hmm

        I guess it would be more akin to 'layering' or bringing an image to the front. Closing the gap would be easy, but I dont want the banner to be that long. Just want that overlay drape effect. No ideas....

        Comment


        • #5
          Try absolute positioning the image:
          HTML Code:
          <img border="0" alt="Forum4All Main" src="images/misc/f4a6.png" title="Forum4All Main" style="position: absolute; top: 0; z-index: 9000;"/>
          It worked for me using Firebug on your forum, but you would need some adjusting to fit it perfectly though. The z-index property is for making sure the image does overlap, you might ignore it if you're not using other absolute positioned elements.
          You're spending millions of dollars on a website?!

          Comment


          • #6
            I have merged your two threads. Please do not double post.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment


            • #7
              Where

              Where would I paste that HTML code? Sorry bit new at this.

              Comment


              • #8
                Admin CP -> Styles & Templates -> Style Manager -> Choose your desired style -> <>;

                Then open the header template and find:
                HTML Code:
                <!-- logo -->
                <a name="top"></a>
                <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
                    <td align="$stylevar[right]">
                        &nbsp;
                    </td>
                </tr>
                </table>
                <!-- /logo -->
                ..and replace it with:
                HTML Code:
                <!-- logo -->
                <a name="top"></a>
                <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" style="position: absolute; top:0; z-index: 9000;" /></a></td>
                    
                </tr>
                </table>
                <!-- /logo -->
                Alternatively, you can define a class for the image & place the CSS declarations in the "Additional CSS Definitions" text box in the style manager.
                You're spending millions of dollars on a website?!

                Comment

                widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                Working...
                X