Wrap DNN page separator in span with aria-hidden="true"? - dotnetnuke

The default page separator in DNN is the ">" character. It looks nice but screen readers read it out as "greater than." It's not a deal breaker but it sure gets annoying page after page.
Is it possible to wrap that separator in a span with aria-hidden="true"?

I guess you are talking about the breadcrumb control in the skin file. You can change the separator there using any HTML code, but you have to HTML-encode the value. When you look at the "inner.ascx" file of the Xcillion skin, you find
Separator="<img src="/Portals/_default/Skins/Xcillion/Images/breadcrumb-arrow.png" alt="breadcrumb separator">"
as an example. Therefore, the solution should be
<dnn:BREADCRUMB ID="dnnBreadcrumb" runat="server" CssClass="breadcrumbLink" RootLevel="0" Separator="<span aria-hidden="true"> > </span>" HideWithNoBreadCrumb="true" />

Related

Not able to click and element using Selenium

I am trying to automate 'Tableau' login screen and download reports flow. Everything works fine till I reach the 'Download' button. The first problem is I am NOT able to right click on the Download button and do an 'Inspect' in Chrome which is weird. I somehow am able to find the xpath by going through the whole page. When i try to click it I get "Caused by: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/div[2]/div[2]/div/div[3]/div[4]/span[1]"}".
The code that I am using is mentioned below:
String xPath = "/html/body/div[2]/div[2]/div/div[3]/div[4]/span[1]";
(new WebDriverWait(driver, 20))
.until(ExpectedConditions.elementToBeClickable(By.xpath(xPath)));
driver.findElement(By.xpath(xPath)).click();
The page layout is like this from where I am picking the xpath
<div class="tabToolbarButton tab-widget" style="-webkit-user-select: none; -webkit-tap-highlight-color: transparent; width: 77.4px;">
<span class="tabToolbarButtonImg tab-icon-download"></span>
<span class="tabToolbarButtonText">Download</span></div>
<span class="tabToolbarButtonImg tab-icon-download"></span>
<span class="tabToolbarButtonText">Download</span>
</div>
Any help would be appreciated. What could be the reason for not able to 'Inspect'??
If you are not able to right click on the element, you can still right click anywhere on the page and select Inspect this element. You can then grab little binocular icon(tool tip message-select an element in the page to inspect it) and point it to the desired web element to check the xpath.
1st thing you need to check if you are writing xpath correctly. On a chrome you can do that without any plugin. On the developer window(same window which gets open when you select Inspect Element option), look for Console window and write your xpath as mentioned below and hit Enter.
$x("Write x path here")
for e.g. xpath for google search box
$x("//input[#id='lst-ib']")
I'm not sure why you writing absolute xpath. Its a bad practice. You can write x path for Download button in better way.
e.g.
(//span[#class='tabToolbarButtonText'])
I got the problem. So it seems the web page I was trying to automate has used frames. That is why even after providing the xpath the element was not getting clicked. I had to use 'switchTo.frame' in order to get the frame in focus and then I was able to click the element. Thanks for all the responses.
What I have still not understood is that why I was not able to inspect the element directly but that is a different question.

IBM WCM Plugin:RequestAttribute is not working, when used on published site ( only preview is working)

I've made a menu component to create tabs which contains rendered results from another menu component.
The internal component is using Location/Site Areas (set by Query string) as a criteria and in the main component I use [Plugin:RequestAttribute(...)] to set the Site Area I want the content from in specific tab. In order to do so, I put the internal component inside [InContext(...)][/InContext] tags - in this case Result design code of the main component is:
title="[Property field="title"]">
[Plugin:RequestAttribute key="year" mode="set" value="[Property field='title']"]
[InContext context="autofill"]
[Component name="omantel_en/investors/financial snapshots/financial statement menu" startPage="" resultsPerPage=""]
[/InContext]
</div>
The header ends with <div class="tab selected", while separator is set as <div class="tab" which in the end construct a valid HTML structure (of that I'm sure).
Tabbing is held by javascript I put in the beggining of header and works fine.
Everything works fine while using Preview option - content is generated properly, I can even use Preview on site I actually want the component to be used on and this will give me desired result.
The problem occurs when I put the main menu component tag in published Article. Then it shows only tabs, without any content from the inner component. It looks as if the [Plugin:RequestAttribute(...)] tag that is used as substitute for Query string stops working.
I already tried to put the main menu component tag (in the actual Article) inside [InContext(...)][/InContext](with all of possible options) but it gave no good result. I'm kind of new in using IBM websphere~.
Any suggestions?
Actually it was a problem with Libraries - I simply put wanted content in single library and now it works fine.

Drupal 7. How do I change the CSS of the node when I click "Read More?"

I'm creating a custom theme (as a n00b). Basically, I display content on the main page as small div blocks.
my node.tpl.php looks something like this:
<div class="content-block">
default node.tpl.php stuff here
</div>
This works OK on the front page. However, when I click "Read More," to take me to the full article page, /node/[nodeId], obviously, it still shows as the little CSS content-block div.
I'd like to show the full article using a different CSS class. What's the best way to do this?
Yes, there are some best ways to accomplish that.
First of all I am not sure, whether you are using separate front page tpl or not. If not then please try to use page--front.tpl.php. Where you can provide your desired format to create the proper front page. Why this is needed, cause you won't need to modify the node.tpl.php file. So inside this front tpl file you can put your desired code.
<div class="content-block">
default node.tpl.php stuff here
</div>
Also you can use the Panel module to create a front page. So you won't be needed to modify the nope tpl file. Always try to avoid modifying tpl file. Panel module makes it easier.
Secondly, you should not touch the node.tpl.php file. Once you will modify the file, you won't be able to re-define as default. So keep that as it is and revert back it to the default file. Now if you send some article link, it won't break.
So this is it. If this helps you, then please like :)
Keep Drupalizing :)

