[RC] Aero for phpBB 3.2.8

For style authors to post and receive feedback on 3.2.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
User avatar
Ilikeit
Registered User
Posts: 7
Joined: Wed May 29, 2019 7:35 am

Re: [RC] Aero for phpBB 3.2.7

Post by Ilikeit » Sun Jun 02, 2019 5:09 am

Nice theme :) Thank you OP

User avatar
jrolson
Registered User
Posts: 828
Joined: Wed Jan 05, 2005 1:53 am
Location: U.S.

Re: [RC] Aero for phpBB 3.2.8

Post by jrolson » Sat Sep 21, 2019 2:50 am

Aero 1.0.8 Released

*Support for phpBB 3.2.8

User avatar
John connor
Registered User
Posts: 2240
Joined: Fri Nov 14, 2014 5:14 pm
Location: U S Of A
Name: Aaron
Contact:

Re: [RC] Aero for phpBB 3.2.8

Post by John connor » Sat Sep 21, 2019 5:22 am

Thanks.

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Sat Oct 12, 2019 8:26 pm

Thanks for this. I was wondering where this style had got to.

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Tue Oct 15, 2019 6:25 am

If anyone is running the Board Announcements or Newsscroll extensions and wants to tart them up a bit, I've just started playing with them and Aero on a test site. This is me feeling my way around how phpBB works, without doing anything so outrageous as reading the instructions. So far I'm finding it versatile and quite pleasant to work with.

If anyone wants code for what's in the screenshot, give me a yell.

quick_test_run.jpg

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Tue Oct 15, 2019 11:58 pm

After playing around with extensions a bit, I'm thinking that for my purposes it would be better to split the blue and black variants out to separate styles, in the way that the 3.2.0 version was done (ie: black style inheriting from blue parent style). We only want those two variants anyway, and when it comes to integrating presentation of extensions it's less significantly less convoluted if there is only one colour variant per style.

Is there any problem with me doing this for our site? I don't want to tread on anyone's toes, but it would make things easier at our end.

User avatar
RomaamoR
Registered User
Posts: 178
Joined: Tue Feb 24, 2015 4:45 pm
Contact:

Re: [RC] Aero for phpBB 3.2.8

Post by RomaamoR » Wed Oct 16, 2019 3:26 pm

Gumboots wrote:
Tue Oct 15, 2019 6:25 am
If anyone wants code for what's in the screenshot, give me a yell.
I want to.

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Wed Oct 16, 2019 8:36 pm

I have found a catch with it. Due to the way multiple colour variants are handled, getting it looking perfect with all of them is going to be tricky. I don't doubt that it's possible, if you throw enough code at it, but for my site I only want the black and blue variants anyway. This means I'm not all that motivated to look for a more complex solution at the moment. If you only want styling to match one default variant, that is easy.

ETA: Ok I re-enabled all variants on my test site and checked it out. Short version is that it can look reasonable with all of them. I don't know which particular extension you were referring to (ie: board announcements or news scroller) so here's some code for both.

Taking the news scroller first: I don't recommend setting a background image at the right hand side. This is because getting the right image displaying for each colour variant is (IMO) too complicated to be worth the bother. It looks fine with a plain dark background.

Step 1/ Copy the newsscroll/styles/prosilver folder, and rename the copy to aero.
Step 2/ Open overall_header_content_before.html and edit line 4 to this:

Code: Select all

				<div id="newsscroll" class="navbar">
This is probably not essential, but I added it for insurance in case other code (default or custom) does something funny with the .navbar class.

Step 3/ Open aero/newsscroll.css and change the content to this:

Code: Select all

#newsscroll {
	padding: 5px;
	background: none;
	border-radius: 7px;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	box-shadow: 1px 1px 8px #555;
}
.newsscroll {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	padding: 2px 0 0;
	/* Change scroller background colour here. */
	background: #0b0b0e;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
}
.newsscroll::before, .newsscroll::after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 32px;
	/* Change end gradients colour here. */
	/* Looks best if the first colour matches the background. */
	/* #0000 is transparent, but not supported by all browsers. */
	/* You can use the word transparent instead if you prefer. */
	background-image: linear-gradient(to right, #0b0b0e, #0000);
	content: "";
	z-index: 1;
}
.newsscroll::after {
	right: 0;
	bottom: 0;
	left: auto;
	/* Looks best if the first colour matches the background. */
	background-image: linear-gradient(to left, #0b0b0e, #0000);
}
.marquee {
	color: #fff;
	/* Sets default font size and line height. */
	font-size: 1.4em;
	line-height: 2em;
	/* Leave everything else alone. ;) */
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	left: 50%;
	-webkit-animation: linear infinite;
	animation: linear infinite;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
	-webkit-animation-direction: normal;
	animation-direction: normal;
}

.rtl .marquee {
	-webkit-animation-name: rtlmovement-smooth;
	animation-name: rtlmovement-smooth;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

@-webkit-keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@keyframes movement-smooth {
	from {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		left: 100%;
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		left: 0%;
	}
}

@-webkit-keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

@keyframes rtlmovement-smooth {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		right: 0%;
	}
	to {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		right: 100%;
	}
}

.marquee.marquee-movement-smooth:before {
	-webkit-animation-name: movement-smooth;
	animation-name: movement-smooth;
}

.marquee:hover {
	animation-play-state: paused;
}
Step 4/ Clear forum cache, and refresh.
-------------------------------------------------------

For the Board Annoucements extension, it think it looks best with the background in white. The only extra file you need is a copy of boardannouncements.css. So:

Step 1/ Make a new aero folder inside boardannouncements/styles.
Step 2/ Make a theme folder inside that.
Step 3/ Copy boardannouncements.css to the aero/theme folder.
Step 4/ Edit the content of boardannouncements.css to this:

Code: Select all

/* style the announcement banner */
#phpbb_announcement {
	margin: 0 0 9px;
	padding: 5px;
	border-radius: 7px;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	box-shadow: 1px 1px 8px #555;
}

