WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1 Tiling image behind banner on PhpBB? on Sun Apr 10, 2011 9:58 am

Josh

avatar
Registered Member
Registered Member
Hey guys, I posted this to the forummotion support forum but it didn't get any responses, so I was wondering if someone could help me with the code?

I would like to create a banner similar to this setup I made on a site a while back: [link]. Unfortunately, this required template editing on Phpbb3 and thus I wouldn't be able to use the same method for PhpBB. Anyway, I think the code would actually be pretty simple: Just a horizontally tiling image that's in the same location of the banner, positioned under it (and above the main forum body).

Thanks!

2 Re: Tiling image behind banner on PhpBB? on Sun Apr 10, 2011 6:16 pm

Nera

avatar
Technician
Technician
Here's the same answer I gave you on FM.

I'm not sure did I understand you right, but should be pretty easy if this is what you meant (for phpBB2).

Replace your body in CSS with mine.
Code:
body {
   background-color: #BC9F3E;
   background-image: url("http://illiweb.com/fa/pbucket.gif");
   background-attachment: scroll;
        background-repeat: repeat-x;
   }

Than go to bodyline and put color like this:
Code:
.bodyline{
    background-color: transparent;
    border: 1px # solid;

Put your header into pictures managment and position it center in display, headers and navigation.

This will be the resolt. It will go across the whole page.
Hope you meant that.

3 Re: Tiling image behind banner on PhpBB? on Sun Apr 10, 2011 9:58 pm

Josh

avatar
Registered Member
Registered Member
Does this method require template editing? I'm using PhpBB so I can't edit body templates and so on.

4 Re: Tiling image behind banner on PhpBB? on Sun Apr 10, 2011 10:31 pm

RockerMan

avatar
Technician
Technician
Yes, this is just CSS not template editing.

http://www.graphics-post.com/

5 Re: Tiling image behind banner on PhpBB? on Sun Apr 10, 2011 10:34 pm

Josh

avatar
Registered Member
Registered Member
But she says
Than go to bodyline and put color like this:
?

6 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 1:07 am

RockerMan

avatar
Technician
Technician
Yes...

thats in your CSS :/

http://www.graphics-post.com/

7 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 2:10 am

Josh

avatar
Registered Member
Registered Member
I'm a little confused - When I navigate to my "CSS stylesheet" under the "display" tab, it's blank. Am I in the wrong location? It sounds like this was meant to edit an already existing attribute. (When I add the code, it says I have an uneven number of brackets.)

8 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 2:44 am

RockerMan

avatar
Technician
Technician
Can I have the link to your forum please Smile

http://www.graphics-post.com/

9 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 3:03 am

Nera

avatar
Technician
Technician
This is for phpBB2 - FM (it has templates, didn't get you on that part Shocked )

It sounds like this was meant to edit an already existing attribute.
I ment that.
OK lets go from start.

You have a default version phpbb2, to work on it you have to put in your basic CSS.

Press ''see my basic CSS'' than copy that CSS to your blank CSS space and SUBMIT.

Than you can start working on your CSS.

1. Find this (on the start) =>
Code:
body {
   background-color: #ffffff;
   background-image: url("http://illiweb.com/fa/empty.gif");
   background-attachment: scroll;
   }
Delete it and replace it with this =>
Code:
body {
  background-color: #BC9F3E;
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  background-attachment: scroll;
        background-repeat: repeat-x;
  }

2. Find this
Code:
.bodyline{
    background-color: #18405e;
    border: 1px #dddddd solid;
   }

Delete it and replace it with this =>
Code:
.bodyline{
    background-color: transparent;
    border: 1px # solid;
}

3. Go to AP >> Display >> pictures managment >> advanced mode >> Forum main logo : (put the logo, that little animal there) >> Save

4. Go to Display >> Headers and navigation >> Logo positioning : select center. >> Save


That's the whole job.

10 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 6:44 am

Josh

avatar
Registered Member
Registered Member
Hm, okay, but I'm working on PhpBB, not PhpBB2 as said in OP. Would it work the same way?

Can I have the link to your forum please
Sure Smile It's TRForums.com.

11 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 8:03 am

RockerMan

avatar
Technician
Technician
Yes it would work exactly the same and I would of told you exactly the same as Until_Forever.

http://www.graphics-post.com/

12 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 8:35 am

Josh

avatar
Registered Member
Registered Member
Okay, but what I'm saying is the Phpbb2 CSS is different than the PhpBB CSS (the version I'm using). The body { attribute is different:

body {
padding: 0;
margin: 0;
font-size: 10pt;
}

And there's no .bodyline attribute.

13 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 4:23 pm

Nera

avatar
Technician
Technician
Nope, if this is your forum TRForums.com than do this.

1. REPLACE your wrap with mine.
Code:
#wrap {
    margin: 0 auto;
    min-width: 954px;
    padding: 5px;
    width: 75%;
}

2. And your body with mine
Code:
body {
    background-attachment: scroll;
    background-color: #BFA343;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    color: #25838F;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
    background-repeat: repeat-x;
}


This will be your resault =>
Spoiler:

Than add the smaller logo through AP like in step 3. & 4.

14 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 8:49 pm

Josh

avatar
Registered Member
Registered Member
Okay, thanks for your help! But is there any way to preserve the body as well?

Also - There's many #wrap attributes, which one should I change?

15 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 9:13 pm

Nera

avatar
Technician
Technician
You'd have to put the same photo in wrap and maybe inhance the bottom color ot the photo via PS, leave the top the same and move the wrap borders. This is with no PS work done on it. You could make the bottom less transparent (or whatever you want) in PS =>
http://i.imm.io/4Vj7.png
If you don't change the wrap photo (leave it only color) your wrap would cover the tilling image.


_________________

16 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 9:37 pm

Josh

avatar
Registered Member
Registered Member
I don't completely understand what you mean - I'm wondering if it is possible to still have the body (beige square under everything) start up below the banner?

So, kind of like this, only have it under eveything:
http://i26.servimg.com/u/f26/13/66/98/43/body10.jpg

17 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 9:46 pm

Nera

avatar
Technician
Technician
You can, I'll explain latter, will edit my post.



EDIT >>
I can't work through your panel so I don't know will it fit exactly with the small logo. So if it doesn't don't move it, come and I'll give you the exact margins.

Change your parts with mine.

1.
Code:
#logo-desc {
    margin: -350px 0 0;
    padding: 0;
    text-align: center;
}

