Putting an image in the header bar of the default theme

This is the right place to report general bugs, make suggestions or ask for help.
Post Reply
miksmith
Posts: 19
Joined: Wed Jul 31, 2019 4:32 pm

Putting an image in the header bar of the default theme

Post by miksmith » Fri Sep 27, 2019 5:10 pm

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

User avatar
franah
Posts: 39
Joined: Wed Aug 14, 2019 11:50 pm
Location: Spain
Contact:

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

Post by franah » Mon Sep 30, 2019 10:54 pm

Hello miksmith,
You mean this?:
first.PNG
first.PNG (53.58 KiB) Viewed 6200 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 6200 times
Note: I saved the image in the directory "fp-interface\themes\leggero\leggero\imgs"

dart
Posts: 58
Joined: Sun May 30, 2021 4:46 pm

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

Post by dart » 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

User avatar
Arvid
FlatPress Coder
Posts: 558
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

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

Post by Arvid » Thu Jun 03, 2021 12:38 pm

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

dart
Posts: 58
Joined: Sun May 30, 2021 4:46 pm

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

Post by dart » Thu Jun 03, 2021 2:07 pm

yes, that worked !
I prefer using png
thanks Arvid

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 37 guests