/* zero out any text margins and scroll any overflow */
#phpbb_announcement div {
	padding: 9px 9px 12px;
	font-size: 1.4em;
	line-height: 1.5em;
	/* If you want the background to be the default pale blue */
	/* then use the first background here.  */
	background: #d9eaf1;
	background: #fff;
	border: 1px solid #566877;
}

/* make posted images responsive */
#phpbb_announcement .postimage {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}

/* style the close button */
#phpbb_announcement .close {
	background: transparent url('images/close.png') no-repeat 0 0;
	opacity: 0.6;
	float: right;
	width: 12px;
	height: 12px;
	margin: 0 0 0 4px;
}

/* reposition close button for right to left languages */
.rtl #phpbb_announcement .close {
	float: left;
	margin: 0 4px 0 0;
}

/* hide close button on desktops by default */
.notouch #phpbb_announcement .close {
	opacity: 0;
	transition: opacity 0.5s;
}

/* display the close button on mouse-over of the banner */
.notouch #phpbb_announcement:hover .close {
	opacity: 0.6;
}

/* fix for lists, force them to display inside containing div */
#phpbb_announcement ul,
#phpbb_announcement ol {
	margin-left: 20px;
}

.rtl #phpbb_announcement ul,
.rtl #phpbb_announcement ol {
	margin-right: 20px;
	margin-left: 0;
}

/* clear floats */
.clearfix:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: '.';
}
Step 5/ Clear forum cache, and refresh.

richey
Registered User
Posts: 614
Joined: Mon Feb 18, 2002 4:26 pm
Location: now@Cyberspace
Contact:

Re: [RC] Aero for phpBB 3.2.8

Post by richey » Thu Oct 17, 2019 6:32 pm

Hi guys,

I admit I didn't update my site with the latest aero template versions for almost 1 year, but now with the 3.2.8 update of phpBB I did.
Everything went fine, except for one little difference: threads display user information at the right side now, instead of the left one.
I'm not even sure if this is caused by phpBB or the aero template tbh?

Can anyone point me into the right direction on how to have the user information at the left side of the forums again? I don't want my board's users freak out over this little change. :D

thanks, r.
.

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Thu Oct 17, 2019 11:36 pm

I may have found a bug. When trying to attach an image to a PM I'm getting an invalid form error.

Code: Select all

<span class="file-status file-error" data-error-title="Error" data-error-message="The submitted form was invalid. Try submitting again."></span>
The error is only for attaching images in PM's. Attached images in forum posts are fine.
The error only affects Aero. Prosilver, Prosilver SE, and WE_Universal are not affected.
Has anyone else had this problem with Aero on 3.2.8?

User avatar
jrolson
Registered User
Posts: 828
Joined: Wed Jan 05, 2005 1:53 am
Location: U.S.

Re: [RC] Aero for phpBB 3.2.8

Post by jrolson » Fri Oct 18, 2019 3:14 am

richey wrote:
Thu Oct 17, 2019 6:32 pm
Hi guys,

I admit I didn't update my site with the latest aero template versions for almost 1 year, but now with the 3.2.8 update of phpBB I did.
Everything went fine, except for one little difference: threads display user information at the right side now, instead of the left one.
I'm not even sure if this is caused by phpBB or the aero template tbh?

Can anyone point me into the right direction on how to have the user information at the left side of the forums again? I don't want my board's users freak out over this little change. :D

thanks, r.
https://www.phpbb.com/customise/db/exte ... _switcher/

Not sure if this mod still works with phpBB 3.2 but I could probably add this feature into the next version of Aero.
Gumboots wrote:
Thu Oct 17, 2019 11:36 pm
I may have found a bug. When trying to attach an image to a PM I'm getting an invalid form error.

Code: Select all

<span class="file-status file-error" data-error-title="Error" data-error-message="The submitted form was invalid. Try submitting again."></span>
The error is only for attaching images in PM's. Attached images in forum posts are fine.
The error only affects Aero. Prosilver, Prosilver SE, and WE_Universal are not affected.
Has anyone else had this problem with Aero on 3.2.8?
Thanks for reporting this issue.
Found the problem in template/upc_footer.html

Find,

Code: Select all

</div></div>
<!-- IF S_COMPOSE_PM -->
<div>{S_FORM_TOKEN}</div>
</form>
<!-- ENDIF -->
Replace with,

Code: Select all

<!-- IF S_COMPOSE_PM -->
<div>{S_FORM_TOKEN}</div>
</form>
<!-- ENDIF -->
</div></div>

Gumboots
Registered User
Posts: 53
Joined: Fri Oct 11, 2019 1:59 am

Re: [RC] Aero for phpBB 3.2.8

Post by Gumboots » Fri Oct 18, 2019 3:50 am

Cheers. Will edit the thing accordingly.

ETA: Yep. It works now.

User avatar
jrolson
Registered User
Posts: 828
Joined: Wed Jan 05, 2005 1:53 am
Location: U.S.

Re: [RC] Aero for phpBB 3.2.8

Post by jrolson » Fri Oct 18, 2019 5:02 am

Aero 1.0.9 Released!

*fixed pm attachment form error reported by Gumboots
*added the option to move viewtopic user info to left side in template/config.html

richey
Registered User
Posts: 614
Joined: Mon Feb 18, 2002 4:26 pm
Location: now@Cyberspace
Contact:

Re: [RC] Aero for phpBB 3.2.8

Post by richey » Fri Oct 18, 2019 5:07 am

Awesome, thanks so much! :)
.

Post Reply

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