Skip to main content

SharePoint How to Change Quick Link Background Colour in Tiles

You can easily write css script using Modern Script Editor to change the Quick Link Background Colour, Font Colour, border style and more.

Here, i would give you a guide to change the Background colour and Border-radius.


Add a Quick Link and change the Layout options to "Tiles".



Add the links to your Quick Links and it will show in box but all in same colour which is your Theme colour.



Add a Modern Script Editor on top of the Quick Links:


Enter the Code:

<style type="text/css">

a[aria-label="Link A.  "] {

        background-color: #FF91A4 !important;

    }

a[aria-label="Link B.  "] {

        background-color: #83C760 !important;

    }

a[aria-label="Link C.  "] {

        background-color: #66B032 !important;

    }

a[aria-label="Link D.  "] {

        background-color: #4EA217 !important;

    }

</script>


Then Click "Save" and "Publish". You will see this



Add Curvy Box with Background Colour

You can also make a curvy box by adding border-radius:15px with Code below:

<style type="text/css">

a[aria-label="Link A.  "] {

        background-color: #FF91A4 !important;

        border-radius:15px

    }


a[aria-label="Link B.  "] {

        background-color: #83C760 !important;

        border-radius:15px

    }


a[aria-label="Link C.  "] {

        background-color: #66B032 !important;

        border-radius:15px

    }

a[aria-label="Link D.  "] {

        background-color: #4EA217 !important;
       border-radius:15px

    }

</script>


You will see this nice curvy box: 




CSS CODE CONCEPT:

Every block code below represent a Box style:

a[aria-label="Link D.  "] {

        background-color: #4EA217 !important;
       border-radius:15px;

    }


aria-label="Link D.  " 
Get the Label name by Inspect the code.
Learn more how to get the aria-label here.

background-color: #4EA217 !important;
Change the colour to the colour code #4EA217

border-radius:15px
Make the box to curve at 15px at all the corner.

Note:

Modern Script Editor must be placed before the Quick Links, as the code needed to be loaded first.
If you place below the page, every user that view the page will not see the code coded till they scroll and reach the Modern Script Editor code.
SharePoint works like Lazy loading. It only load till you scroll on it.

Comments

Post a Comment

Popular posts from this blog

SharePoint: How to find aria-label value of the QuickLink Box?

  When we need to customise the Quick link box, we need to find what is the Aria-Label value. Right click on the Quick link icon and select "inspect" A list of code will be shown: Find the Aria-label attribute and copy the value. The value of Link D is "Link D.." Note: When you change the icon using image and icon, the format of the value is different. So, do not assume but try to look for the value here. There will not be any error message if you put the wrong label name or code into the Modern Script Editor.
Post a Comment
Read more

SharePoint JSON Class, Icon, font attributes, border, background colour for Formatting column or view on SharePoint List

Microsoft SharePoint has a list of standard colour to be use. It created a standard class for the font, border and background. You can feel the colour and size below: a)  fluent-ui-core-color b)  Modern Class You can also add icon into your JSON  a)  Microsoft Fluent Icon With this list, you can easily plug into your json and start format your list view and column view. You can also add --hover to each of the class. When mouse hover over, it will change to the class you specify with --hover. How to format Column for SharePoint List 1. First, go to your listing --> right click your field --> Go to Column Settings --> Format this Column 2. Select Format Columns Tab. Make sure the Column is the field that you wanted to format --> Then click "Advance mode" and number 3 screen will appear. 3. Paste below JSON code to the box no3: How to write JSON code to format Column for SharePoint List 1. Example of Formatting title background to Red and change text to a li...
Post a Comment
Read more