0

i wanted to edit my seattle master page and add a custom header to it... and this header has its own stylesheet so I linked it in the head tag in addition to the css files that already exist there (corev15.css and searchv15.css)

the new header has displayed well, but some other seattle's styles and components disappeared, some buttons exist but their icons don't show anymore, and also some table style and more styles disappeared... I know it's a dumb problem but I don't know the solution

here are some examples of what happened :

can anybody help ?

  • Make sure your custom css is not overriding any SharePoint Styles. – Amal Hashim Apr 7 '15 at 12:20
  • Have you checked developer tools and checked the reference to where it thinks the icons are supposed to be? – MackieeE Apr 7 '15 at 12:44
  • I think you should just download the current CSS file and make some simple changes, since the differences does not look too big between versions. This way you are guaranteed that everything will work. If differences are big, still have a look at the original file to compare the differences where your error happens. Please take a couple of minutes to help me with this SharePoint survey. goo.gl/BL7SoM – el94 Apr 7 '15 at 12:52
  • Since you are missing just some links you should double check the references and links. – el94 Apr 7 '15 at 12:53
  • @AmalHashim it is... but the problem is that my custom contains includes 19 other css files and I cannot find where are the problems exactly, and even when I find the file that is responsible for a particular problem I cannot know the exact css rule that's responsible for it. – haddi Apr 7 '15 at 14:59
0

I'm pretty sure the culprit is in your custom changes to the master page somewhere. (Hopefully you backed up Seattle before changing it...)

I would suggest using your browser's developer tools (Ctrl+Shift+i for FireFox/Chrome or F12 for IE) to inspect the "bad" elements and look at where they are inheriting their styles from.

It's likely that your custom header's styles have overly generic selectors that are overriding SharePoint's css. It's also possible that your header itself has some strange interaction with SharePoint's DOM structure (especially if you injected your header into the middle of a SharePoint snippet), but that seems less likely.

  • I'm sure the culprit is in those custom css files, but there are too many files and selectors and it's hard to find what are exactly the overriding selectors. What is the use of knowing the css classes of those "bad" elements? They're overridden and I want their style back, how can I let this happen? – haddi Apr 7 '15 at 15:08
  • @MohamedHaddi Open up the page in Chrome and press Ctrl+Shift+i to view the developer tools. Then use the style information to see how the styles are being overridden (You can eventually see which styles are ultimately in effect, and from which file... once you've figured out where the problem is coming from it should be trivial to remedy it) – mfoy_ Apr 7 '15 at 15:09
  • In the cutsom css there is a max-width of 100% for just img tag.. I removed it and now the icons show but there is still a problem in the spacing (padding and margins) between different elements and borders, and it's really hard to find the exact problem and solve it. I think it's just not a good idea to edit seattle like this, I'll add instead a new html file for master page. Thank you... @mfoy_ for your help – haddi Apr 8 '15 at 8:39
0

It is clearly a CSS issue. One or more of your CSS rule is overriding SharePoint styles.

To track down and fix the issue

  1. Find the file which is causing this
  2. Then add one style at a time and see which style is causing this.

For example, instead of applying style to all elements (say div) try to target the particular div using Id etc.

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.