Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am using a CEWP-linked HTML file to generate a menu of links to other web-part pages. I want to use this same file in a CEWP on each of the linked pages. As an indicator of the user's location, I want to style the current page's link differently from the other links in the menu.

My understanding is, I can create a CSS rule defining a style for the current page's link by using a parent-descendant selector, i.e., if the page's id="Home" and the link's class="Home", then #Home .Home{font-weight:bold;} should get me what I need.

I'm thinking I must be able to assign an ID to a parent element on the web-part page so all the content therein is a "child" of the element and can be so addressed in a declaration. I'm wondering to which element on the ASPX page I should apply an ID. Alternatively, Would my ASPX page already have an ID I can address for styling?

I realize I might be coming at this issue from an unconventional direction, and I'm open to other methods. In addition, I am in a position of making an inconsistently locked-down installation of Foundation do what I want, but if I learn there is a "best practice" path to my goal, I can request the team in white coats implement a solution.

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

I would recommend to avoid using id for just css styling, especially such a general word as #current. Use a class instead: .current-page or something like that.

SharePoint renders classes and id for a current menu item in the server side. In your CEWP you don't have access to server side. One possible solution is to use an attribute selector with jQuery. Suppose you have a wrap div in your menu with class .my-cewp-menu.

$('.my-cewp-menu').find("a[href='currenHref']").addClass("current-page");

This has to be run when DOM is loaded. You can get the current page url (href) through javascript.

(function($) {
    $(document).on({
        ready: function() {
            var href = window.location.href;
            $('.my-cewp-menu').find("a[href='" + href + "']").addClass("current-page")
        }
    });
})(jQuery);

This code is just a simple example. It doesn't take possible window.location.hash (# in url) or possible relative urls (/subsite/my-page.aspx, or some-page.aspx) into account.

share|improve this answer
    
This isn't the method I'm currently using, but I've accepted this answer because I think it's more elegant and useful. It would allow me to add the function Anatoly has provided to my "general" .js file that I would theoretically be able link to in my MasterPage so it loads on all pages. Less code = Less maintenance, amiright? –  Pete Nov 7 '13 at 18:14
add comment

This is more of a general HTML/CSS question (except for the fact that you are using CEWP), however, while you are still here why don't you Export the CEWP and simply use a selector (e.g. id="current") and define that with the style for the active one, while changing which of the elements have the #current added on each page.

On the other hand the top navigation bar of SharePoint (based on ASP.NET Menu control) does this already.

share|improve this answer
    
The only I understand the HTML/CSS aspects of my issue, but I provided details about those aspects for general background, and so a more-skillful user might notice I could get what I want using a different method. –  Pete Jan 21 '13 at 19:16
    
If I understand the method, exporting and importing the CEWP would not change my situation. The imported CEWPs would be using the same linked HTML file, so setting an object with id="current" would make that object load as "current" on every web-part page using the imported CEWP. I understand I could use different HTML files with "current" applied to different objects, but that defeats the purpose of using one source file for multiple pages. –  Pete Jan 21 '13 at 19:22
1  
JavaScript client side to inject/modify the id/class or modify the pages in SharePoint Designer. –  Jesus Shelby Jan 21 '13 at 19:29
    
...or simply updating the CEWP on each page while setting the id="current" to respective item. –  C. Marius - MVP Jan 21 '13 at 20:39
    
@ C. Marius I wonder if I'm missing something... When you say "[update] the CEWP on each page...", I am receiving that as "make each CEWP use different HTML, either placed in the CEWP's rich-text area, or loaded from an external file using the CEWP's content link field." Am I understanding you correctly? –  Pete Feb 19 '13 at 16:41
show 1 more comment

Please know that I have selected Anatoly's answer, and only provided as an alternate method in the event such is needed...

My implementation of SP uses <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> on Webpart pages to surround the <table> containing the <WebPartPages:WebPartZone/> tags. I can target the content of everything placed in webparts on a Webpart page (like my menu code) by adding classes and/or IDs to this table tag:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <table class="Class1 Class2" id="Home">
  <tr><td><WebPartPages:WebPartZone/></td></tr>
 </table>
</asp:Content>

The elements in the CEWP containing my menu code are children of the ASPX page's <table ID="Home"> element. By assigning classes to each menu link corresponding to their target page, I can style them as the "current" link based on the current ASPX page's <table> ID.

An example of the selector & declaration, and rendered source code:

From the stylesheet linked in the ASPX page...

#Home .Home{font-style:italic;}

From the table on the ASPX page...

<table id="Home">

<!--CEWP's HTML-->
    <ul>
     <li>
      <a href="http://website.com" class="Home">Home</a>
     </li>
    </ul>
<!--End CEWP-->

</table>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.