2.
Code:
body {
    background-attachment: scroll;
    background-color: #BFA343;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-repeat: repeat-x;
    color: #25838F;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}

3.
Code:
#wrap {
    background-color: #FFF8B9;
    border: 1px solid #000000;
    margin: 330px auto 0;
    min-width: 954px;
    padding: 5px;
    width: 75%;
}

RESAULT

18 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:37 pm

Josh

avatar
Registered Member
Registered Member
Cool, thanks for your help! The only problem now is, the background defined in body { doesn't seem to be showing?

http://www.trforums.com/

19 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:40 pm

Nera

avatar
Technician
Technician
I see 2 bodys in your CSS, did you replaced yours with mine or you just added mine?


_________________

20 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:43 pm

Josh

avatar
Registered Member
Registered Member
Replaced it. Where do the see the second one?

21 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:45 pm

Nera

avatar
Technician
Technician
Code:
 .post {
background-image: url(' http://i56.tinypic.com/bbk0k.png ');
background-repeat: repeat;
background-position: top center;
}

* {
    margin: 0px;
    padding: 0px;
    }
html {
   font-size: 100%;
   height: 100%;
   }
* html {
   scrollbar-face-color: #;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #;
   scrollbar-3dlight-color: #;
   scrollbar-arrow-color: #;
   scrollbar-track-color: #;
   scrollbar-darkshadow-color: #;
   }
*+ html {
   scrollbar-face-color: #;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #;
   scrollbar-3dlight-color: #;
   scrollbar-arrow-color: #;
   scrollbar-track-color: #;
   scrollbar-darkshadow-color: #;
   }

/* Begin CSS for print media */
@media print {
   * {
   background-image: none;
   background-color: #fff;
   color: #000;
   }
body {
    background-attachment: scroll;
    background-color: #BFA343;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    background-repeat: repeat-x;
    color: #25838F;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}
body#phpbb div#wrap {
   width: 85%;
    margin: 0;
   }
span.corners-top,span.corners-bottom {
   display: none;
   }

/* Header */
#wrap #logo-desc p,#wrap #logo-desc img,div#page-header div.navbar,div#page-header div.navbar ul.linklist {
   display: none !important;
   }
#wrap div.headerbar {
   margin: 0;
   border-bottom: 1px solid #ccc;
   }