How do I make the whole of a DNN 7 Container/HTML Module a link?

I have a DNN skin that has some nice containers. I can drop an HTML module onto the page and apply the container to it. I can put a link in the content of the HTML Module, but what I would really like to do is make the whole container/module area a link to another page - in effect as if it were a great big button. How do I do this?
Of course as soon as I posted the question I found a way, but would still be interested to know if this is the "right" way or even a "good" way.
My solution was to take a copy of the container .ascx and add an "onlick" to the outer DIV, which in turn uses JQuery to locate the first tag and to navigate to the href.
<div class="Container-1 Container-1-color1"
onclick="window.location.href = $('a:first',this).attr('href')">
Note: Use window.location.href, not JQuery .click() or .trigger('click') as this creates an infinite loop.
I then added some CSS to show that an action was available when the mouse was over the container:
.Container-1:hover
{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
border:1px solid gray;
}

Liferay: Showing Related Assets for Calendar Event in the list page

I'm working to customize liferay's Calendar portlet and have created a hook for this.
I want to show all the "Related Assets" associated with a Calendar Event directly in the list page itself where all the Events are displayed instead of the Event's detail view page.
Currently liferay shows the "Related Assets" only when we click on the Event to view the details of that Event.
Can anyone help me?
Environment: Liferay 6.1
Thanks a lot
Sabrina
I assume you already have liferay's source code and you know how to create a hook.
The JSPs you would be modifying would be in this path:
portal-web/docroot/html/portlet/calendar
So here are some steps to help you solve your query:
You need to modify the event_iterator.jspf: row.addText(event.getTitle(), rowURL);
You have to adjust the following code taken from view_event.jsp in event_iterator.jspf.
<%
AssetEntry layoutAssetEntry = AssetEntryLocalServiceUtil.getEntry(CalEvent.class.getName(), event.getEventId());
%>
<%-- <liferay-util:buffer> is a tag which stores all that is written inside
its body in a single variable string, in this case "relatedAssetsLinksBuffer"
--%>
<liferay-util:buffer var="relatedAssetsLinksBuffer">
<c:if test="<%= enableRelatedAssets %>">
<%=event.getTitle() %>
<div class="entry-links">
<liferay-ui:asset-links
assetEntryId="<%= layoutAssetEntry.getEntryId() %>"
/>
</div>
</c:if>
</liferay-util:buffer>
Now the line in step-1 becomes: row.addText(relatedAssetsLinksBuffer, rowURL);
I have not tried this but I think it would work or will atleast give you some help in solving your query.
Tip for Hooks (might be useful in future):
Liferay follows a convention in storing its JSPs, so for custom-jsps Hook (i.e. a hook created for modifying liferay's JSP) you just need to search for that particular JSP & modify it.
For Eg: You wanted to modify the first page of calendar portlet. So liferay portlet's first page is always view.jsp located in the folder with the same name as the portlet-name in this case "Calendar" and view.jsp will contain some tags like <%# include /> or <liferay-util:include /> which would include other files to show the content. So you can always start with a view.jsp and navigate ahead. By the way the names of the JSPs are also most of the time self-explanatory.
Hope this helps.

Resources