masthead-logo Page Header Editing & Masthead-Logo Resizing

[Joe_H]

Hi,

I'm new to PW and have watched a number of videos online and successfully installed it on local machine as well as web hosted. I've used the standard blog template and I want to change the masthead logo to another one as I customise the standard template. I have become stuck on the issue of the masthead logo. My questions are as follows:

1. Is there any way in the admin console to edit the page header? I have edited the _main.php file to point to an new image but would prefer to do it by admin console if possible.
2. I cannot get the image to resize and have tried using the HTML height and width parameters as well as the px values in the main.css file that refer to the masthead-logo. The image (I've tried different size ones) all remain the same width as the coffee cup standard one and will not resize for me as I need it to be much wider than the standard 100px.

Many thanks in advance for any pointers you can give me. If this is covered in a video anywhere just point me to it. Thanks.

Joe

[Joe_H]

Ok - I may have eventually partly solved the problem myself. _main.php links to the site CSS file main.css. I found when I removed this link I could change the image size. I found when I removed all the content of main.css and left the link still the same problem. Only when I changed the name of the CSS file to anything else and linked to it did the problem go away. Now I can change the image size using the % or px methods. Anyone know why the CSS file called main.css is a problem in this instance? Also, can I make these changes to the header via the admin console?

[wbmnfktr]

First of all... Welcome to the World of ProcessWire.

I don't know anything about the site-profile you are using. I've seen it but never worked with it.

Resizing an image can be done in various ways. You either upload it in the correct size already, you resize it in the backend or define a size within the template code through the API, finishing touches in CSS and so on.

What you describe sounds a bit like that you are not only new to ProcessWire but maybe even to webdev - both is fine.

BUT... I highly suggest you take a look at the ProcessWire Tutorials which guide you through a lot of steps. Videos are nice but those aren't anything like tutorials (at least those I know about).

The site profile will give you a nice starting point but you won't end up with a highly customized version of just from using the backend or settings in it.
You will have to tinker around with the template files, the CSS and might even have to complete new markup.

 

[Chris Bennett]

Hi @Joe_H.
You can make whatever CSS changes you want to main.css, it is very much a starting point.

Devtools in your browser of choice is really useful when troubleshooting why something isn't behaving how you want.
Right-click on the culprit, inspect element, and the CSS involved is all there, which you can alter at will to test possible solutions

You can also add as many links to your own CSS as you want by following the general method set out in _main.php.

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/whetevernameyouchooseasyourdefault.css" />

Processwire is not very opinionated at all on what you do with the data, so frontend styling is not something dealt with in the admin console by default.

Basically, all you need to do is tell processwire what file to get and it will get it for you, but what you put in there is gloriously and flexibly up to you.

All the fun stuff is up to you, processwire will just throw in data where you tell it to.

[Joe_H]

@wbmnfkt - yes I'm new to webdev and finding my way around it all. I'll look through more of those tutorials and I've watched a good number of Lahijani's videos which are very good. I'm building my website gradually and figuring stuff out as I go along. I need to read more tutorials on HTML, CSS and PHP but learning while doing is the best approach for me.

@ Chris - I'll use devtool more but it's a bit confusing at first and need to figure it all out. I'm just puzzled as to why the problem with resizing went away once the main.css file was named anything but that name. My header image resizes fine now and is not limited to 100px width.

[Chris Bennett]

6 hours ago, Joe_H said:

@wbmnfkt - yes I'm new to webdev and finding my way around it all. I'll look through more of those tutorials and I've watched a good number of Lahijani's videos which are very good. I'm building my website gradually and figuring stuff out as I go along. I need to read more tutorials on HTML, CSS and PHP but learning while doing is the best approach for me.

@ Chris - I'll use devtool more but it's a bit confusing at first and need to figure it all out. I'm just puzzled as to why the problem with resizing went away once the main.css file was named anything but that name. My header image resizes fine now and is not limited to 100px width.

No worries Joe, yep Devtools is surely a little confusing at first, but once you get familiar with it, life gets easier.
Definitely a very important tool in your webdev toolbelt, so the more you get used to it, the better.

It will tell you about your javascript errors, show you what is getting loaded, from where, what is missing, let you know what your CSS is doing and all manner of stuff you need to know. 

The header problem might have gone away by simply renaming main.css if your page could no longer link to the CSS that was causing the problem.

No idea which site profile you started with, but if you, for example, renamed main.css to anythingelse.css and didn't update the link to the css in your page with the renamed file, then the page rules set in main.css would no longer apply because they wouldn't be found.

So something along the lines of:

#masthead-logo img {
	/* image for masthead logo */
	width: 100px;
}

would simply disappear removing the width restriction on that element.