Logo 
Search:

Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

ows.css modification

  Asked By: Caitlin    Date: Dec 27    Category: Sharepoint    Views: 1628

I made a copy of the ows.css and put it somewhere outside of the
_layouts directory. I have some tabbed navigation I created that I
want to replace the stock top level navigation with. I noticed that
the site I created to test this on calls the ows.css. So I deleted
that stylesheet ref and pointed it at my new one which is basically
the same ows.css with my divs for this #header added to it. I went
ahead and put the 5 gifs I am using for this navigation in the
1003/images folder and my css points to them.
But I still don't see the images (buttons). Is doing it this way a
no-no? I plan to have it made into a proper webpart, but want to try
out a few things before I send it to our developers.

On my page I deleted this code:
<SPSWC:CategoryNavigationWebPart runat="server" id="HorizontalNavBar"/>

And added this header div:
---------------------------------------------------------------------
<div id="header">
<!--webbot bot="PurpleText" PREVIEW="This is just where these links
currently point to on /devmeckweb/default.aspx" -->
<ul>
<li id="current"><a href="../../../default.aspx">Home</a></li>
<li><a href="../../../News/default.aspx">News</a></li>
<li><a href="../../../SiteDirectory/default.aspx">Departments</a></li>
<li><a
href="http://external_web_page/cohr/myhr/index.htm">MyHR</a></li>
<li><a href="../../../Forms/default.aspx">Forms</a></li>
<li><a href="../../../Topics/default.aspx">Topics</a></li>

</ul>
</div>
----------------------------------------------------------------------------


The Code I added to my ows.css is:

#header {
float:left;
width:100%;
background:#DAE0D2 url('_layouts/1033/images/tab_nav/bg.gif')
repeat-x bottom;
font-size:93%;
line-height:normal
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url('_layouts/1033/images/tab_nav/left.gif')
no-repeat left top;
margin:0;
padding-left:9px; padding-right:0; padding-top:0; padding-bottom:0
}
#header a {
display:block;
background:url('_layouts/1033/images/tab_nav/right.gif')
no-repeat right top;
padding-left:6px; padding-right:15px; padding-top:5px;
padding-bottom:4px
}
#header #current {
background-image:url('_layouts/1033/images/tab_nav/left_on.gif');
}
#header #current a {
background-image:url('_layouts/1033/images/tab_nav/right_on.gif');
padding-bottom:5px
}
---------------------------------------------------------------------

Share: 

 

4 Answers Found

 
Answer #1    Answered By: Joanna Dixon     Answered On: Dec 27

my opinion - you butchered it too much.

that aside:

try changing:
_layouts/1033/

to:
/_layouts/images/

let me know

 
Answer #2    Answered By: Justine Barrera     Answered On: Dec 27

No that didn't work Victor. But thanks for the input.

 
Answer #3    Answered By: Sharonda Mcfarland     Answered On: Dec 27

Wait, did you mean:
Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\IMAGES
??
I was just assuming that to get stuff into the virtual directory
/_layouts they should be under
Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\LAYOUTS
somewhere...

 
Answer #4    Answered By: Cory Brooks     Answered On: Dec 27

I was talking about the way you reference it in your code.

When I use default "images" folder  for storing images, which is located (by
default) in:

C:\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\IMAGES

and I have to reference that location within portal or any code, I use:

/_layouts/images/

syntax.

I could be wrong, here, but it works well for me.

 
Didn't find what you were looking for? Find more on ows.css modification Or get search suggestion and latest updates.




Tagged: