1

I have a team site and I made some changes in master page as below:

  1. Moved top menu links and search box below page heading
  2. In place of top links I placed an image called image1 and in place of search box I placed another image called image2
  3. Replacing SharePoint logo with my own logo and increasing its size

I did all this using DIV/CSS. Now I am no designer, not even close. So I had to do a lot of trial and error before every thing looked ok except this one issue which now I am facing and i.e. when you click on "new document" link which opens a dialog box where you can upload document, that window is also showing those logos (which I mentioned in point 2 above)

How can I get rid of that? I was thinking that if somehow I can find out if the dialog is open then I can hide those images using CSS/Jquery?

Here's partial code to given you and understanding where I have wrote code. My divs are named "mydiv" and "mydiv2" while rest of the code is SharePoint's default:

<div id="WebPartAdderUpdatePanelContainer">
    <asp:UpdatePanel
        ID="WebPartAdderUpdatePanel"
        UpdateMode="Conditional"
        ChildrenAsTriggers="false"
        runat="server">
      <ContentTemplate>
        <WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
        </ContentTemplate>
      <Triggers>
        <asp:PostBackTrigger ControlID="WebPartAdder" />
     </Triggers>
    </asp:UpdatePanel>
  </div>
</SharePoint:AjaxDelta>

        </div>
        </div>

        <div id="s4-workspace" class="ms-core-overlay">
<div id="mydiv" style="float:left;border:thin;border-style:none;width:210px;position:absolute; padding-top:20px;padding-bottom:0px;padding-left:200px;z-index:1;">
<img src="/images/image1.jpg" width="65%" height="65%"></div>
<div id="mydiv2" style="border: thin none currentColor; width: 250px; right:600px;position:absolute; padding-top:20px; padding-bottom:10px;float: right;z-index:1;">
<img src="/images/image2.jpg" width="800" height="56">
</div>

        <div id="s4-bodyContainer">

        <div id="s4-titlerow"
            class="ms-dialogHidden s4-titlerowhidetitle">

        <div id="titleAreaBox"
            class="ms-noList ms-table ms-core-tableNoSpace">
        <div id="titleAreaRow"
            class="ms-tableRow">

enter image description here

2

You can add the CSS class ms-dialogHidden to any custom elements to prevent them from being shown in dialogs.

Here is a blog post about it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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