0

I'm fairly new to sharepoint customisation so have been struggling reading over some threads. I have looked at the following Posts by have been unable to figure out where / what needs to be edited to get this working.

I'm trying to add custom CSS to edit my home page where promoted links are stored in order to make them smaller (This is so that it scales better when viewing on an ipad).

I'm following this process but I can not seem to get my customisation to save after pressing the save button - It just reverts back to how it was.

  • Navigate to Home page
  • Press the Edit button
  • Add My promoted links web parts to the page
  • Save the page

At this stage the site is fine - I now want to make further customisation in order to resize the promoted links I have just added to the home page.

  • Press Edit to edit the home page
  • Add a Content Editor Webpart at the top of the page (Insert > Media and Content > Content Editor > Add
  • Click onto the Content editor web part I have just added
  • Click 'Edit Source'
  • Add the code between the and Tags - (Link to the CSS I'm added is in the comment below)
  • Press 'OK' to save the source code I have entered
  • Looking at the site the Promoted links have now been resized to the size I want them

    • Press the Save button

    • After pressing save and viewing my home page the promoted links have gone back to the same size as they were before?

Does anyone know why this isn't saving?

Please let me know if you need any further information or screenshots.

Kind regards Steven

  • Here is the link to the custom CSS I'm trying to add to the content Editor Web Part. sharepoint.stackexchange.com/questions/26556/… – Steven Daly Jul 5 '17 at 11:29
  • CSS/Javascript is removed from CEWP by SharePoint. Add it using a Script Editor Web Part instead. And do not forget the style/script type tags. – Christoffer Jul 5 '17 at 11:50
  • Here is the correct link for the script that I'm using : sharepoint.stackexchange.com/questions/86743/… – Steven Daly Jul 5 '17 at 11:54
  • I have carried out the following steps - When saving my edits this is still reverting back to the original size. - Press edit, Press insert - Press Webpart > Media and Content > Script Editor > Add this webpart, Press on the webpart > Press Edit Source > Copy and paste my code into the source (<Style> </Style> tags are correct> Changes are made in editor mode> Press save > Changes revert back? – Steven Daly Jul 5 '17 at 11:54
  • Sounds more like Caching, Minimal Download Strategy or that the page need to be checked out for it to be editable. Are you sure that you check out the page before doing any editing to it? Does "/_layouts/15/start.aspx#/" exist in your URL? Have you tried to make force an update of the site? Ctrl + F5 – Christoffer Jul 5 '17 at 11:59
0

apply your css using java script and use script editor for applying the script on a page

  • Hello Muskan, I have deleted the Content Editor WP and a Script Editor WP instead. I click on to the Script Editor WP, Press Embed Code, Add my code (<Style> / </Style> tags are correct, Changes apply in editor mode, Press save, saved changes then revert back and promoted links go huge again. – Steven Daly Jul 5 '17 at 12:00
0

changing the promoted links is one of the tough task because most of the element inside it has inline styles, which can be overridden by only one way i.e. css !important mark, and when you change the width/height of promoted links, the animation stops working. It is not advised to customize promoted links via css. You can take advantage of SharePoint JSLink/CSR to achieve what you want to via CSS override.

If the above, is not your requirement then you can apply following css to get the desired size. I am using 100px box, you can provide your desired size.

.ms-promlink-body > div {
    width: 100px !important;
    height: 100px !important;
}

.ms-promlink-body > div > div{
    width: 90px !important;
    height: 90px !important;
}

.ms-promlink-body > div > div > a span, .ms-promlink-body > div > div > a div{
    width: 90px !important;
    height: 90px !important;
}

.ms-promlink-body > div > div > a div{
    top: 60px !important;
}

But this will stop animation part as all the css is marked as important. The output will look like following:

css promoted links

  • Hello, I have been able to get this working well using the following tut: youtube.com/watch?v=gcWX3N4nWyw – Steven Daly Jul 5 '17 at 14:44
  • did you really update Site Page code? I dont think it was required. You just need to add script editor web part and refer to css there. I am using the same techniques here. – ThinkB4Code Jul 5 '17 at 14:54
  • Looking into this further it looks like I was entering the CSS incorrectly into the Content Editor Web Part. I wasn't Editing the source code of the content Editor Web Part in the correct location. I'm very new to SharePoint site development so this was a bit of a lesson for me. – Steven Daly Jul 5 '17 at 17:13
0

Please note that I was able to get this to work in editor mode and not have to create a .css page that I linked to CEWP to. New to SharePoint development and had some issues with what source code needed to be changed.

Using the Following vid I was able to resolve this issue: https://www.youtube.com/watch?v=gcWX3N4nWyw

I believe there might be some problems when ending the source code of the home.aspx page - Changes are seen as unsafe so are removed when I Save them whilst editing in browser.

By creating a CSS page in SharePoint Designer 2013 with the relevant CSS I wish to add , adding a Content Editor Web Part, Adding content to the webpart, editing the source code, and linking this code to the .css page I created, and then saving these changes - This is now working.

Some of the text is clipping a bit so there is some additional changes that I need to make but I should be able to do this/

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.