If you followed those instructions then it is a mystery where the imageset folder came from because the pre-existing one would have been deleted and the new package doesn't contain one?
Maybe, but searching "change board logo" finds it.Puchahawa wrote:I'm wondering if it would make sense for you to make this an announcement or sticky so It doesn't get lost down the road
people that can't be bothered to use the search will just have to wait a longer time to get help if at all.Puchahawa wrote:True enough Mick. Just thinking of all the people that can't be bothered to use the search.
Making file changes, like this, isn't recommended for 3.1, and this topic will be retired when an appropriate extension is validated. This way of changing the logo was only posted because it is something which is commonly done, so was just intended to fill an immediate need until a better way (a validated extension) comes along.Puchahawa wrote:I'm wondering if it would make sense for you to make this an announcement or sticky so It doesn't get lost down the road.
M.O.B. wrote:I just wanted to share that I was able to figure this out.M.O.B. wrote:How about be able to have it switch automatically to a smaller size logo (one that I will create) when it switches to smartphone view?
Here are my changes so the smartphone view gets a smaller sized logo (for those that use a larger one than the default one from phpBB). Plus it also hides theSITENAME
Here are the screenshots:
COPY:
[copy your images to this directory]OPEN:Code: Select all
styles/prosilver/theme/images/
styles/prosilver/theme/common.css
[This hides your SITENAME descriptions. Good for those sites that their custom logo provide the full name of their site.]
FIND:REPLACE WITH:Code: Select all
#site-description h1 { margin-right: 0; }
OPEN:Code: Select all
#site-description h1 { display: none; margin-right: 0; }
styles/prosilver/theme/imageset.css
[this changes your logo to the size you'd like it to be--make sure to adjust the padding adjustments to match the size of your logo.]
FIND:REPLACE WITH:Code: Select all
/* Global imageset items */ .imageset.site_logo { background-image: url("./images/site_logo.gif"); padding-left: 149px; padding-top: 52px; }
OPEN:Code: Select all
/* Global imageset items */ .imageset.site_logo { background-image: url("./images/site_logo.gif"); padding-left: 640px; padding-top: 104px; /* background-image: url("./images/site_logo.gif"); padding-left: 149px; padding-top: 52px; */ }
styles/prosilver/theme/responsive.css
[This allows for you to have another smaller custom logo for when the site is viewed by a smartphone it switches to the smaller logo. -- Make sure to adjust the padding sizes below to match your logo--or until it doesn't break the width of the site.]
FIND:BEFORE ADD:Code: Select all
#site-description {
FIND:Code: Select all
/* imageset.css changes */ .imageset.site_logo { background-image: url("./images/site_logo_2.gif"); padding-left: 325px; padding-top: 53px; }
REPLACE WITH:Code: Select all
.logo { /* change display value to inline-block to show logo */ display: none; float: none; padding: 10px; }
FIND:Code: Select all
.logo { /* change display value to inline-block to show logo */ display: inline-block; /* display: none; */ float: none; padding: 10px; }
REPLACE WITH:Code: Select all
#site-description h1, #site-description p { text-align: inherit; float: none; margin: 5px; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; }
Code: Select all
#site-description h1, #site-description p { display: none; text-align: inherit; float: none; margin: 5px; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; }
IF you use another theme that inherits from prosilver, you may have to do this also:
COPY:
[copy your images to this directory]OPEN:Code: Select all
styles/[other_theme]/theme/images/
styles/[other_theme]/theme/stylesheet.css
[this changes your logo to the size you'd like it to be--make sure to adjust the padding adjustments to match the size of your logo.]
FIND:REPLACE WITH:Code: Select all
/* imageset.css changes */ .imageset.site_logo { background-image: url("./images/site_logo.gif"); padding-left: 149px; padding-top: 52px; }
Code: Select all
/* imageset.css changes */ .imageset.site_logo { background-image: url("./images/site_logo.gif"); padding-left: 640px; padding-top: 104px; /* background-image: url("./images/site_logo.gif"); padding-left: 149px; padding-top: 52px; */ }
As you were already told:Hopep4p wrote:I don't understand coding well so not sure what I am missing. Does anyone have any ideas please?
Doesn't require any coding.
/ext
folder is in the list of folders there.