Page 1 of 1

style creation border with 3 images, help and suggestion.

Posted: Tue Feb 20, 2018 5:14 pm
by John Rambo
Hi guys I hope you can enlighten me on a difficulty that I'm having to create a personal style with phpbb 3.1.12, I tell you that and for personal use I do not intend to release it.

I illustrate what I have done is the problem I encounter.


in practice or three images top_border.png, mid_border.png, bottom_border.png of the dimensions 971x38, 971x299, 971x38.

you place the borders.css that I have integrated into stylesheet.css

Code: Select all

#header-bg{
	background-image: url("./images/bg/top_border.png");
	background-position: center;
	width: 100%;
	background-repeat: no-repeat;
	margin: auto;
	height: 20px;
}

#wrap-bg{
	background-image: url("./images/bg/mid_border.png");
	background-position: center;
	width: 100%;
	background-repeat: repeat-y;
	margin: auto;
}

#footer-bg{
	background-image: url("./images/bg/bottom_border.png");
	background-position: center;
	width: 100%; 
	height: 20px; 
	margin: auto;
}
and then I put the divs in overall_header.html, and in overall_footer.html, post these too.

overall_header.html

Code: Select all

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
    <div id="header-bg"></div>
    <div id="wrap-bg">
<!-- EVENT overall_header_body_before -->

<div id="wrap">
	<a id="top" class="anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->		
			<div class="inner">
overall_footer.html

Code: Select all

   </div>
    <div id="footer-bg"></div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

the problem that I find and this, I place the screenshot. practically the PICTURE below comes out and I do not understand why, you can help me thanks.
Testing Board 3 1 12   Index page.png

sorry my inglish.

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 12:56 pm
by John Rambo
Bump

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 1:18 pm
by Jodi-86
Have you checked the margin on: .wrap { in the common.css file?

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 2:23 pm
by John Rambo
I tried, but nothing changes, the margin are in colours.css

Code: Select all

#wrap {
    min-width: 625px;
    margin: 0 auto;
    padding: 5px 20px;
}
I can not believe there is not a solution,
or can not you create a border with three images?

If I put 70% on the image bottom_border.png it will be adjusted, but then with the phone you will see smaller

Code: Select all

#footer-bg {
    background-image: url(./images/bg/bottom_border.png);
    background-position: center;
    width: 70%;
    height: 20px;
    margin: auto;
}

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 2:35 pm
by Mannix_
adjust it for mobiles with media query

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 3:02 pm
by John Rambo
Mannix_ wrote:
Wed Feb 21, 2018 2:35 pm
adjust it for mobiles with media query
thanks for the answer, but I did not understand exactly what I have to do, you can be more detailed, maybe give me an example, I do not know where to put my hands

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 4:15 pm
by Mannix_
John Rambo wrote:
Wed Feb 21, 2018 3:02 pm
Mannix_ wrote:
Wed Feb 21, 2018 2:35 pm
adjust it for mobiles with media query
thanks for the answer, but I did not understand exactly what I have to do, you can be more detailed, maybe give me an example, I do not know where to put my hands
So you have this

Code: Select all

 #footer-bg {
    background-image: url(./images/bg/bottom_border.png);
    background-position: center;
    width: 70%;
    height: 20px;
    margin: auto;
}

and then you want to change the width of that #footer-bg class for mobiles and you do that by adding media query like that :

Code: Select all

@media (max-width: 700px) {
 #footer-bg {
    width: 100%;
    }
}
So it will only apply that value to the screens that aren't bigger than 700px aka mobiles

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 6:21 pm
by John Rambo
excuse my incompetence, :| this code must be added in borders.css or in responsive.css, thanks for your help.

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 6:51 pm
by Lumpy Burgertushie
it really doesn't matter but I would do it just below the other css you created ( in whatever file you did that )


robert

Re: style creation border with 3 images, help and suggestion.

Posted: Wed Feb 21, 2018 7:14 pm
by John Rambo
Mannix_ wrote:
Wed Feb 21, 2018 2:35 pm
thanks to your help I solved