Forum
can't figure out how to style subpage navigation links differently to ancestor p...
The site that I'm working on has some static navigation and some that should be generated dynamically, using perch admin but I can't figure out how to style it in the way that the html pages display: This is demo html page: https://artbyrt.com/rt/1uo-ver2-test/1uo_docs/whoWeAre.html Here is the html navigation markup:
<aside class="portletNav" role="navigation">
<ul class="portletNavBlk">
<li class="portletNavLink"><a href="#">About our Congregation</a></li>
<li class="portletNavLink"><a href="#">About Unitarian Universalism</a></li>
<li class="portletNavLink"><a href="#">Membership</a>
<ul class="subPortletNavBlk">
<li class="subPortletNavLnk"><a href="#">Steps to Membership</a></li>
<li class="subPortletNavLnk"><a href="#">Pledging</a></li>
<li class="subPortletNavLnk"><a href="#">Governing Docs</a></li>
<li class="subPortletNavLnk"><a href="#">Members Page</a></li>
</ul>
</li>
<li class="portletNavLink"><a href="#">Our Campus</a></li>
<li class="portletNavLink"></li>
</ul>
In my template page (master page), I used this template:
<aside class="portletNav" role="navigation">
<?php
perch_pages_navigation( array(
'from-path' => '/What-We-Do',
'levels' => 2,
'hide-extensions' => false,
'hide-default-doc' => true,
'flat' => false,
'template' => 'portletNav-IntrnlPg.html',
'include-parent' => 'true',
'use-attributes' => 'true'
) );
?>
</aside>
The 'portletNav-IntrnlPg.html' template is identical to the 'item.html' navigation template. Which I'm attempting to style each nav item using direct-child style syntax as per (since I can't figure out how I might use the classes specific to subnav items):
.portletNav > ul {
...
}
.portletNav > ul > li {
...}
.portletNav > ul > li a{
...
}
.portletNav > ul > ul > li{
...}
.portletNav > ul > ul > li a {
...
}
.portletNav > ul > ul > li a:link{
....
}
...etc. This CSS works with the html page (is demo-ed in link above) but doesn't work with Perch. I'm scouring the documents and forum but haven't found anything that goes to the heart of this issue yet. Thanks for your suggestions. p.s. I'm not great with php syntax, so would really appreciate layman's language ....
How is the HTML different between the two?
Hi Ruth
Take a look at this page in the docs under "Styling navigation". You will need to load two templates – one for the top level html elements and the next for the the sub level html elements. e.g:
Perch won't get in the way of your original html and css so there should be no need for changing your original templates.
Hope this helps get you on your way.
Jon
Still no luck.
I've added styles for Nav and subnav and the two template files in array as per above. But I can't seem to figure out how to let Perch understand the Nav-subNav pattern that I need. When I create a page that is a child of the top Folder (1st Level to 2nd Level) and then another that is a sub-page of that child page (2nd Level to 3rd Level) , Perch seems to assign all the sub-pages as equal to parent. Navigation pattern should be the same on every page of the specified folder. There are 1st level nav styled and 2 level sub-nav styled and inset but none of the 2nd level CSS styling is being honored, yet the 1st level navigation links are being assigned 2nd level class names. I've made some screen shots to demonstrate: Here's the link: link to screenshots In the pattern that is being generated by the CMS in html source, there is no level below the 1st level, even though in the control panel the 2nd level is visible, as well as in the breadcrumbs... but not in the page source.... So, I can't really can't understand what Perch is doing. I've given the <ul> and <li> s in both the parent and child navs their respective CSS class names in the template files and I don't know if that's causing the problem but removing these classes names, removed all styling.
Here's a selected pattern that I should be getting
What We Do (top folder)
Social Responsibility Council (1st Level Nav)
Global Justice WG (2nd level subnav)
Poverty Action WG
Refugee WG
.... Ministry & Program Teams (1st Level Nav)
Denominational Affairs (2nd level subNav)
Adult Learning......
I have now finally figured out how to assign CSS to the regions that govern navigation. However, it isn't true, I think, that html/CSS pages perform similarly to Perch CMS / CSS pages. I found that I had to really push the cascade and specificity to achieve the styling of my navigation when passing through Perch. Specificity to the degree of assigning styles to * (universal element) in order to achieve required styles.... this really doesn't feel right but not sure how to achieve otherwise....
The HTML that you get from your templates with Perch should be exactly the same as if you'd created it by hand, so the CSS should be the same too.
I know... but for whatever reason, the specificity of CSS needs to be far more specific. Here's the HTML output for .html page ###HTML for .html page
Here's the CSS for that section in the .html page
In the .php page the html output is similar... but the 1st level nav is assigned a folder...
But, I was not able to use the same CSS and in the end, created much more complex styles in order to enable the styling I needed...
Selected CSS style for sub nav below:
I'm slowly figuring out how Perch works and I really like it but wondered at how CSS gets parsed because it doesn't seem to have the same behaviour I learned to expect.
Perch doesn't touch your CSS, and the markup should be exactly the same as if you wrote it by hand.