Custom-Style plugin

Comments

25 comments

  • Avatar
    Aatash Patel

    I followed the steps to set the global fonts to Garamond.  However, the custom css is not taking effect.  What is it that I might be doing wrong?

  • Avatar
    Yoni Lerner

    Hi,

     

    Did you run an IISRESET?

     

  • Avatar
    Evan York (Edited )

    Great idea; wish this functionality was supported natively.

    I just tried adjusting fonts with this plug-in using a custom font installed on my server, but while it changed the font for me - I have the font installed locally as well - it is not rendering it for others.  I'm wondering if there's something extra needed to support custom-installed fonts?  I tested putting the font also in this directory, "C:\Program Files\Sisense\PrismWeb\Resources\fonts", but that doesn't appear sufficient for everyone to see it.  Thoughts?

    Update: Not a CSS expert, but I figured out how to make a custom font work by prefacing my custom.css file font entry with @font-face, referencing the location of the font, like this:

    @font-face {
    font-family: 'Odudo Soft';
    src:
    local('Odudo Soft'),
    url('/resources/fonts/Odudo-Soft-Light.otf')
    format('opentype');
    }

    * {
    font-family: "Odudo Soft", "opensansregular" !important;
    }
     

     

  • Avatar
    Andrew Block

    Omer, 

    Could this plugin be used to change the product .p-container table tr td?


    We manually have to replace the dashbaordstyle-vivid.css each time we upgrade to keep a certain font-size and font-family, would this be a workaround so we could just implement our code in this plugin such as:

    .p-container table tr td {
    font-weight: 100;
    font-size: 13px!important; /*Andrew*/
    color: #000000!important; /*Andrew*/
    overflow: hidden;
    padding: 0000;
    vertical-align: top;
    min-height: 25px;
    font-family: ubuntulight !important; /*Andrew*/
    font-size: 13px;
    border-left: 1pxsolid#cccccc;
    }
  • Avatar
    Evan York

    It also seems that changing the master font-family via this plug-in has no effect on fonts for Indicator widgets.  Has anyone been successful in modifying Indicator widget fonts?

  • Avatar
    Avi Tavdi

    Andrew,

    Using the custom style plugin is the right way to change sisense style.

    If you put that css in a plugin it will reflect in sisense dashboard. 

    As you mentioned changing dashbaordstyle-vivid.css will have to be applied every version

  • Avatar
    Evan York

    Thanks Avi for the link re: Indicator Styling.  That example appears to include a widget script.  Can you provide guidance on if/how this can be integrated into the Custom Style plug-in configuration?

     

  • Avatar
    Andrew Block

    Great work on this plugin it saves me time and work after upgrades with being able to set this at the plugin level!

    Thanks

  • Avatar
    Drew X

    This plugin doesn't work on /app/data page, is it by design or I can somehow make it work?

  • Avatar
    Avi Tavdi

    Hi Drew,

    Currently plugins are not loaded at app/data. We'll add support for it in future versions.

  • Avatar
    Malinda Jepsen

    This is a great plugin! In 7.0 has anyone figured out how to change the styles in the prism-header__section prim-header__section--center?  I'm not great with css, but I've tried everything to change the content to be right-justified (similar to 6.7) and to change the color of the underline from Sisense Yellow to our brand color (in this case under "Home" which we renamed from "Analytics"). What I want to do is to put that list all the way to the right and I can't seem to find the right tags to do that.

    1. Align menu in the center section to the right.

    2. Change the color of the selected list item.

    Thanks in advance!

    Malinda

  • Avatar
    Shashank Mohan

    Hi, 

    This seems like a great plugin to customize the look and feel of sisense. I was able to successfully change the system-wide font using this plugin. 

    One question I had, and it is probably an easy one, is how do I figure out which specific css I can change with this plugin and which one I cannot? 

    For example, if I want to just change the font and background of dashboard filters, how do I do it?

    Thanks, Shashank

  • Avatar
    Malinda Jepsen

    Is there a similar plugin for the mobile app?  Or do I need to edit all the .css and .js files in the mobile folder instead?

  • Avatar
    radhakrishna holla

    Using this plugin we can able to change login page UI ???

  • Avatar
    Michiel Moes

    Used this plugin to make the formula input field a littlebit more readable by adding:

    .CodeMirror {
        letter-spacing: 4px;
    }

  • Avatar
    Andrew Block

    Malinda, 

    Do you mind explaining how you changed the "Analytics" button to "Home" ? 

    Was that through Rest API? Or did you change the home config file?

    C:\Program Files\Sisense\PrismWeb\client\views\home

    Thanks!

  • Avatar
    Malinda Jepsen

    Andrew,

    What I did was update a few .js files in C:\Program Files\Sisense\PrismWeb\client\js.  Change Analytics:"Analytics" to "Analytics:"Home". I believe this is the list of files:

    Malinda

  • Avatar
    JJ Chritton (Edited )

    How would I use this to change the font color of links in pivot tables and text boxes? We'd prefer to use branded colors rather than the default light blue. I tried a few different approaches but wasn't able to get any of them to work. Most recently I aded these lines tot he custom.css file:

     

    /* Change link color */
    .link { color: #241866; } 
    .link:hover { color: #241866; }

  • Avatar
    Evan York

    JJ, try to inspect the element you're interested in to find the CSS and then copy that into the plug-in file and modify.  This one might work for you:

    .sis-scope .link, .sis-scope a {
    text-decoration: none;
    color: #1faff3;
    cursor: pointer;
    }

  • Avatar
    JJ Chritton

    That worked, thanks! I did notice that I had to close out the browser and start another session for the changes to take effect, just FYI for others working with this plugin.

  • Avatar
    Kara Schrader

    Is there any plan for an update to add functionality to the /app/data page? Or do I need to directly modify sisense.css files to update that page?

  • Avatar
    Avi Tavdi

    Hi Kara,

    Unfortunately, currently there is no official API to support styling the data page. We do plan to add it in the future.

  • Avatar
    Kara Schrader

    Hi Avi,

     

    Can you give a timeframe of when that might be added?

     

    And in the meantime, how would I do that without plugins? Is there a way to modify the primary and secondary colors so it persists across all pages in Sisense?

  • Avatar
    Avi Tavdi

    Currently there is no clear timeline on when we'll introduce API for data page. The only way to change the style of data page is by changing sisense style files. its not recommended but currently the ability to change styles on data page is limited to changing sisense css files.

Please sign in to leave a comment.