how to set background image for header bar

PHPMaker General Discussion (PHPMaker)
1

Hi all,The top navigation bar of a new phpmaker site,
I don’t know what it’s called inside phpmaker (technically) yet,
but it’s the large green bar on top of the page in this screenshot:I would like to change the template so that this area is not green,
but contains a repeating background image that I will provide.Can anyone tell me how to set this image in the theme or css options ?
I’ve searched and searched and nothing makes any sense to me,
and when I change things, nothing seems to happen when I regenerate everything and generate the site again…Thanks for your help!,
Terrence

2

I suggest you not to change the green color becomes background image, since this area can be used to display the menu items on horizontal style (besides the existing ones in the sidebar).

3

What I mean is how do I increase the height of the top bar a few pixels so it a bit deeper down onto the page and matches the grey line on the dark grey panel on the left.
Then, apply the green background image to it and make all text on it pure white instead of light grey.If you look at the selected table on the left dark grey panel, you see it has a green rounded corner rectangle around I, can I make this the same style as the top bar,
eg also have the green background image and the pure white text instead of light grey???I hope this makes things a bit easier to explain…
Unfortunately the documentation for the theming/css/colours etc is not very elaborate,
so I really don’t know what to change, I’ve tried quite a few things, but without success…Your help is really appreciated! :)Terrence

4
  • To change the header height you may change $main-header-height.
  • To change the header background color or image you may change add your CSS under HTML → Styles → User tab, e.g.
.main-header {
    background-color: #xxxxxx;
    background-image: url(...);
}

Also see background-image.

5

That’s great information, thank you VERY much! :slight_smile:
I’m trying it out now…Do you also know how to change the main header text colour to pure white instead of the light grey it uses ?
And, do you also know how I can apply the background image and pure white text to the selected table (it’s got a green box around it when selected) on the dark grey panel on the left of the page ?Thanks :slight_smile:
Terrence

6

The background image work great :slight_smile:
But the size of the header is’nt changed.I just changed the contents of the HTML → Theme → AdminLTE → $main-header-height
from: $main-header-height = calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width})
to: 114pxBut it doesn’t do anything after I regenerate the whole project to PHP code…
Any tips ?Terrence

7

You need to generate the *.css files again and clear temp. files in your browser to make sure the new *.css files are loaded.To check CSS in your browser (e.g. Chrome), right click the element and click “Inspect”, check the “Styles” and then write your own CSS in Theme → Styles → User tab to overwrite it.See Get Started With Viewing And Changing CSS.There are many theme settings under the Theme tab, e.g. to change table row colors, search “row”, to change sidebar CSS classes search “sidebar”.

8

Thanks again,
I’ve managed to get my image background set up properly for both the header and footers, and it looks really nice now :)Big thanks!,
Terrence