What style is this?

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Mannix_
Registered User
Posts: 427
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: What style is this?

Post by Mannix_ » Fri Aug 18, 2017 9:50 am

So first thing to do is go to open the overall_header.html and find

Code: Select all

<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
and move it on top of

Code: Select all

<div id="wrap" class="wrap">
.
Then to move the searchbar to the navigation you can use this extension https://www.phpbb.com/customise/db/exte ... ar_search/ or in the same file find

Code: Select all

<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->
and you need to copy it to the file named navbar_header.html and past it above

Code: Select all

<li class="rightside responsive-search">

Now to make it look how it should you need edit this css files:
For the header/images
open colours.css
find

Code: Select all

.headerbar, .forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}
and change it to

Code: Select all

.headerbar, .forumbg {
height: 129px;
background-position: bottom right, top left;
    background-repeat: no-repeat, no-repeat;
    background-image: url(./images/love_right.png), url(./images/love_left.png);
    max-width: 1152px;
    margin: auto;
}
Don't forget to put the images in the styles/prosilver/theme/images
Now open common.css and find

Code: Select all

.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
}
and change it to

Code: Select all

.headerbar {
	margin-bottom: 4px;
	padding: 15px;
	border-radius: 7px;
}
For the forum body
open colours.css find

Code: Select all

.wrap {
	background-color: #FFF;
	border-color: #E6E9ED;
}
and change it to

Code: Select all

.wrap {
    background-color: #FFF;
    border-color: #E6E9ED;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
}
open common.css and find

Code: Select all

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}
and change it to

Code: Select all

.wrap {
   border: 1px solid transparent;
    border-radius: 0 0 8px 8px;
    margin: -5px auto;
    max-width: 1152px;
    min-width: 625px;
    padding: 15px;
    }
This is how it should look like Image
That should be it for the extra header you need to tell what you want to be in there
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Fri Aug 18, 2017 10:00 am

Mannix_ wrote:
Fri Aug 18, 2017 9:50 am
That should be it for the extra header you need to tell what you want to be in there
Oh cool ^^ gonna try it just now, for the extra header if you explain me like you do :)
I would like to have Home, Wiki & Forum (you can add a random button if you would like to or just 3)with the same colors as it is (just to try how it looks etc)
so after that I can easily modify color, buttons (add, delete, edit) we can try with the 4 buttons as it is in the original forum just to see if it works :) then we can edit.
Thank you for the great job so far!

p.p Search is on that extra header not on the nav bar I think makes it great !
btw the width of the forum from where I can edit it, without ext

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

Re: What style is this?

Post by Mannix_ » Fri Aug 18, 2017 10:13 am

fliper4o wrote:
Fri Aug 18, 2017 10:00 am
Mannix_ wrote:
Fri Aug 18, 2017 9:50 am
That should be it for the extra header you need to tell what you want to be in there
Oh cool ^^ gonna try it just now, for the extra header if you explain me like you do :)
I would like to have Home, Wiki & Forum (you can add a random button if you would like to or just 3)with the same colors as it is (just to try how it looks etc)
so after that I can easily modify color, buttons (add, delete, edit) we can try with the 4 buttons as it is in the original forum just to see if it works :) then we can edit.
Thank you for the great job so far!

p.p Search is on that extra header not on the nav bar I think makes it great !
btw the width of the forum from where I can edit it, without ext
Woops so hold on with the search bar you will paste the code I gave you inside the extra header/bar Forum width you can change in the common.css

Code: Select all

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}
change the max-width to whatever you like don't forget to do the same number here

Code: Select all

.headerbar, .forumbg {
height: 129px;
background-position: bottom right, top left;
    background-repeat: no-repeat, no-repeat;
    background-image: url(./images/love_right.png), url(./images/love_left.png);
    max-width: 1152px;
    margin: auto;
}
So the header/images and forum body match together.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

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

Re: What style is this?

Post by Mannix_ » Fri Aug 18, 2017 10:33 am

I'm unable to help you with the extra bar sorry
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Fri Aug 18, 2017 10:47 am

Key, so far 'so 'so good.
Just 2 fast questions
- How can I get rid of forum-logo & the text. I mean not showing the text cuz if I delete the text on general settings on the tabs in the browser will be " - Index" & not "I have a dream... - Index".
- The white line between Board Index & Quick links
crop.jpg
p.p. Why so?
Thank you so far, anyway ! :)

nav is in love.css, yea?

Code: Select all

nav {
	padding: 1em;
	background-color: #dcefff;
	border-bottom: 1px solid #cadceb;
	border-radius: 5px 5px 0 0;
}

