I have created a SharePoint 2013 list and added items to it. These items are used in a carousel and displayed on the homepage. I also have a title, text and a button. On the frontend side I use knockout.js

Users are able to set the color of the text on the carousel on creation of the list item. Now I created the same functionality for the button but it just doesn't take the color I'm passing through when creating the list item.

I can, however, see the colour on the developer tool being populated on the field but it's just not being displayed on the browser.

This is the code I'm using:

//HTML binding:
<a data-bind="attr: { href: CampaignLink().Url, target: CampaignTarget(), style: { color: ButtonColor() }" class="btn">Read More   </a>

//js: querying the list
self.api_query = get_slm_URL_Intranet() + "/_api/web/lists/GetByTitle(\'" + self.slm_LIST_Carousel_Title + "\')/GetItems(query=@v1)?@v1={\"ViewXml\":\"<View><ViewFields><FieldRef Name='Id'/><FieldRef Name='Location'/><FieldRef Name='ButtonColor'/></ViewFields><Query><OrderBy><FieldRef Ascending='TRUE' Name='SortOrder'/></OrderBy><Where><And><And><And><Geq><FieldRef Name='DisplayEndDate'/><Value Type='DateTime'><Today/></Value></Geq><Leq><FieldRef Name='DisplayStartDate'/><Value Type='DateTime'><Today/></Value></Leq></And><Eq><FieldRef Name='_ModerationStatus'/><Value Type='ModStat'>0</Value></Eq></And>{0}</And></Where></Query><RowLimit Paged='FALSE'>6</RowLimit></View>\"}";  

//creating observable:
self.ButtonColor = ko.observable();

// Populate Mapped Item
self.populateCampaignEntry = function (cbuttoncolor) {
    try {
        obj = new doCarousel();

        //Check for new tab
        var newTab = String.HasHashParam(clink.Url, slm_URL_NewTab);
        if (newTab) {
            clink.Url = String.RemoveHashParam(clink.Url, slm_URL_NewTab);

        // map fields


    } catch (err) {
        console.log("Error: ViewModelCarousel.populateCampaignEntry: " + err);

//Loading data
self.loadData = function () {
    // get ISO date in query
    //date = new Date();
    //isoDate = date.toISOString();

    var companyFilter = "<IsNull><FieldRef Name='Company'/></IsNull>";
    if (self.userCompany) {
        companyFilter = String.format("<Or><Eq><FieldRef Name='Company'/><Value Type='TaxonomyFieldType'>{0}</Value></Eq><IsNull><FieldRef Name='Company'/></IsNull></Or>", self.userCompany);

    var q = self.api_query.replace("{0}", companyFilter);

        .success(function (data) {
            var d = data.d.results;
            $.each(d, function (index, result) {
        .error(function (jqxr, errorCode, errorThrown) {
            console.log("Error: ViewModelCarousel.loadData*error: " + errorThrown);

1 Answer 1


Change the color through Mater Page or use "!important" at the end of your code where you are changing the color.

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.