[SOLVED] Changing header logo based on menu-parent

[RonnyK]

Does anyone know if there is a way to use the menu-parent as the trigger for the logo being displayed. In Banner-module you can pull a specific banner, but is that possible with the manu-parent as a variable. Also another option is welcome, as the work-around that isn't appreciated is creating a different template/css for every menu-parent.

So the only thing wished to change is the logo of the template, based on the menu-parent that is active/choosen.

Ronny

[cyberman]

Does anyone know if there is a way to use the menu-parent as the trigger for the logo being displayed.

Take this udt as trigger

http://wiki.cmsmadesimple.org/index.php ... y-position

Call udt before your logo and create a div like this

Code: Select all

<div id="{$root_page_hierarchy}">

Now you must only create a css for every menu-parent with logo as background picture .

[RonnyK]

Thanks Cyberman,

I already found that UDT, but didn't know exactly how to work with the div-id. Thanks for explaining.

Ronny

[Erbsenroller]

Erstmal vielen Dank für Eure schnelle Hilfe,

Zu Neophron's Idee:

du meinst also diesen Tag im Quellcode der einzelnen Seiten angeben und dann im CSS die einzelnen Pfade der header angeben?! Aber wie würde dann das Pendant zu {global_content name='header_home'} im CSS aussehen? Wenn ich die 'global content'-Funktion im CMS benütze, gebe ich doch im Normal doch einmal Content ein der dann auf jeder Seite gleich ausgeworfen wird - also eigentlich genau das gegenteil von dem was ich mit den verschiedenen Headern will? 

Zu Cyberman:

Ich habe deinen Artikel gelesen, werde aber leider nicht ganz schlau draus  meine PHP- und codierungs-Fähigkeiten halten sich in grenzen. Bedeutet das, dass man diesen Hierarchy-position-Tag in das Template einbaut und dann den in den Quellcode der Seite; dann im CSS - abhängig davon wie die ID ausfällt - dann den Pfad des Bildes bzw. die Eigenschaften definiert?! Wie würde die CSS-Eigenschaft in Abhängigkeit von der ID denn definiert/beschrieben?

Tut mir leid aber ich komme immer etwas durcheinander mit den drei Anpassungsbereichen html-Seite, Template und zugehöriges Stylesheet, bzw. wie der Informationsfluss läuft.

Danke für Eure Hilfe, 
Erbsenroller

[KO]

Have you checked content tag called "section image". I think that is what you need.

Br,

Keijo

[RonnyK]

Erbsenroller,

If you don't mind, I'll answer in English, as I speak/read German, but writing is something else.

If you want different logo's based on the page-name, you can change the logic in the template to something like:

First create a UDT, named "get_root_page_alias", or something else, but call it in the template with the given name:

Code: Select all

global $gCms;
global $smarty;

$manager =& $gCms->GetHierarchyManager();

$var = 'root_page_alias';
if( isset($params['assign']) && $params['assign'] != '' )
{
  $var = $params['assign'];
}
$result = "NO RESULT";
$thisPage = $gCms->variables['content_id'];
$currentNode = &$manager->sureGetNodeById($thisPage);
while( isset($currentNode) && $currentNode->getLevel() >= 0 )
{
    $currentContent =& $currentNode->getContent();
    $result = $currentContent->Alias();
    $currentNode =& $currentNode->getParentNode();
}
$smarty->assign($var,$result);

In the template:

Code: Select all

   {get_root_page_alias assign="mainpage"} 
   <div id="header">
     <div id="{$mainpage}">
     </div>  
   </div>

In the CSS, you can call all different CSS based on the given variable, say page is "home" or "news", would lead to CSS, like:

Code: Select all

div#home {
/* you can set your own image here */
   margin-left: 28%;         /* set image similar position */
   background: #FFFFFF url(images/home.jpg) no-repeat 15px 25px;
   height: 100px;             /* adjust according your image size */
}

div#news {
/* you can set your own image here */
   margin-left: 28%;         /* set image similar position */
   background: #FFFFFF url(images/news.jpg) no-repeat 0px 1px;
   height: 100px;             /* adjust according your image size */
}

Ronny

[Erbsenroller]

Hi RonnyK,

