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 ?

Improve this question
9
  • Make sure your custom css is not overriding any SharePoint Styles.
    – Amal Hashim
    Commented Apr 7, 2015 at 12:20
  • Have you checked developer tools and checked the reference to where it thinks the icons are supposed to be?
    – MackieeE
    Commented Apr 7, 2015 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
    Commented Apr 7, 2015 at 12:52
  • Since you are missing just some links you should double check the references and links.
    – el94
    Commented Apr 7, 2015 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
    Commented Apr 7, 2015 at 14:59

2 Answers 2

Reset to default
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.

Improve this answer
3
  • 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
    Commented Apr 7, 2015 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_
    Commented Apr 7, 2015 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
    Commented Apr 8, 2015 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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