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]

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

Josh

Josh
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!

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

Nera

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

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

Josh

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

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

RockerMan

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

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

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

Josh

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

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

RockerMan

RockerMan
Technician
Technician
Yes...

thats in your CSS :/

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

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

Josh

Josh
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.)

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

RockerMan

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

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

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

Nera

Nera
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.
Tiling image behind banner on PhpBB? 4UoK
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.

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

Josh

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

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

RockerMan

RockerMan
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/

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

Josh

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

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

Nera

Nera
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:
Tiling image behind banner on PhpBB? 4UXU

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

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

Josh

Josh
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?

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

Nera

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


_________________

Tiling image behind banner on PhpBB? Nera

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

Josh

Josh
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:
https://i.servimg.com/u/f26/13/66/98/43/body10.jpg

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

Nera

Nera
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
Tiling image behind banner on PhpBB? 4VoE

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

Josh

Josh
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/

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

Nera

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


_________________

Tiling image behind banner on PhpBB? Nera

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

Josh

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

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

Nera

Nera
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

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

Josh

Josh
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?

https://i.servimg.com/u/f26/13/66/98/43/pasted10.png

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

Nera

Nera
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");

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

Josh

Josh
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?)

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

Nera

Nera
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