That worked  Thanx a million! It did generate a problem with the layout though. Some parts of the content overlay the headers but that I can work out.

Thanx again for your help,
Erbsenroller

[Erbsenroller]

Hi RonnyK,

now there is a tiny new problem. I've created different headers and set the variables in the css. It works fine for regular sites but it doesn't work with sub-sites. Meaning: sites that you set a 'parent'-site for, automatically takover the header of the parent-site even if you set a different header in the css. For example:

div#the-world {
background-image: url(uploads/images/header/header_asia.jpg);
}

div#movie {
background-image: url(uploads/images/header/header_movie.jpg); 
}

'the-world' is the parent-site for 'movie' and 'movie' automatically gets the header of 'the-world'. Do I have to set something like:

div#the-world_movie {
background-image: url(uploads/images/header/header_movie.jpg); 
}

to make the CSS recognize it? 

Please help. Thanks,
Erbsenroller

[RonnyK]

Erbsenroller,

I don't get your problem? The variable that is being passed id the name of the page opened. So if you open a page called "something", the varaible gives back something and the corresponding CSS-styling is given. If you open a page within a sub-site, you still have a page that's opened and so a variable that is available to style. WIf you check the name of the page opened in the Address-bar, you'll see the name of the CSS you need to style.

Ronny

[Erbsenroller]

Hi Ronny,

I don't really get it either because it should work. If I create a site called 'something' and set the CSS to

div#something {
background-image: url(uploads/images/header/header_something.jpg);
}

it shows me the right header for this site. But if I create 'sub-sites' of 'something' called 'test' for example - so 'something' is parent of 'test' - and I set the equivalent line in the CSS to

div#test {
background-image: url(uploads/images/header/header_test.jpg);
}

'test' still shows the header of 'something'. I double-checked the page name and the adress-bar shows 'page=test'. If I don't set a header for 'something' at all in the CSS, all sub-sites show no header at all.

It's like the CSS definitions of 'something' are automatically 'handed-down' to all sub-sites?!

Any ideas why and how to prevent it?
Erbsenroller

[cyberman]

But if I create 'sub-sites' of 'something' called 'test' for example - so 'something' is parent of 'test' - and I set the equivalent line in the CSS to

div#test {
background-image: url(uploads/images/header/header_test.jpg);
}

'test' still shows the header of 'something'.

Please read info text for suggested udt  .

Gets the hierarchy-position of a pages very top parent.

If you want to use a special header for every page you can use a variable like {$page_alias} instead {$mainpage} ...

[Erbsenroller]

Well, again: thank you very much Cyberman! 

Thats just how the cookie crumbles. You miss one tiny thing and it messes up your whole construction.

So thanks for taking a look again,
Erbsenroller

[moonie]

Is there any chance to modify this UDT so it calls only the parent, and not the root parent? A task I cannot figure out on my own..

I'm using a 3level hierarchy and would like the 3rd level children to grab the header image of their parent, and not their root parent.. It would be a bit too much to use $page_alias and apply a style to ALL my content pages instead of just the 5 parents I use..  *lazy*

[jasminetea]

Hi Ronnie, Cyberman, Erbsenroller and KO,
Thanks for posts. Being new to CMS as well as css, it was great and managed to work through it.
My Problem: I would like to change two pictures that are dependent upon the menu parent. Can this be done?

1. What do I have?
(a) template based on "Top Simple navigation + left subnavigation + 1 column"
CSS
(b) Layout: Top menu + 2 columns
(c) Navigation: Simple - Horizontal
(d) Navigation: Simple - Vertical
(e) Changing Photo [CSS based on the given variable]

UDT,
(f) named "get_root_page_alias"

Currently, there is a graphic title that changes at the top of the right-hand navigation.

2. What I would like.
I would like that not only does this graphic title change above the right hand navigation but also to have a representative photo changing underneath the navigations

3. What I have done?
Using the previous posts, I have got as far as being able to insert the same image above and below the navigation but not managed to have two different images.

Can you give any tips or suggestions for ways forward?

Looking forward to hearing from you.

JT

[Dr.CSS]

Not sure how all this works, UDT, but if you use to diff. div ids or classes you may get it to work...