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.
Related
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;
}
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
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]
In Orchard 1.3.10 when I create a list it gets assigned a permalink such as /people. When I add a person to the list and go to /people the person does not display. I see
When I add a widget to display people the person displays.
Am I doing something wrong, or is this Orchard working as designed?
Using the shape tracing module I see this In my content zone:
<div class="zone zone-content"> <div class="content-control">
<div class="manage-actions">Edit</div>
<article class="content-item list">
<header>
</header>
</article>
</div>
</div>
Creating a new site fixed my issue.
On my debug site I'm able to work around the issue by changing my list sort order, but not on my real site.
I filed a bug here: http://orchard.codeplex.com/workitem/18421
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">