#wrap div#page-body h2 {
   font-weight: bolder;
   border-bottom: 1px solid #ccc;
   margin-bottom: 1em;
   }

/* Posts */
#wrap div#page-body div.topic-actions,#wrap div#page-body .pagination,#wrap div#page-body .left-box,#wrap div.postbody ul.profile-icons,#wrap div.postbody img,#wrap dl.postprofile,#wrap div.post .right,#wrap div.postbody div.signature {
   float: none;
   display: none !important;
   }
#wrap dl.postprofile {
   float: none;
   }
#wrap div.postbody .online {
   background-image: none;
   }
#wrap div.postbody {
   width: auto;
   }
#wrap div.postbody h3 {
   font-size: 10pt;
   }
#wrap div.postbody p.author {
   width: 100%;
    border-bottom: 1px dashed #ccc;
   }
#wrap div#page-body div.post {
   padding: 0 0 2em 0;
   border-top: 3px double #ccc;
   }
div.postbody {
   width: 100%;
    float: none;
   }
#wrap div#page-body div.post .content {
   overflow: visible;
   }

/* Footer */
div.noprint {
   display: none;
   }
#wrap div#page-footer,#wrap div#page-footer ul.linklist {
   display: none;
   }
}

/* End CSS for print media */
#min-width {
    min-width: 750px;
    }
body {
   font-family: Verdana,Arial,Helvetica,sans-serif;
   color: #25838f;
   background-color: #af9449;
   background-image: url('http://illiweb.com/fa/pbucket.gif');
   background-attachment: fixed;
   font-size: 10px;
   height: auto;
   padding: 10px 0px;
   }

Ank's here, he'll finish it. Angel

22 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:53 pm

Josh

avatar
Registered Member
Registered Member
Odd, not sure how that got there. It seems to be working now, thank you for your help! Smile

Last questionr regarding this - do you know how I can remove these white corners?

http://i26.servimg.com/u/f26/13/66/98/43/pasted10.png

23 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 10:58 pm

Nera

avatar
Technician
Technician
1. Remove picture links in 4 places for removing little white corners

Code:
span.corners-top {
    background-image: url("http://illiweb.com/fa/prosilver/corners_left.gif");


Code:
span.corners-top span {
    background-image: url("http://illiweb.com/fa/prosilver/corners_right.gif");

Code:
span.corners-bottom {
    background-image: url("http://illiweb.com/fa/prosilver/corners_left.gif");

Code:

span.corners-bottom span {
    background-image: url("http://illiweb.com/fa/prosilver/corners_right.gif");

24 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 11:04 pm

Josh

avatar
Registered Member
Registered Member
Okay, great. Is it possible to still round the corners of the widgets, forum tables, etc? (Perhaps using CSS rather than just adding the corner images?)

25 Re: Tiling image behind banner on PhpBB? on Mon Apr 11, 2011 11:06 pm

Nera

avatar
Technician
Technician
Let's not put it all in one topic. Open a new one for other things. I'll answer you latter, have to go now.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

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