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
Jodi-86
Registered User
Posts: 86
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: 1014
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
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
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: 1014
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
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
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: 68476
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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
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”