style creation border with 3 images, help and suggestion.

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Ideas Centre
Locked
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

style creation border with 3 images, help and suggestion.

Post 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.
Last edited by John Rambo on Wed Feb 21, 2018 1:45 pm, edited 1 time in total.
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

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

Post by John Rambo »

Bump
User avatar
Jodi-86
Registered User
Posts: 100
Joined: Thu Nov 30, 2017 10:04 pm

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

Post by Jodi-86 »

Have you checked the margin on: .wrap { in the common.css file?
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

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

Post 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;
}
User avatar
Mannix_
Registered User
Posts: 1834
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

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

Post by Mannix_ »

adjust it for mobiles with media query
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

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

Post 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
User avatar
Mannix_
Registered User
Posts: 1834
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

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

Post 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
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

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

Post by John Rambo »

excuse my incompetence, :| this code must be added in borders.css or in responsive.css, thanks for your help.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post 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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
John Rambo
Registered User
Posts: 74
Joined: Tue Jun 18, 2013 8:46 pm

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

Post by John Rambo »

Mannix_ wrote: Wed Feb 21, 2018 2:35 pm
thanks to your help I solved
Locked

Return to “[3.1.x] Styles Support & Discussion”