style creation border with 3 images, help and suggestion.

John Rambo · Post by **John Rambo** » Tue Feb 20, 2018 5:14 pm

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.

John Rambo · Post by **John Rambo** » Wed Feb 21, 2018 12:56 pm

Jodi-86 · Post by **Jodi-86** » Wed Feb 21, 2018 1:18 pm

Have you checked the margin on: .wrap { in the common.css file?

John Rambo · Post by **John Rambo** » Wed Feb 21, 2018 2:23 pm

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

Mannix_ · Post by **Mannix_** » Wed Feb 21, 2018 2:35 pm

adjust it for mobiles with media query

John Rambo · Post by **John Rambo** » 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

Mannix_ · Post by **Mannix_** » Wed Feb 21, 2018 4:15 pm

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

John Rambo · Post by **John Rambo** » Wed Feb 21, 2018 6:21 pm

excuse my incompetence,

this code must be added in borders.css or in responsive.css, thanks for your help.

Lumpy Burgertushie · Post by **Lumpy Burgertushie** » Wed Feb 21, 2018 6:51 pm

it really doesn't matter but I would do it just below the other css you created ( in whatever file you did that )

robert

John Rambo · Post by **John Rambo** » Wed Feb 21, 2018 7:14 pm

Mannix_ wrote: ↑Wed Feb 21, 2018 2:35 pm

thanks to your help I solved

phpBB • Free and Open Source Forum Software

style creation border with 3 images, help and suggestion.

style creation border with 3 images, help and suggestion.

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

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

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

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

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

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

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

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

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

advertisements