Page 1 of 6

What style is this?

Posted: Wed Aug 16, 2017 9:38 pm
by fliper4o
I came across a forum probably with the newest phpBB, it looks great, simple, nice layout. Shorten width, font colored background(soft blue), above the picture(attachment), there is 2 images as logos that overlap one another, so cute, so I was wondering 1st what is the them(style) is it self modified(probably), can I rearrange some things on my forum too,like Board Index before Quick links; Home, Wiki, Forums, Issue buttons & search on that "tab" & the style itself.
1.png
2.jpg
Compare both!
Thanks
-fliper4o

Re: What style is this?

Posted: Wed Aug 16, 2017 9:49 pm
by Tom Brady
Prosilver

Re: What style is this?

Posted: Thu Aug 17, 2017 7:06 am
by fliper4o
Mine is prosilver too, how can I edit it to look alike just like Love?

Re: What style is this?

Posted: Thu Aug 17, 2017 9:35 am
by fliper4o
How to do it like that?
4.png
4.png (9.37 KiB) Viewed 1788 times
5.png
Spot the differences.

Re: What style is this?

Posted: Thu Aug 17, 2017 10:27 am
by Hanakin
Step 1 post links to sites not images so we can see the code.

As for how, it looks like they removed the header and merged prosilver into there own frame then added a new section above the wrap and added search and buttons. Then gave it a bottom border blue background and rounded top corners

Re: What style is this?

Posted: Thu Aug 17, 2017 10:45 am
by fliper4o
Okey, here we go... : )
https://love2d.org/forums/
//So far I just managed to change my "background-color:"

Re: What style is this?

Posted: Thu Aug 17, 2017 12:24 pm
by Mannix_
Image For this you need to open and navbar_header.html put

Code: Select all

<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">....</ul>
between

Code: Select all

<div class="inner">
and

Code: Select all

<ul id="nav-main" class="nav-main linklist" role="menubar">
and adjust the border from this
colors.css

Code: Select all

ul.navlinks {
    border-top-color: #FFFFFF;
}
common.css

Code: Select all

ul.navlinks {
    border-top: 1px solid transparent;
}
to this
colors.css

Code: Select all

ul.navlinks {
    border-bottom-color: #FFFFFF;
}
common.css

Code: Select all

ul.navlinks {
    border-bottom: 1px solid transparent;
}

Re: What style is this?

Posted: Thu Aug 17, 2017 12:56 pm
by fliper4o
Hm, done exactly what u've said but something is not fine.
phpBB3\styles\prosilver\template\navbar_header.html

Code: Select all

	<div class="inner">

<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">....</ul>

	<ul id="nav-main" class="nav-main linklist" role="menubar">
phpBB3\styles\prosilver\theme\colours.css

Code: Select all

ul.navlinks {
	border-bottom-color: #FFFFFF;
phpBB3\styles\prosilver\theme\common.css

Code: Select all

ul.navlinks {
	border-bottom: 1px solid transparent;
I honestly like that colored buttons & the search tab as well as the logos space.

Re: What style is this?

Posted: Thu Aug 17, 2017 1:02 pm
by Mannix_
You need to copy and paste the whole section from

Code: Select all

 <ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
to

Code: Select all

</ul>
I just did it like that

Code: Select all

<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">....</ul>

	
for time saving :)

Re: What style is this?

Posted: Thu Aug 17, 2017 1:23 pm
by fliper4o
Thank you, worked fine, except the white line which divides 'em(it was gone). Anyway...
I am more focused on the overall style.
  • Background color + logo like it is under the main windows(forum board). The logo(banner, etc) are outside of the main window.
  • Home, Wiki, Forums... buttons + search are on a separate bar, enlarged to the main window(forum) width but buttons & search are fixed to the Board Index bar
//I can & probably will check some .css from the original forum(Love) but I'll need some help.

Re: What style is this?

Posted: Thu Aug 17, 2017 1:32 pm
by Mannix_
  • to make it look like it's behind you need to add box-shadow to the wrap section
on that forum it's

Code: Select all

-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);
  • the home button etc. is done by adding extra div called nav on that forum and the look is controlled via css

Re: What style is this?

Posted: Thu Aug 17, 2017 2:32 pm
by fliper4o
How? Where?

Re: What style is this?

Posted: Thu Aug 17, 2017 5:18 pm
by andares
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

Re: What style is this?

Posted: Thu Aug 17, 2017 7:24 pm
by fliper4o
andares wrote:
Thu Aug 17, 2017 5:18 pm
These buttons are very similar to those generated by this extension:
almost ^^
Mannix_ wrote:
Thu Aug 17, 2017 1:32 pm
  • to make it look like it's behind you need to add box-shadow to the wrap section
  • the home button etc. is done by adding extra div called nav on that forum and the look is controlled via css
I would try to make it to be just like the Love forum so I'll need your help guys. The link is UP so u can easily get the code & let me test, but please provide me some info cuz I'm newbie & don't know where is the code like path,where to put it/between this & this/ etc
Thanks for the help!
-fliper4o

Re: What style is this?

Posted: Fri Aug 18, 2017 9:45 am
by fliper4o
Help me modify it, thanks.
I'm focused on the header & the
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
So far :D
sofar.jpg