From time to time I stumble over the following issue, that might be easy to solve. But maybe I simply don't get it.
In a XPage treeNode, e.g. used in xe:navigator of xe:applicationLayout (pageTreeNode, placeBarActions, etc.) I wonder how to influence the styleClass property so that I can influence the "selected color".
<xe:this.titleBarTabs>
<xe:pageTreeNode label="Label Acc1"
selection="/Admin/Acc1/.*" page="/xpAdminAcc1.xsp"
styleClass="bg-info">
</xe:pageTreeNode>
<!--- ... -->
</xe:this.titleBarTabs>
In this example the styleClass 'bg-info' would be assigned always to the titleBarTab. That's the tab's background. For selected tabs the class "active" gets assigned automatically: class"bg-info active".
Is there a way to define, e.g. class bg-primary to be used for active?
I'm using the bootstrap3 theme. This is the HTML generated code. As you can see, the only difference is that the class of the activated menu item contains the class "active":
<div class="col-sm-12 col-md-12 applayout-titlebar-tabsarea" role="navigation">
<ul id="view:_id1:_id2:appLayout_tb" class="nav nav-tabs applayout-titlebar-tabs" role="tablist">
<li class="menu-item active">
<a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc1.xsp" class="bg-info active">Label Acc1</a>
</li>
<li class="menu-item">
<a role="tab">Label Acc2</a>
</li>
<li class="menu-item">
<a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc2.xsp" class="bg-info">Label Acc2</a>
</li>
<!-- -->
If you add a stylesheet to your application and specify the styling you want to apply for that class, then because that's at application level as opposed to server level, the standard rules for CSS (Cascading Style Sheets, so styles cascade down and get extended / overridden) will apply and the application level will take precedence. Just remember to add the application stylesheet as a resource on your Theme resource / layout Custom Control / XPage. XPage is least preferable, because it needs adding in multiple places.
The easiest method is to use Firebug or other inspection tool, select the element, find the CSS that's setting the current theme, copy and paste that into your application's stylesheet and override the settings accordingly.
Here's an example with a slightly different element:
My CSS is:
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
background-color:red;
}
Related
I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
i am using the Mittwald Typo3 Starterkit (Online-Demo). I figured out that this Starterkit uses the Typo3 fluid directory helper. How can one specify a specific CSS class for an active/selected page (I want to highlight the current page in the menu)?
Until now, I realised my Menus using Typo3 (HMENU/TMENU/ACT) but with this fluid directory helper I am completely stuck.
According to the Fluid Documentation there might be 2 ways:
classActive/classCurrent (string)
linkActive/linkCurrent (boolean)
The original code is:
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
My try which did not work (class "current" did not appear, if condition linkCurrent is not executed):
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<f:if condition="{linkCurrent}">
<li class="current">
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:if>
<f:else>
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:else>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
Does anyone have an idea how this fluid directory helper works? Unfortunately, there are few examples around. Thank you a lot!
Note, the ce:menu.directory ViewHelper is not the same as the linked VHS Menu DirectoryViewHelper.
The ce: prefix is usually used by FluidStyledContent ViewHelpers, that also have menu viewhelpers.
If you want to know what properties each page row has available, you should use the f:debug ViewHelper to inspect the variable.
<f:debug>{page}</f:debug>
I have not tried that ViewHelper, ever, but it looks like it does not insert any information about, if it's the current page or if it's "active" (in rootline) like you're used to from HMENU content objects.
You might want to replace that ViewHelper with the VHS extensions menu ViewHelper.
You can use the following snippet to add a class to the active page,
I used an inline if to compare the data.pid with the page.data.uid here.
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<!-- new inline if here -->
<li{f:if(condition: '{data.pid}=={page.data.uid}', then: ' class="current"', else: '')}>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]
I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation
Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.
The original markup is like so (Taken from the Designer Tools Zone [Navigation]):
<div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
<nav>
<ul class="menu menu-main-menu">
<li class="first">
Work
</li>
</ul>
</nav>
</article>
</div>
What I need is to customize the classes on the <ul> and <li> elements, really.
If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.
But is this even possible?
<li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
<nav> and top <ul> elements are rendered by Menu shape
(Core\Shapes\Menu.cshtml)
<a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)
If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.
What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?
I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.
You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)
Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:
<div data-role='header' data-position='inline' role='banner' data-theme='f' >
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>
<div data-role="navbar" data-theme='c'>
<ul>
<li><a href="" >
Camera
</a></li>
<li><a href="" >
Wave
</a></li>
<li><a href="" >
Lock
</a></li>
<li><a href="" >
Pencil
</a></li>
<li><a href="" >
Star
</a></li>
<li><a href="" >
Friends
</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- header -->
Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;
For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.
Use data grid "a"
Use the below one
<div data-role="navbar" data-grid="a">