We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

How to have different .ow_header_pic for each section [Solution available] | Forum

Kevin Nov 19 '16

Currently the same header is used across all sections like Members, Photo, Video, Events, Forum, Groups, (plus other plugins).

How would I specify a different header image for each?

Standard code in base.css is:

.ow_header_pic {
    height: 200px;
 background-image: url('images/bg.jpg'); /** OW_Control type:image, key:headerbackgroundImage, section: 1. General Settings, label: Header image **/
    background-repeat: no-repeat;
    background-position: center -25px; 
    background-attachment: fixed; 
    background-size: 100%;    


The Forum post is edited by Aliya Nov 25 '16
Kevin Nov 24 '16
It's Thanksgiving! - any one have a suggestion?
Kevin Nov 24 '16
I just found this in another thread:

============================= There is a solution though. It will not work exactly like you wanted, but might help you. 
You can leave original header as it is on your main (index) page, BUT change it for ALL other internal pages ( either replace it with another image or just resize it). 

If you look at ow_themes/MyThemeName/master_pages you will see 2 html files: 

Dndindex.html - is used for your main page, while general.html is used for all other pages. 
Within both files you will find following piece of code that deals with header image: 

<div class="ow_header">
            {if isset($imageControlValues.headerImage.src)}
                <div style="background: url({$imageControlValues.headerImage.src}) no-repeat; height: {$imageControlValues.headerImage.height}px;"></div>
                <div class="ow_header_pic"></div>


So you can modify general.html to display either smaller or completely another image. 
Let me know if you get any questions while using my suggestion ( if you decide to use it at all).============================= I found the general.html in the master pages for my theme . Alia or someone else - is there a way to add conditional check so I could use this code area to change the image for each area?

Aliya Team
Aliya Nov 25 '16
NOT ELEGANT and definitely NOT THE BEST  solution is assigning specific master page for each function within a plugin.

I am 100% sure that there is another good way of replacing just header image, but this requires more code digging or an experienced programmer. Special plugin to re-assign header image would have been perfect.

But here are steps you can follow if you are ready to perform some modifications to achieve desired result.

0. Get some coffee.

1. within /master_pages/ of your template create set of .html files for each desired page. Keep file names to 1 word. Ex: generalphoto.html , generalgroups.html and etc.
Content of those files should be same as in default general.html with exception of img src URLs for  <div class="ow_header_pic">. Upload desired header images into Grapics section via admin panel and then use URLs of those images for img src in custom html files.

Ex: <img class="ow_header_img" src="http://sitename.com/foo/foo/foo.png" />

2. within ow_core/master_page.php you will need to declare your new master pages.
Ex: const TEMPLATE_GENERALPHOTO = 'generalphoto';  .
When you open the file you will see where to add those lines. Add lines for each .html file you have created.

3. within the controller of desired plugin you will need to assign custom master page for desired pages using:

Ex: OW::getDocument()->getMasterPage()->setTemplate(OW::getThemeManager()->getMasterPageTemplate(OW_MasterPage::TEMPLATE_GENERALPHOTO));

Let's say if I am to use my custom master page for sitename.com/photo/viewlist/latest  URL.
I will be editing:
File: ow_plugins/photo/controllers/photo.php
Function: public function viewList( array $params ){
Right after opening { of this function I will paste:


4. Enable DEV mode in config.php file to re-generate site cache.
Go to sitename.com/photo/viewlist/latest URL . You will see that now this URL is using a custom master page with a custom header image.

5. Disable DEV mode.


You will need to set custom master page for each function within controller where custom header should appear. So in addition to what I did above, I will also have to add same master page for  public function userPhotos( array $params ){  to show my custom html design for My Photos page.

And you need to do this with each plugin: Groups, Blogs and etc.

Once again this is not the best solution, I more then sure that if you research more you will find something easier then this.

And note: mod will be erased with platform + your template + photo plugin updates.
There are too many files involved. I would not perform this modification unless I was sure what I was doing and that I would be able to re-apply  my changes after updates.

Good luck =)
The Forum post is edited by Aliya Nov 25 '16
Aliya Team
Aliya Nov 25 '16
Topic was moved from Themes.
Kevin Nov 25 '16

Traveling this weekend- I will try it for just one of the plugins when I get back to see how much would be entailed after upgrades, as well as see visually if it is worth it;)
Darryl B Leader
Darryl B Dec 31 '16
After a long while of playing with js. I have found the one that works. You can add a different header image for each page, or remove it from specific pages. This method doesn't require code modifications, and will not be overwritten on updates. See the attached file for info.
  js change header.txt (1Kb)
Kevin Jan 1 '17
Wow. This will will be perfect for an idea I was thinking about for changing the Facebook like button code on different pages. Currently I have it in the footer code, and always uses the same page (https://mywebsite.com). This seems like it would handle the Like/Share buttons in footer of my pages, but assume I would need to add positioning code. Will try it later, and see the result.

$(document).ready(function() {
if(window.location.href.indexOf("user") > -1) {

<div class="fb-like" data-href="https://mywebsite.com/user" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
The Forum post is edited by Kevin Jan 1 '17
Kevin Jan 1 '17
Well tried replacing current Custom Tale code...

Original that works for footer:

<div class="fb-like" data-href="https://mysite.com" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>

Replaced with the following:


{if(window.location.href.indexOf("photo") > -1) {

<div class="fb-like" data-href="https://mysite.com" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>


Any ideas why same code does not work within the script?


The Forum post is edited by Kevin Jan 1 '17
Darryl B Leader
Darryl B Jan 1 '17
That won't work with the script.  I don't know about the fb likes, and shares, but I found this that may help you out. One is mentioning to leave the data blank, and that will default to the current page, by setting the data href it will use that url.

Of course this is way off the original topic, and should be a new thread.


fb developers

Here's one more about using an html5 version.
The Forum post is edited by Darryl B Jan 1 '17