[RC] Aero for phpBB 3.2.9

[Ilikeit]

Nice theme Thank you OP

[jrolson]

Aero 1.0.8 Released

*Support for phpBB 3.2.8

[2600]

Thanks.

[Gumboots]

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

[Gumboots]

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]

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.

[RomaamoR]

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

I want to.

[Gumboots]

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]

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.

thanks, r.

[Gumboots]

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?

[jrolson]

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.

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.

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]

Cheers. Will edit the thing accordingly.

ETA: Yep. It works now.

[jrolson]

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]

Awesome, thanks so much!

[bubbathegimp]

looking good so far.