Monitor Reply

Support

Gear mark to change color

Permalink Browser Info Environment November 24, 2019 at 1:49 PM

Is the gear mark for changing the color included as standard?
Since I am considering purchasing, please give me an answer.

Type:	Pre-Sale
Status:	In Progress

jordif replied on Nov 24, 2019 at 4:47 pm Permalink Reply

Hi!

Thanks for your interest.

No, it is not included. That's a custom script I added to the demo site (for demo purposes only).

I could share that script with you if you are interested, but it's not included in the theme out of the box.

Cheers,

dsds replied on Nov 24, 2019 at 10:43 pm Permalink Reply

Can I share it if I buy it?
Does it work with php7.2 in concrete5 8.5.2?
Thank you.

jordif replied on Nov 26, 2019 at 6:59 pm Permalink Reply

Hi,

I confirm the latest version of the theme works with concrete 8.5.2 and PHP 7.3

If you need the script to add the color switcher, let me know and i'll share it with you (you can open a new support ticket or send me a private message).

Cheers,

dsds replied on Dec 11, 2019 at 9:30 am Permalink Reply

We are considering purchasing.
In that case, please tell me the gear settings.
Thank you.

jordif replied on Dec 12, 2019 at 6:01 pm Permalink Reply

Hi,

this is the code I use for the demo site to a add the color switcher:

<style type="text/css">
  #color-switcher {
    width:64px;
    height: 110px;
    position:fixed;
    top: 50%;
    left: -64px;
    margin-top: -50px;
    background:#222;
    z-index: 9999;
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
  }

Viewing 15 lines of 74 lines. View entire code block.

 
<style type="text/css">
  #color-switcher {
    width:64px;
    height: 110px;
    position:fixed;
    top: 50%;
    left: -64px;
    margin-top: -50px;
    background:#222;
    z-index: 9999;
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
  }
  #color-switcher.active {
    left: 0;
  }
  #color-switcher .sample {
    cursor:pointer;
    margin: 10px 0 0 10px;
    outline: 1px solid #eee;
    width: 0px;
    height: 0px;
    display: block;
    float: left;
  }
  #color-switcher .switch {
    position:absolute;
    left: 100%;
    width: 40px;
    height: 60px;
    text-align:center;
    line-height:60px;
    background: #222;
    cursor: pointer;
  }
  #color-switcher .switch:before {
    content:"\e09a";
    display: inline-block;
    font-family: 'simple-line-icons';
    font-weight: normal;
    font-size: 20px;
    line-height: 60px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    color: white;
  }
  #color-switcher.active .switch:before {
    content:"\e605";
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<script>
  if ( Cookies.get('preset') == 'dark' ) {
    $('<style>body { color: #444444; background-color: #393944; } a { color: #303841; } a:hover, a:focus { color: #303841; } .btn, input[type=submit], .links-to-buttons .ccm-image-slider-text a, .links-to-buttons .ccm-block-page-list-page-entry-read-more a { background: #0fc6a2; } .btn:hover, .btn:focus, .btn.focus, .btn:active, .btn.active, .btn.active.focus, .btn.active:focus, .btn.active:hover, .btn:active.focus, .btn:active:focus, .btn:active:hover, input[type=submit]:hover, input[type=submit]:focus, .links-to-buttons .ccm-image-slider-text a:hover, .links-to-buttons .ccm-image-slider-text a:focus, .links-to-buttons .ccm-block-page-list-page-entry-read-more a:hover, .links-to-buttons .ccm-block-page-list-page-entry-read-more a:focus { background: #0ca184; } .site-content, .boxed, .area-content-accent { background-color: #eeeeee; } .highlight, .highlight-icon i[class^="icon-"], .highlight-icon i[class*=" icon-"] { color: #0fc6a2; } .top-nav { background-color: #393944; color: #eeeeee; } .top-nav a, .top-nav a:hover, .top-nav a:focus { color: #eeeeee; } .site-header, .navigation { background-color: #393944; color: #eeeeee; } .primary-nav, .primary-nav a { color: #eeeeee; } .menu-handle::before, .menu-handle::after, .menu-handle span, .primary-nav .navbar-toggle .icon-bar { background-color: #eeeeee; } .primary-nav a:hover, .primary-nav a:focus { color: #eeeeee; } .site-name p, .site-name h1, .site-name h2, .site-name h3, .site-name h4, .site-name h5, .site-name h6, .site-name a { color: #0fc6a2; } .site-name a:hover, .site-name a:focus { color: #0fc6a2; } .site-header .ccm-search-block-form:before { color: #444444; } .site-header .ccm-search-block-form .ccm-search-block-text { color: #444444; background-color: #ffffff; border-color: #eeeeee; } .primary-nav .navbar .navbar-nav > li, .primary-nav .navbar .navbar-nav > li > a, .primary-nav .navbar .navbar-nav > .open > a, div.ccm-page header nav.ccm-responsive-navigation.original ul a { color: #eeeeee; } .primary-nav .navbar .navbar-nav > li > a:focus, .primary-nav .navbar .navbar-nav > .open > a:focus, .primary-nav .navbar .navbar-nav > li > a:hover, .primary-nav .navbar .navbar-nav > .open > a:hover, .primary-nav .navbar .navbar-nav > .active > a, .primary-nav .navbar .navbar-nav > .active > a:focus, .primary-nav .navbar .navbar-nav > .active > a:hover, div.ccm-page header nav.ccm-responsive-navigation.original ul a:hover, div.ccm-page header nav.ccm-responsive-navigation.original ul li.nav-path-selected > a { color: #0fc6a2; } .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { color: #0fc6a2; } .modal-nav-body ul li, .modal-nav-body ul li a, .ccm-responsive-overlay ul li, .ccm-responsive-overlay ul li a { color: #eeeeee; } .modal-nav-body ul li > a:focus, .modal-nav-body ul li > a:hover, .modal-nav-body ul li.active > a:focus, .modal-nav-body ul li.active > a, .modal-nav-body ul li.active > a:hover, .ccm-responsive-overlay ul li a:hover, .ccm-responsive-overlay ul li.nav-path-selected > a { color: #0fc6a2; } .modal-backdrop, .ccm-responsive-overlay { background-color: rgba(57, 57, 68, 0.95); } .site-footer { background-color: #393944; color: #efefef; } .site-footer p, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #efefef; } .site-footer a { color: #efefef; } .site-footer a:hover, .site-footer a:focus { color: #efefef; } .site-content .stretched hr, .boxed .stretched hr { border-top-color: #838399; } </style>').appendTo('head');
  }
  $(document).ready(function(){
    "use strict";
    var colorpicker = '<div id="color-switcher"><div class="switch"></div>';
    colorpicker += '<div class="sample" data-color="fresh" style="border-top: 40px solid #f672a1; border-right: 40px solid #f3f3f3"></div>';
    colorpicker += '<div class="sample" data-color="dark" style="border-top: 40px solid #0fc6a2; border-right: 40px solid #393944"></div>';
    colorpicker += '</div>';
   $('body').append(colorpicker);
    $("#color-switcher .sample").click(function(){
      Cookies.set('preset', $(this).data('color'));
      window.location = "?preset="+$(this).data('color');
    });
    $("#color-switcher .switch").click(function(){
       $("#color-switcher").toggleClass("active");
    });
  });
</script>

The easiest way to add it to the site, is going to Dashboard -> Tracking code, and copy-pasting it into the "Header Tracking Codes" area. This should work.

Alternatively, if you feel comfortable with code, you can add the code into a separate CSS and JS file.

Hope this helps

Fresh

Support

Gear mark to change color

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post