Loading ...

Customize download, share, Gear icon button | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Customize download, share, Gear icon button
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Customize download, share, Gear icon button

Subscribe to RSS
  • krdale01

    Is there anyway for us to customize the button on the Files pages? Perhaps, make it color like blue or somehow draw more specific attention to it?

     

    It’s one of the most overlooked navigational elements and we’re going to roll out a training that highlights how to use it to download, share, etc.

     

    But if there’s a way to enhance its display so it’s easier to find through a setting, I’d like to check into it.

     

    Also, in the screenshot, you’ll see how some users are trying to write a description of how to “use” the icon in the description area (that’s not really meant for it and more for SEO).

    Attachments
  • gskamau
    Answered

    Hey Kris,

    You can use the following code to change the color of the cog. Add the code to Control Panel > System > CSS Overrides .

    .et-files-detail .icon-cog {color: #0000EE;}

    Replace #0000EE with your desired color.

    Grace

  • krdale01

    I tried that and am not seeing any change. Do I need to do anything else to see the change like clear the cache or system to see it take effect? Thanks in advance

  • gskamau

    Hey Kris,

    I didn't see the code in your site's CSS Overrides, so I added it to the bottom. You should see the color now. If you change the code, make sure to click save.

    Grace

  • krdale01

    OK I see you add the CSS. After changing the color, and clearing the cache on Chrome browser, I'm not seeing any difference in a color change to blue using this syntax:

    .et-files-detail .icon-cog {color: #0d96d4;}

     

  • Foster
    Answered

    Hi Kris,

    The solution Grace provided was specifically for your files section. I have added a second line that targets the blog posts as you have shown here. It should now appear blue.

    Let me know if this is more what you are looking for.

    Thanks,
    Foster

  • krdale01

    This worked to change the icon color but wasn't exactly what I was looking for. I was hoping that the whole button background color could be changed and then the icon turned white. Not sure if that's possible through CSS or not. Let me know if that is within the range of override we can exercise. Thanks

  • gskamau

    Hey Kris,

    Use the following code instead. This will make the option button blue and the gear icon white on file and blog pages.

    .et-files-detail .icon-cog, .axero-blog-detail .btn.dropdown-toggle .icon-cog {color: #fff;}
    .et-files-detail .btn-group.pull-right a, .axero-blog-detail .btn-group.pull-right a {background: #0d96d4;}

    Grace

  • krdale01

    That works a little better for visibility. Can we also get the black dropdown carrot to match the gear icon in white?

     

     

    Also, I'm hoping to see the background color in the dropdown menu stay the same white background OR reverse the color of the menu items to item for contrast. Is there anyway to override that?

  • gskamau
    Answered

    Hey Kris,

    Use the updated code below.

    /*Gear icon*/
    .et-files-detail .btn.dropdown-toggle .icon-cog, 
    .axero-blog-detail .btn.dropdown-toggle .icon-cog { color: #fff; }
    /*Caret icon*/
    .et-files-detail .btn.dropdown-toggle .caret,
    .axero-blog-detail .btn.dropdown-toggle .caret { border-top: 6px solid #fff; }
    /*Options button*/
    .et-files-detail .btn-group.pull-right a.btn, 
    .axero-blog-detail .btn-group.pull-right a.btn { background: #0d96d4; }

    Grace

  • krdale01

    This worked great, Grace! Thanks so much. 

    I added it to Wikis and Articles and it also worked.and matches up with our other blue buttons on the site.

    Here's what it produced:

Page 1 of 1 (11 items)