nav a {
	display: inline-block;
	padding: 0.5em 1em 0.5em 1em;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
}

nav a:active,
nav a:link,
nav a:visited {
	color: white;
}

nav a:hover {
	text-decoration: underline;
}

.dark { background-color: #154451; }
.green { background-color: #25b786; }
.blue { background-color: #1e86be; }
.pink { background-color: #da5d86; }

nav a:nth-child(1) { background-color: #154451; }
nav a:nth-child(2) { background-color: #25b786; }
nav a:nth-child(3) { background-color: #1e86be; }
nav a:nth-child(4) { background-color: #da5d86; }

html {
	background-color: #6cbee4;
}

body {
	background-color: #6cbee4;
	padding: 0 1em 1em 1em;
}

#love_wrap, #love_header {
	margin: 0 auto 0 auto;
	max-width: 1100px;
}

#love_wrap {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 150, 0.20);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 150, 0.20);
}

#love_content {
	background-color: #f8fcff;
	border-radius: 0px 0px 5px 5px;
	border: 1px solid transparent;
}

#love_header {
	height: 129px;
	background-image: url("./images/love_right.png"), url("./images/love_left.png");
	background-position: bottom right, top left;
	background-repeat: no-repeat, no-repeat;
}

#wrap {
	border: 1px;
}

.content > img {
	max-width: 100%;
	max-height: 100%;
}

.codebox {
	background-color: rgb(248, 248, 255);
}

.codebox code {
	color: #000;
}

.search-header {
	box-shadow: none;
}

ul.navlinks {
	border-top: none;
	border-bottom: 1px solid #FFFFFF;
}

.forumbg {
	background-color: #0076B1;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%);
	background-repeat: repeat-x;
}

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

Re: What style is this?

Post by Mannix_ » Fri Aug 18, 2017 10:57 am

You can do it 2 ways via html and css
CSS is faster you just have to add display: none; in the common.css
find

Code: Select all

.site-description {
    float: left;
    width: 65%;
}
and add it in new line after witdh:65%;

Code: Select all

.site-description {
    float: left;
    width: 65%;
    display: none;
}
the other way is to just delete the code responsible for that in overall_header.hml

Code: Select all

	<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Fri Aug 18, 2017 11:05 am

Maybe I've messed up something in the lines. About the left logo & the white line... :D
crop.jpg
//Anyway I'll try to fix it & do some test on another board.
Mannix_ wrote:
Thu Aug 17, 2017 1:32 pm
  • the home button etc. is done by adding extra div called nav on that forum and the look is controlled via css
Mannix_ wrote:
Fri Aug 18, 2017 10:33 am
I'm unable to help you with the extra bar sorry
Still requesting some help for it ? If somebody is willing to do so.

Thank you Mannix !
p.p. hmm, what's wrong with the left image?
asd.jpg
-fliper4o

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Sat Aug 19, 2017 5:21 pm

fliper4o wrote:
Fri Aug 18, 2017 11:05 am
Mannix_ wrote:
Thu Aug 17, 2017 1:32 pm
  • the home button etc. is done by adding extra div called nav on that forum and the look is controlled via css
Mannix_ wrote:
Fri Aug 18, 2017 10:33 am
I'm unable to help you with the extra bar sorry
Still requesting some help for it ? If somebody is willing to do so.

Thank you Mannix !
-fliper4o
1.png

User avatar
bennybernaer
Registered User
Posts: 106
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: What style is this?

Post by bennybernaer » Mon Aug 21, 2017 1:55 pm

I'm also trying these changes, but apparently something is going wrong?

Image

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Mon Aug 21, 2017 2:04 pm

bennybernaer wrote:
Mon Aug 21, 2017 1:55 pm
I'm also trying these changes, but apparently something is going wrong?

Image
Mannix_ wrote:
Sat Aug 19, 2017 4:37 pm
Don't worry we can fix that open colours.css
find

Code: Select all

.headerbar, .forumbg {
    height: 129px;
    background-position: bottom right, top left;
    background-repeat: no-repeat, no-repeat;
    background-image: url(./images/love_right2.png), url(./images/love_left2.png);
    max-width: 1100px;
    margin: auto;
} 
remove .forumbg and then below add

Code: Select all

.forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}
It broke because it was header and forumbg was using the same thing and when you split it up it will be all ok run to the same problem when I was porting a style from 3.0 to 3.2
Hope it helped.

User avatar
bennybernaer
Registered User
Posts: 106
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: What style is this?

Post by bennybernaer » Mon Aug 21, 2017 2:24 pm

.forumbg does not go away because then he will no longer give it to css.code
Is this so good you think?

Code: Select all

.headerbar, forumbg {
	color: #FFFFFF;
    height: 129px;
    background-position: bottom right, top left;
    background-repeat: no-repeat, no-repeat;
    background-image: url(./images/love_right.png), url(./images/love_left.png);
    max-width: 1152px;
    margin: auto;
}
.forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}

.forabg {
	background-color: #0076B1;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%);
	background-repeat: repeat-x;
}
Image

User avatar
Ibedejo
Registered User
Posts: 243
Joined: Tue Feb 21, 2012 12:12 am

Re: What style is this?

Post by Ibedejo » Mon Aug 21, 2017 3:59 pm

Are you trying to create an exact 1:1 copy of the style (or, at least, of the header) you referred to here?

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Mon Aug 21, 2017 7:24 pm

Ibedejo wrote:
Mon Aug 21, 2017 3:59 pm
Are you trying to create an exact 1:1 copy of the style (or, at least, of the header) you referred to here?
Nope.
I respect & like the original Love forum style ! The effort they've put in it & mainly it is build especially for Love(they've got a pretty website also https://love2d.org/).
Style name: grouplove
Based on style: prosilver (the default phpBB 3.1.x style)
Original author: Tom Beddard ( http://www.subblue.com/ )
Modified by: phpBB Limited ( https://www.phpbb.com/ )
Modified again by: EnranceJew ( http://ejew.in/ )
  • So I used some banner ext & noticed that I can use images as template, as style, as background & I liked it, I don't mean that I want to use those 2 original images so far I'm testing probably would need to creat my own with Adobe Illustrator/Photoshop. Just the idea is nice & I liked it.
  • Yes I would love to have an additional nav bar with simple buttons as the original (not the same ofc, maybe less, maybe more...). But yes this nav bar(HOME, WIKI, FORUMS, ISSUE TRACKER + Search) I would love to have it :lol:
Maybe some other time, something else on some other board will catch my eyes & would like to have it either. I think most ext, styles are inspired by something/somebody 's (else) idea & we share & modify it as the platform allows us. Meanwhile I'm learning how to use & edit the phpBB & not only... :)

-fliper4o

User avatar
Ibedejo
Registered User
Posts: 243
Joined: Tue Feb 21, 2012 12:12 am

Re: What style is this?

Post by Ibedejo » Mon Aug 21, 2017 9:34 pm

As far as this "additional navbar" is concerned: there is an extension, still under development, called [3.1][3.2][RC] Header Links which should do what you are looking for.

Regarding your new logo/header image I would suggest you create one image only: don't split it into different images which would then have to be displayed and made responsive separately.
In other words: pick the images you want and merge them into one final logo image the width of the maximun #wrap width you want to configure your board with.
Then use this extension here to display it in the header of your style.
(Support will be given either there or at the developer's board here.

This will keep the overall layout of your new header intact when changing resolutions - in contrast to the original header of the board you linked to ;)

User avatar
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: What style is this?

Post by fliper4o » Tue Aug 22, 2017 12:30 am

Ibedejo wrote:
Mon Aug 21, 2017 9:34 pm
As far as this "additional navbar" is concerned: there is an extension, still under development, called [3.1][3.2][RC] Header Links which should do what you are looking for.
andares wrote:
Thu Aug 17, 2017 5:18 pm
fliper4o wrote:
Thu Aug 17, 2017 2:32 pm
How? Where?
These buttons are very similar to those generated by this extension:

viewtopic.php?f=456&t=2410101
fliper4o wrote:
Thu Aug 17, 2017 7:24 pm
almost ^^
just a summary of the topic so far :)
4.png
4.png (9.37 KiB) Viewed 788 times
3.png
3.png (11.25 KiB) Viewed 788 times
Any difference?
Ibedejo wrote:
Mon Aug 21, 2017 9:34 pm
...
Then use this extension here to display it in the header of your style.
(Support will be given either there or at the developer's board here.

This will keep the overall layout of your new header intact when changing resolutions - in contrast to the original header of the board you linked to ;)
Original Love forum
1.png
Before (Site Logo)
2.jpg
Now
5.png
Ibedejo wrote:
Mon Aug 21, 2017 9:34 pm
Regarding your new logo/header image I would suggest you create one image only...
Image I'll note it ! Thanks !

-fliper4o

Post Reply

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

Who is online

Users browsing this forum: No registered users and 5 guests