Hi there folks,

I'm using the Simple Section Navigation widget to display Parent Page (section) specific menus. ie. When viewing a top level page that has children or one of the children - the page menu widget only displays links to that parent and the children/siblings. This works great.

What I now need to do, is change the style of other page elements based on the same logic. ie. When viewing a particular parent page or any of its child pages -> the side menu only shows this parent and sub-pages (currently working) AND a widget's background color changes... (or any given DIV has its style changed)

My only real attempt at this so far was to add this "test code" into style.php
Of course "is_page(77) won't give the parent/child relationship I'm looking for. It was more of an attempt at a "proof of concept". Unfortunately it proofed to be a poor concept

/* CUSTOM WIDGET COLORS */

<?php if is_page(77) { ?>

$title = 'div.text-3 {background: #008400;}';
echo $title;

<?php } ?>

So, any ideas would be greatly appreciated. even from novices like myself

Juggledad, if you're able to help I can offer more meager incremental payments

Thanks,
Jaxon

what is the url of an example page?
please explain what you are looking to change on the page

PM sent, thanks Juggledad!

ok, I think I know what you are trying to do and here is a possibe solution. Lets take this case, you have a couple pages and one is 'Directions' with child pages of North, South, East and West. You also have a page MEals with child pages of breakfast, lunch, and dinner, and you are using the pages widget. This is what the HTML might look like

<!-- Left Sidebar -->
<td id="left">

<div id="pages-2" class="widget widget_pages">
	<div class="widget-title"><h3>Pages</h3></div>
	<ul>
		<li class="page_item page-item-50"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=50" title="archive’ss">archive’ss</a></li>
		<li class="page_item page-item-1189"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=1189" title="Calendar">Calendar</a></li>
		<li class="page_item page-item-3"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=3" title="Directions">Directions</a>
			<ul>
				<li class="page_item page-item-7"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=7" title="East">East</a></li>
				<li class="page_item page-item-42"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=42" title="North">North</a></li>
				<li class="page_item page-item-1192"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=1192" title="South">South</a></li>
				<li class="page_item page-item-5 current_page_parent"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=5" title="West">West</a></li>
			</ul>
		</li>
		<li class="page_item page-item-2"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=2" title="Meals">Meals</a>
			<ul>
				<li class="page_item page-item-95"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=95" title="Breakfast">Breakfast</a></li>
				<li class="page_item page-item-44"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=44" title="Dinner">Dinner</a></li>
				<li class="page_item page-item-40"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=40" title="Lunch">Lunch</a></li>
			</ul>
		</li>
		<li class="page_item page-item-648"><a href="http://192.168.48.99/~paul/zenofmud/?page_id=648" title="splash">splash</a></li>
	</ul>
</div>
</td>
<!-- / Left Sidebar -->

but that will show everthing and you only want to show the child pages when you are on them. Here is the CSS inserts that will make it all work

.widget_pages li.page-item-2 ul {display:none;}
.widget_pages li.page-item-3 ul {display:none;}
.widget_pages li.page-item-2.current_page_item ul, .widget_pages li.page-item-2.current_page_ancestor ul {display: block !important;}
.widget_pages li.page-item-2.current_page_item, .widget_pages li.page-item-2.current_page_ancestor {background: green;}
.widget_pages li.page-item-3.current_page_item ul, .widget_pages li.page-item-3.current_page_ancestor ul {display: block !important;}
.widget_pages li.page-item-3.current_page_item, .widget_pages li.page-item-3.current_page_ancestor {background: blue;}

the first two lines hide the children menus,
the next two lines will display the children of page 2 (Meals) and color the block green when you click meals or any of it's children.
The last two lines will display the children of Directions and color them blue when any of them are selected.

Hopefully this is what your looking for.

Ok... the thing is I really think I need a php solution to this. Like I said in the PM, I will actually need to change more than just the widget backgrounds, so I don't think I won't be able to accomplish this with just menu html/css. This is my faux php idea:

if (current_page = "directions" OR children of "directions"){
$widget_color = #000000
$header_background = #777777
$footer_background = #434343
}

/* THEN I COULD CALL THESE VARIABLES IN A STYLESHEET? */
echo 'div.text-8{ background:' $widget_color ';}' ;
echo 'div.header{ background:' $header_background ';}' ;
etc.

Ignoring the ridiculous syntax - is something like this possible?

Thanks for your help by the way!

you can't use variables in a style sheet. You CAN do it all in CSS, it will just be a big style sheet.

The only reason you would need to put it in the code is if you were going to be adding new sub pages in all the time. In that case you would have to edit css.php and put your code there that would create the css that is needed for each page (or you could setup one page's css and then just duplicate it in the css inserts.)

Hmmm... A couple more thoughts. First, my reasoning for wanting to use php is that I'm going to need to change 4 page elements' backgrounds based on the current page family (like in the old version of site that I PM'd). It just seems way more straightforward and versatile to do something with css variables and if statements - but I could certainly be wrong

If I were to go with the css.php file as you suggested, could I do something along the lines of the pseudo code in my last post? I guess the main thing that I really don't know is, can I query what page is being viewed from css.php? As in something like: IF page="Directions" OR children of "DIRECTIONS"

Or is that totally off base?

BTW the css you posted for the menu is really nice. Very simple and logical. You have a great mind for this

Yes you could do that. You could check to see if you were in one of those categories, then get the page id and build the CSS with that info.

PM sent... Will update forum with results later.