Customize

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
MaxPayne3
Registered User
Posts: 15
Joined: Mon Jan 22, 2018 12:07 pm

Customize

Post by MaxPayne3 » Tue Mar 13, 2018 10:22 am

Hello all,
I want to customize the look of my phpBB forum.
I have gone through several tutuorials but unable to find the exact setting need to change.

I have Prosilver.

My requests:
1) Replace the phpBB site logo - this one is OK where i have changed the setting in colours.css for:
.site_logo {
background-image: url("./images/site_logo.gif");

2) Replace the top blue banner/background with an image, a bit like the attached one.
I have tried to change several settings without success.
Can you please give me the exact css and exact setting needed to be changed.

A prompt response will be much appreciated.

Thanks
Attachments
phpBB_TopBkground.GIF

User avatar
Mick
Support Team Member
Support Team Member
Posts: 20125
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Customize

Post by Mick » Tue Mar 13, 2018 10:39 am

MaxPayne3 wrote:
Tue Mar 13, 2018 10:22 am
A prompt response will be much appreciated
All team members and community members here are volunteers, so you have to be a little patient, it takes as long as it takes.

Searching finds:

https://www.phpbb.com/customise/db/exte ... er_banner/

viewtopic.php?f=556&t=2400421

If you have a search there are more.
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

MaxPayne3
Registered User
Posts: 15
Joined: Mon Jan 22, 2018 12:07 pm

Re: Customize

Post by MaxPayne3 » Fri Mar 16, 2018 7:38 am

Hello Mick,
I understand very well.

Consequently i'm still unable to change the background blue header with an image.
The links provided are not helpful.

For the logo it's ok. But I want to change the blue header banner to an image.
i have tried same by modifying the colours.css, common.css without success.

Help.

Thanks.

User avatar
Mannix_
Registered User
Posts: 337
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Customize

Post by Mannix_ » Fri Mar 16, 2018 8:14 am

What are the steps you made to change it? Because you are going in the right direction but clearly failing at something :)
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

MaxPayne3
Registered User
Posts: 15
Joined: Mon Jan 22, 2018 12:07 pm

Re: Customize

Post by MaxPayne3 » Fri Mar 16, 2018 9:52 am

Hello,
I'm changing the file colours.css and the below section.
I'm trying to do so by commenting some lines and view the changes.
it seems that background-image: url("/images/Test_bkheader.gif"); is not working.


colours.css

.headerbar, .forumbg {
background-color: #12A3EC;
/*background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);*/
/*background-image: url("{T_THEME_PATH}/images/Test_bkheader.gif");*/
background-image: url("/images/Test_bkheader.gif");
/*background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);*/
background-repeat: repeat-x;

this section i believe it's for the tables having the forums details (in the middle of the page.)
.forabg {
background-color: #0076B1;
background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%);
background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%);
background-repeat: repeat-x;

Help.

User avatar
Mick
Support Team Member
Support Team Member
Posts: 20125
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Customize

Post by Mick » Fri Mar 16, 2018 9:57 am

[How to] Add a banner/header image:

Back up any files you intend editing before you edit them.

Assuming prosilver upload your image to the /styles/prosilver/theme/images/ folder.
(For prosilver_se /styles/prosilver-se/theme/images/ folder)

Open styles/prosilver/theme/colours.css and find:
(prosilver_se is styles/prosilver_se/theme/stylesheet.css)

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("./images/bg_header.gif");
	color: #FFFFFF;
}
Change bg_header.gif to suit your header image and add height: 100px; to reflect the height of your image.

So it would look similar to:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("./images/your_image.gif");
	color: #FFFFFF;
	height: 100px;
}
Purge the cache and refresh your browser.
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

MaxPayne3
Registered User
Posts: 15
Joined: Mon Jan 22, 2018 12:07 pm

Re: Customize

Post by MaxPayne3 » Fri Mar 16, 2018 10:21 am

Thanks Mick.
Effectively it works now.
I believe the line height: 100px; was missing, after adding same it's OK.

Consequently I have an issue for the Site Name and Site Description (ACP > Board Settings).
After changing the top banner with an image, the site name, site description and logo are not quite visible.

Kindly see the attached picture.

Please advise what can be done like changing the font size, colour of the Site Name and Site Description.

Thanks.
Attachments
Site_Settings.png
Site_Settings.png (72.37 KiB) Viewed 672 times

User avatar
Mannix_
Registered User
Posts: 337
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Customize

Post by Mannix_ » Fri Mar 16, 2018 10:33 am

Change the color: #FFFFFF to a different one, #000000 for example in the .headbar that Mick posted and then find .h1 and change it there too.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: Mannix_ and 6 guests