style creation border with 3 images, help and suggestion.

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Scam Warning
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 » 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.
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 » Wed Feb 21, 2018 12:56 pm

Bump

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

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

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

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

User avatar
Mannix_
Registered User
Posts: 355
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

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

adjust it for mobiles with media query
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

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 » 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

User avatar
Mannix_
Registered User
Posts: 355
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

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
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

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

User avatar
Lumpy Burgertushie
Registered User
Posts: 65301
Joined: Mon May 02, 2005 3:11 am
Contact:

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

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
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

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 » Wed Feb 21, 2018 7:14 pm

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

Locked

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

Who is online

Users browsing this forum: No registered users and 4 guests