Question

Photo of Jim Michael

0

Change UI colors for sandbox?

2

I'm wanting to re-color our "sandbox" instance of Rock to make it obvious that you're not in production. I managed to find the Rock logo and change its background to red, but would also like to do the same to the bar arcross the top (highlighted below). Anyone know where this is defined?

I guess I'm also wondering if this is the best way to do this, or if it's at risk of being overwritten during an update? Would adding our own HTML block to the layout/theme be more appropriate? I also apologize if this is covered elsewhere... I could swear I read about it in the documentation at some point but couldn't find it after 30min of searching :-)

 

  • Jim Michael

    Jim Michael

    Ok, found this one... it was just a few lines up in the same theme.css file. Still curious to know whether this is the proper way to (ugly) colorize the UI for my purposes.

    • Photo of Jeremy Turgeon

      0

      Hey Jim,

      I ran into the same problem.  Just ended up putting an HTML block in Feature section of the homepage with <div class="alert alert-danger"> This is the alpha Rock</div>.  But if you wanted it to show up on every page you could edit the default Rock logo which is in C:\inetpub\wwwroot\Assets\Images\rock-logo.svg.

      Hope that helps!

      • Jim Michael

        Jim Michael

        Thanks! In the end I ended up changing the color in lines 4731 and 4774 in theme.css to red, which works well. If it gets overwritten during an update, it's a 2 min fix ;-)

      • Photo of Ken Roach

        0

        Rock McKinley 3.4

        For external site
        Theme: wwwroot Themes Stark Styles
        File: theme.css

        Line: 5028
        header .navbar {
          background-color: #3a3a3a;     <<<<<<  change this to:  red;


        For internal site
        Theme: wwwroot Themes  Rock Styles
        File: theme.css

        Line 5570

        @media (min-width: 992px) {
          #content-wrapper header .navbar-default {
            height: 50px;
            background-color: #c2b8a7;   <<<<<<<<<<   change this to:  red:
            border-color: #b8ac98;
            color: #616161;