I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
Related
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I was asking if the following is possible. I have a HTML5 article tag, with inside that a figure and figcaption tags. The caption is overlapping the image. The figure should be clickable, but I want some other links in the caption that linked to another page, like a categorie page.
How should my markup looks like.
Now I have the following, but than the a first a tag will be immediately closed after it's opening the a tag.
<li class="grid_12 blog-post">
<a href="#">
<figure class="post-thumb">
<img src="images/blog-thumb.png" alt="Post thumbnail">
<figcaption class="entry-post">
<span class="capitalize">Entry</span>
<h1 class="entry-title">
Fris. Responsive. Retina Ready.
</h1><!-- End h1 .entry-title -->
<ul class="entry-meta">
<li class="author">
By Casper Biemans
</li>
<li class="published">
On September 1, 2012
</li>
<li class="entry-categories">
In Digital Art
</li>
<li class="comment-count">
With 22 Comments
</li>
<li class="permalink">
<img src="images/permalink_icon.png" alt="Permalink post">Permalink
</li>
</ul><!-- End ul.entry-meta -->
</figcaption><!-- End figcaption.entry-post -->
</figure><!-- End figure.post-thumb -->
</a>
</li><!-- End li.grid_12 blog-post -->
Attempt 1
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active">Homeaaa</li>
<li>Profilefff</li>
<li>Messagesbbb</li>
</ul>
</div>
JSfiddle
I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.
This should be possible to be done without any JavaScript.
Attempt 2
The closest I've gotten to a working one is:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JSfiddle
But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...
Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of jQuery:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".nav-tabs li a").click(function() {
var li = $(this).parent("li");
var wch = this.getAttribute("href");
$(li).addClass("active"); //make current li active
$(li).siblings("li").removeClass("active"); //make others inactive
$(".tab-content div").removeClass("active"); //make all tabs inactive first
$(wch).addClass("active"); //activate our tab;
return false; //don't change URL
});
});
And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.
Hope that helped!
The page footer added as fixed icon based navbar. but when it come to display, naevbar converted to a grid layout. that is, three columns and two rows grid layout.
Following script I have used for footer nevBar,
<div data-role="footer" class="nav-footer" data-position="fixed">
<div data-role="navbar" class="nav-footer" data-grid="d">
<ul>
<li>H</li>
<li>M</li>
<li>A</li>
<li>T</li>
<li>S</li>
</ul>
</div>
</div>
but it render as follows.
<div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
<div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-a">...</div>
<li class="ui-block-b">...</div>
</ul>
</div>
</div>
Content of each li as follows.
XXX ==>
<li class="ui-block-a">
<a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-custom"></span>
<span class="ui-btn-text">H</span>
</span>
</a>
</li>
My output shows as two rows and three colomns grid. Please can you find the reason.
Check this out: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html
<div data-role="controlgroup" data-type="horizontal"> your items </div>
You have specify the classes on your li elements to tell how many columns you want
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-D">...</div> <--D here, column 4
<li class="ui-block-E">...</div> <--E here, column 5
</ul>
Default number of columns is three I guess, which is why the last two were pushed to the next row.