phpBB • Free and Open Source Forum Software

Hi

I've been working with some styles for a new forum. Some seem okay until I start to deal with the header image. Your style looks clean and it seems that putting a header image would not be that difficult. At least I hope it's not.

So, with images worth a thousand words and all that here is what I'm looking for. I did it in paint.net:



Looks as nice and clean as the rest of the forum. But as you can see, the image in the header is too thin for what I'd like. In the image here done in paint.net, the size is 1154x85px. The actual header space that I want is around 1280x220. That may seem large to some people but I plan on using different landscapes, etc.

So, my basic question to you is how and what do I code to get that image header to occupy 1280x220?

The other question is the aspect of responsive. Some of the other styles I've seen are not responsive. The image is static and all it does as it goes to smaller sizes is cut off the image. So for example using the image here, when it scales to phone size what you end up with is the left mountain (actually extinct volcano).

And of course, I'm aware that with media queries I can always use another image for smaller sizes if necessary.

Any help you can give me on this will be appreciated.

Daniel

Hey Daniel,
glad you liked this style As a quick answer, I can say that it can be achieved by editind the template file overall_header.html from the prosilver templates folder. Look for a div container with "headerbar" class and delete everything it contains. In the colors.css of the pycode style, edit the class .headerbar and add the url to the local image for the background-image attribution.
As for the responsive images, read this article on MDN, I believe it should help you to clarify and achieve what you are looking for. https://developer.mozilla.org/en-US/doc ... ive_images

I need myself the time to test this edits, and check out to achieve what you are looking for, but now I'm quite busy, maybe on the weekend. Keep me updated with the progress you are about to make.

Hope I helped you a little,
Dan.

Thank you for the response.

So, when I go to make the edits will they be in the prosilver folder or the pycode folder? I ask because sometimes style-makers use the code straight from the prosilver and don't code it in their folders.

As I said, you need to edit the template file overall_header.html from the prosilver folder and the colors.css from the pycode folder. After any edits (templates or style css), don't forget to clean the caches from the admin panel.

pycode is more of a color scheme than a style, I mean there are almost no template edits, mostly css ones.

I plan to release a v2 pycode style, with some custom template schemes, retina optimized and some overall improvements over v1.

But for now, we should concentrate on your problem

Ok, got it.

That's a good thing about not deviating too much from prosilver. In styles that I've used in past forums when it came time for phpBB version updates some of the styles would just have to be extensively coded or just dropped.

I will keep you posted on any progress. And nice to hear about what you're working on re v2.

Daniel

I thought I'd show you how things are progressing.

Since you said that you were working on some things I figured rather than go through all the coding for the image I would use the phpBB 'Header Banner' extension first and see how it looked. It looks and acts well for responsive.

https://sitesetis.com/forum/

As for the rest, I'm experimenting with different color accents here and there in viewforum and viewtopic so as to get a sense of what would look 'complementary' overall.

In viewtopic I made the posting more standard, i.e., black text on white background and sort of a gray-green to frame it. Again, just experimenting to see what's what.

I sent a note to the extension maker to see how I can change the image in a media-query when it gets to phone size. Will let you know.

By the way, which section is it where I change the post editor likewise to black text / white background?

Daniel