erazed


Hi all,

I am in the process of customizing my web site with the company brand look. I want to change all the web pages links to a certain color. I'm not only talking about the global links and the links on the navigattion on the left side of the page. I'm also including links that would be:
- links in a web summary link Web Part
- links in the posts of a blog or a wiki
- links everty where else

So I'm assuming to do this, I need to change the core.css file's color code to the color I want. Problem is that core.css file is a loooooong page with rules and code. Anyone know specifically where I should go
Or if you have a "glossary" for the code, that has what I'm looking for, that would help as well.

Thanks.


Re: SharePoint - Design and Customization Changing Color for Links

rick postmus

Hi, I dont think there is a faster way to change the link color then editing the core.css by hand. Fastest way to change it is problaby by replacing it with the color you want by "Replace All".




Re: SharePoint - Design and Customization Changing Color for Links

erazed

"Fastest way to change it is problaby by replacing it with the color you want by "Replace All"."

So in other words, go into the core.css file, and look for "Replace All" to change the color of the links Is this correct




Re: SharePoint - Design and Customization Changing Color for Links

Rich McGuire

Erzed check out Heather Solomon's SharePoint CSS Reference page: http://www.heathersolomon.com/content/sp07cssreference.htm

You can check that to find out what you need to change in core.css to get the results that you are seeking. Using a replace all command is likely to end up with unexpected changes. However, to anwser the question you asked regarding that I believe that person was suggestion you go into find and replace and use that to change the color.





Re: SharePoint - Design and Customization Changing Color for Links

rick postmus

I was indeed suggesting to find and replace the ones that you wanted to change. Maybe replace all wasnt the best word to pick for that. In sharepoint designer you can open the core.css file and see what you are changing it is very helpfull and I suggest to use sharepoint designer to edit the core.




Re: SharePoint - Design and Customization Changing Color for Links

erazed

Okay, my links that I'd like to change the color for are coming on a page that has a "Summary Link Web Part." When opening this page in SharePoint Designer, I'm not able to find where to access the core.css file to change these link colors. The way I've been accessing the core.css file is by clicking under the "css properties" tab where it says "Applied Rules". When I select a row with an applied rule, a link to "core.css" becomes visible. So then I click on the link and open up that "core.css" file that way.

However, after messing around in there and attempting to change color codes, I had no luck. Needless to say, I must be going about this in the wrong way.

1) Is there another way to access the "core.css" file to change the "summary link web part"

2) Is there anything else I need to do once I edit code in the "core.css" page other than saving the file

P.S.

I also followed this tutorial on uploading your own css style sheet to the T: http://geekswithblogs.net/RogueCoder/archive/2007/02/06/105588.aspx . It's all about making your own CSS file and uploading it to the Core folder. I did that and then connected that style by applying it to the Master Page. Yet no changes in the colors took place. Rrrrrr! So frustrating. In this regard, I'm not sure what I'm not doing correct. LIke I said, I followed the tutorial to a T. Maybe there is some other style sheet overwriting mine

Anyone have any advice Much appreciated.





Re: SharePoint - Design and Customization Changing Color for Links

erazed

Still stuck.




Re: SharePoint - Design and Customization Changing Color for Links

jmgscott

Here's something for you to try...I found this when messing around with the Content Query Web Part.

(BTW, this is just for the Summary Link Web part)

If you've added the Summary Link Web part, there's a button at the top of it when in modify mode called 'Configure Styles and Layout'. This list you see in the 'Default style for new links' drop-down is actually coming from the XSL style sheet called 'ItemStyle.xsl'...located in the Style Library --> XSL Style Sheets.

You can create a new style here to have the text display in your web part however you want...change the color, font, whatever. You'll probably just have to play around a little to get an idea of how to do it, but it's not too difficult.

Take a look at this link to get an idea of how to update the ItemStyle.xsl:

http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx

Luckily, you don't have to worry about the first part, as all the fields will already be available for you in the xsl. I tried it out with this web part and it seems to work.

HTH

-James





Re: SharePoint - Design and Customization Changing Color for Links

erazed

