scaffoldBB

Changing Colours and adding logo and search box padding - scaffoldBB

Changing Colours and adding logo and search box padding

by indieben » Tue Jul 23, 2024 9:34 am

Hi, I have scoured the limited information available but I can't work out how to do the above.

For example, for .bg-primary, it has a var set for it's colour.
I've discovered a customize.css but i'm not sure if this is what I need and whether, in any event, this needs to be manually minimified and any particular files replaced.

I tried to look for the var set but I couldn't find it.

i'm also looking to add some padding to the right of the logo as the forum name and strapline is very close and similarly some padding on the right of the searchbar as it is very close to the end of the blue bar.

Is the logo complicated to change to please or is that just a case of replacing the existing PHPBB logo image?

I'm keen to keep it highly responsive which caused me to move over to your theme from another that I was using.

Essentially, I don't know what i'm doing and many would want the colour to be something other than the stock blue.

Thanks :-)
indieben
Registered User
Posts: 30
Joined: Sun Feb 04, 2018 12:51 am

Re: Changing Colours and adding logo and search box padding

by Mannix_ » Tue Jul 23, 2024 9:55 am

If you want to overwrite the default variables you need to add in customize.css
for example

Code: Select all

:root {
    --bs-primary-rgb: 23,22,43;
}

To add the padding open overall_header.html find and element with the id=""logo" and pe-3/4/5 to to class attribute right now it has p-2 if you want something custom target .logo in customize.css f.e.

Code: Select all

.logo{padding-inline-end: 50px;}

If you want to change logo if it's in an svg format you just replace the existing one with yours with the matching name, if it's not you need to adjust

Code: Select all

.site_logo {
    background-image: url(./images/site_logo.svg);
    background-repeat: no-repeat;
    display: inline-block;
    width: 149px;
    height: 52px;
}
in main.css
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Mannix_
Registered User
Posts: 1974
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Changing Colours and adding logo and search box padding

by indieben » Tue Jul 23, 2024 11:15 am

Thanks ever so much for your quick reply Matt,

What i've ended up with is https://www.myukmanifesto.uk/forum/ so definitely moving forward - thanks to your help.

The logo has inadvertently been pushed down though and I can't get control over the search to give that a bit of purple space to the right.

Also, how is font size controlled, more widely on the page, please as this is a touch on the small side?

Thanks.
indieben
Registered User
Posts: 30
Joined: Sun Feb 04, 2018 12:51 am

Re: Changing Colours and adding logo and search box padding

by Mannix_ » Tue Jul 23, 2024 11:27 am

Um don't you think giving a logo height of 254px is a bit excessive when the image is 70px in height ??
To target search you can use .search-header class

For font there is --bs-body-font-size variable by default it's set to 1rem. This should adjust font size across the whole board
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Mannix_
Registered User
Posts: 1974
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt