Page 1 of 1

Putting an image in the header bar of the default theme

Posted: Fri Sep 27, 2019 5:10 pm
by miksmith
Hi

is there an easy way of putting an image in the header bar of the default theme? WHilst plain red is perfectly pleasant I would like to size an image to place in there.

thanks

mike

Re: Putting an image in the header bar of the default theme

Posted: Mon Sep 30, 2019 10:54 pm
by franah
Hello miksmith,
You mean this?:
first.PNG
first.PNG (53.58 KiB) Viewed 6179 times
The answer is yes, you can. To do this, you will have to open the file: "fp-interface\themes\leggero\leggero\res\common.css"
Find the #id "Head" (#Head) (Line 157 to 163):

Code: Select all

#head {
	font-family: 'book antiqua', georgia, garamond,  times, 'times new roman', serif;
	padding: 95px 10px 5px 5px;
	margin: 10px;
	background: #c37676 url('../imgs/shade.png') repeat-x;
	border: #bbb 1px solid
}
Delete the line: "background: #c37676 url('../imgs/shade.png') repeat-x;" and add:
background: url('YOURSITE.COM/PATH/IMAGE.PNG");
You can also add more options to the background (To do this visit this link: https://www.w3schools.com/css/css_background.asp)
For example:

Code: Select all

#head {
	font-family: 'book antiqua', georgia, garamond,  times, 'times new roman', serif;
	padding: 95px 10px 5px 5px;
	margin: 10px;
	background: url('../imgs/fruits-863072_960_720.jpg');
	background-position: center;
	border: #bbb 1px solid
}
And it would look like this:
second.jpg
second.jpg (69.63 KiB) Viewed 6179 times
Note: I saved the image in the directory "fp-interface\themes\leggero\leggero\imgs"

Re: Putting an image in the header bar of the default theme

Posted: Thu Jun 03, 2021 11:06 am
by dart
what is the size of the image to fill that area ?

does it matter if .jpg, png or gif ?

I can guesstimate 966 x 168.ish

Re: Putting an image in the header bar of the default theme

Posted: Thu Jun 03, 2021 12:38 pm
by Arvid
dart wrote: Thu Jun 03, 2021 11:06 am what is the size of the image to fill that area ?

does it matter if .jpg, png or gif ?

I can guesstimate 966 x 168.ish
Hi,

no, the image type does not matter, as long as you set the image file name in the CSS correctly:

Code: Select all

background: url('../imgs/fruits-863072_960_720.jpg');
(Might as well be fruits-863072_960_720.png or .gif, as long as it matches the actual image file.)

The image size may not be exact, as long as it completely fills the space. (If it doesn't, the image will be displayed tiled - which might be a desirable effect when it comes to small pattern images that then will be repeated horizontally and vertically.)
The image is aligned top-left and will simply be cut off at right and bottom if too large. Easiest way to get the pixel-exact size of your individual header box: Screenshot your page, cut the header box in your favourite graphics tool (might simply be MS Paint), see the size :)

All the best,
Arvid

Re: Putting an image in the header bar of the default theme

Posted: Thu Jun 03, 2021 2:07 pm
by dart
yes, that worked !
I prefer using png
thanks Arvid