Thanks James. I'll try it out!





Re: SharePoint - Design and Customization Changing Color for Links

SteveWalsh

Nice post James. I had accomplished most of this but have a problem... I have customized the item style to the way I want... I can change the fotn size, tyle, padding, margins, bullets, etc... But I cannot seem to chnage the link color... I changed these in CONTROLS.CSS but doesnt work. Can change anything else, but not the link color. There is obviously somethign overriding my new css, but I do not know what:

.link-item, .link-item a, .link-item a:link{
font-family:tahoma;
font-size:8pt;
color: #003399;
text-decoration:none;
}
.link-item a:visited, .link-item a:active{
color: #4167AF;
text-decoration:none;
}
.link-item a:hover{
color: #000000;
text-decoration:underline;
}

Any ideas

Thanks

Steve





Re: SharePoint - Design and Customization Changing Color for Links

The Mossman

Steve, it is not recommended that you overwrite the core.css files by hand. This could break updates that Microsoft may make to Moss in the future. Instead you should override them with your own css as you have attempted to do. Another great post by Heather Solomon may help you with this. The key to doing it, is to make sure your css is called LAST in by moss.

http://www.heathersolomon.com/blog/archive/2006/10/27/sp07cssoptions.aspx

What I generally do is add a reference to a custom css file in my master page. Now, on to your actual question which is overriding specific styles. I highly recommend using the Firebug plugin for firefox, as it allows you to inspect areas of the css by clicking on them in the browser, and also allows you to see changes to the css on the fly right in the browser.

I suspect you may have pinpointed the correct styles (I haven't checked myself and I don't have them all memorized Wink... but I would suspect your css is not the last in the chain of cascading style sheets and another css file is overriding yours.

Let me know if you still have trouble and I will attempt to pinpoint the css for you.






Re: SharePoint - Design and Customization Changing Color for Links

SteveWalsh

Thanks for the response... I will clarify: I have created a custom css file and have it linked in my master page. I have read that article by Heather and I will recheck the properties later today... I will try the firebug plugin later today as well...

The one thing I dont understand is: I have changed the names of the classes referenced in the ItemStyle.xsl file, and then created brand new styles in my style sheet, yet the links did not change color...

<div class="testStyle">
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</a>
</div>

So again, there must be something overriding my new style, like you said. I will try the FireBug Plugin in a few hours. See if I can narrow it down further. I thought I had al lthe correct styles though.

Thanks

Steve





Re: SharePoint - Design and Customization Changing Color for Links

SteveWalsh

ok. I tried using FireBug, and when I changed the above styles I mentioned, it changes color... But when I put this in my own css code... it does not. I also tried changing the CONTROLS.CSS just to see what would happen, and no change in color again...

So why would it work in FireBug, but not in my own styles...

Thanks

Steve





Re: SharePoint - Design and Customization Changing Color for Links

The Mossman

Most likely because its being overridden by a core style.

If you bring up your updated site in Firebug, right click and inspect the area that you think should have your style. Then look on the right side where it shows all the styles applied to that element (you may have to select a nearby element on the left if you didn't hit it dead on with your right clicking). On the right you will most likely see your style and then it will be crossed out. If you scroll through there you will see one that is not crossed out, this is what is overriding your style (it may be hard coded on the element, or being overridden by something you didn't expect). If its being overridden by a core style then your style must not be last in the chain.






Re: SharePoint - Design and Customization Changing Color for Links

SteveWalsh

Sweet, that was it!!! It was being overrridden by something in core.css. I did not know how to use FireBug 100% so I did not realize you could right click on something and go inspect. As soon as I did that I found the style that was overridding:

Code Snippet
.ms-WPBody A:link,.ms-WPBody A:visited {
color:#003399;
text-decoration:none; }

So I copied this style into my custom style sheet, and obviously it did not work because it was still being overridden by core.css. So I then went into my masterpage settings and told it to use my custon css file (like Heather suggests to do), and bingo, worked fine...

I appreciate your help and the tip on how to use FireBug. I wish I had known about that tool when I started customizing this...

Thanks

Steve