[Release] PBTech

For style authors to post and receive feedback on 3.1.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
Anti-Spam Guide
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [DEV] PBTech

Post by Hanakin » Fri Jul 25, 2014 8:26 pm

looking good although do not specify a height on elements set it to auto instead and specify the height via the line-height.

case in point

Code: Select all

/* Buttons
--------------------------------------------- */
.button {
	background-color: #222;
	background-image: linear-gradient(to bottom, #373737 0%, #111111 100%);
	border: 1px solid #5D5D5D;
	border-radius: 3px;
	color: inherit !important;
	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
	height: 30px;
	line-height: 28px;
	padding: 0 12px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
	box-shadow: 0 1px 7px 0 rgba(0,0,0,0.6), inset 0 0 3px 0 rgba(0,0,0,0.8);
	transition: all 0.2s;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
Should be this.

Code: Select all

/* Buttons
--------------------------------------------- */
.button {
	background-color: #222;
	background-image: linear-gradient(to bottom, #373737 0%, #111111 100%);
	border: 1px solid #5D5D5D;
	border-radius: 3px;
	color: inherit !important;
	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
	height: auto;
	line-height: 30px;
	padding: 0 12px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
	box-shadow: 0 1px 7px 0 rgba(0,0,0,0.6), inset 0 0 3px 0 rgba(0,0,0,0.8);
	transition: all 0.2s;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
should fix the render issues with the text not being centered
Donations welcome via Paypal Image

DaFire
Registered User
Posts: 12
Joined: Wed Nov 28, 2001 10:10 pm

Re: [DEV] PBTech

Post by DaFire » Mon Sep 01, 2014 7:01 pm

this style really looks great and I was playing around with it but there is something odd / ugly happening when using chrome.

primary when I reload the page some text is rendered bigger and then after a split second is put to the correct size ... this also happens with the bbcode buttons on the reply page everytime I visit it.

any idea what the problem might be?

dafire

DaFire
Registered User
Posts: 12
Joined: Wed Nov 28, 2001 10:10 pm

Re: [DEV] PBTech

Post by DaFire » Wed Sep 03, 2014 6:36 am

problem was gone after removing @import statements and putting everything in one css file .)

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 889
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: [DEV] PBTech

Post by Hanakin » Wed Sep 03, 2014 6:01 pm

this sounds like a resource load issue most likely due to how style inheritance is setup
Donations welcome via Paypal Image

YuLeven
Registered User
Posts: 8
Joined: Tue Dec 11, 2012 7:48 pm

Re: [DEV] PBTech

Post by YuLeven » Fri Sep 05, 2014 8:49 pm

I love it!
I tested it today on a copy of my live forum (but running on 3.1 RC3) and it was absolutely fantastic.

The only issue I encountered is that everything (from fonts to buttons) becomes abnormally big and disproportional when using Google Chrome 37. With Firefox, on the other hand, the style is just gorgeous.

The way it handles mobile also surprised me. It even does it better than mobile-oriented styles that I've tried before on 3.0.12

I'm really looking forward to see it completed. In fact, I like it so much that I could put it live if it wouldn't be for that small Chrome glitch.

User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: [DEV] PBTech

Post by PayBas » Sat Sep 06, 2014 7:42 am

YuLeven wrote:I love it!
I tested it today on a copy of my live forum (but running on 3.1 RC3) and it was absolutely fantastic.

The only issue I encountered is that everything (from fonts to buttons) becomes abnormally big and disproportional when using Google Chrome 37. With Firefox, on the other hand, the style is just gorgeous.

The way it handles mobile also surprised me. It even does it better than mobile-oriented styles that I've tried before on 3.0.12

I'm really looking forward to see it completed. In fact, I like it so much that I could put it live if it wouldn't be for that small Chrome glitch.
I'm glad to hear that you like it. But I wouldn't put it live yet. This style isn't even in beta stage yet. But I hope to get a beta out soon. Just been very busy the past few weeks.

DaFire
Registered User
Posts: 12
Joined: Wed Nov 28, 2001 10:10 pm

Re: [DEV] PBTech

Post by DaFire » Sat Sep 06, 2014 8:07 am

maybe it is a chrome bug, but you can prevent it from happening if you copy all stylessheets into one file instead of using the @import rules.

User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: [DEV] PBTech

Post by PayBas » Sat Sep 06, 2014 1:05 pm

DaFire wrote:maybe it is a chrome bug, but you can prevent it from happening if you copy all stylessheets into one file instead of using the @import rules.
Since this style inherits from prosilver, I will probably not pack everything in 1 CSS file. The final version will not be using @import, but rather Method 4 as detailed here: viewtopic.php?f=481&t=2259531

DaFire
Registered User
Posts: 12
Joined: Wed Nov 28, 2001 10:10 pm

Re: [DEV] PBTech

Post by DaFire » Sun Sep 07, 2014 6:24 am

Sorry, I did not want to tell you what to do.. I'm more or less a css noob but I love this style because it is easy to customize and don't depend on many colored images ;)

Personally I renamed all files to scss and replaced all colors by variables and kept the file structure with the imports (just compiling it to one file in the end)

This way by just changing the color of the bar below the logo image I changed the whole Style into a dark one in quite short time by just playing with the variables. Just doing it for fun since phpbb 3.1 is not released and guess it takes a while till our forum will migrate ,)

Here's a screen with just some colors changed and a other logo image: https://dl.dropboxusercontent.com/u/282 ... ex.php.jpg

User avatar
MohamedAG
Registered User
Posts: 107
Joined: Mon May 26, 2014 10:06 pm
Location: U.S.A.
Name: Moh Sal
Contact:

Re: [DEV] PBTech

Post by MohamedAG » Sun Sep 14, 2014 1:03 am

Thanks for the style ... using it as we speak

http://arabicgt.net/

User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: [BETA] PBTech

Post by PayBas » Tue Sep 16, 2014 4:56 pm

Glad you guys like it.

Upgrading this topic to [BETA] ;).

User avatar
Meis2M
Translator
Posts: 869
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

Re: [BETA] PBTech

Post by Meis2M » Mon Sep 22, 2014 5:31 pm

plz support RTL language.
phpBB persian international support
Ultimate SEO Friendly URL - Extension
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM

User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: [BETA] PBTech

Post by PayBas » Mon Sep 22, 2014 8:44 pm

I haven't decided yet if I will support RTL. The amount of work is pretty significant.

I'll let you know when/if I do.

User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: [BETA] PBTech

Post by PayBas » Wed Oct 08, 2014 1:51 pm

Updated for phpBB 3.1 RC5, and also started a bit for RTL support (not finished though).

DaFire
Registered User
Posts: 12
Joined: Wed Nov 28, 2001 10:10 pm

Re: [BETA] PBTech

Post by DaFire » Wed Oct 08, 2014 2:08 pm

btw is there a 3.0.12 version of this style available somewhere ?

Locked

Return to “[3.1.x] Styles in Development”