Button Color in Top Bar

[russell3]

Hi

On my site https://www.steedman.co.uk I have been trying unsucessfully to change the colour of the ‘Panic Button’ in top bar to red (it is currently blue which must be in global settings). I have looked at this post and tried many of its suggestions https://theme.co/apex/forums/topic/button-color-change/

Somehow it seems to just stay blue regardless of what I do. I was just wondering if anyone has any idea of how to change the colour?

Many thanks, Russell

[jade]

Hi Russell,

Please try this code:

.x-topbar-inner .x-btn {
    background-color: #81c673 !important;
}

Hope this helps.

[russell3]

That’s perfect thanks

I would also like to put an icon before the text in button saying ‘Panic Button’.

I have the shortcode in a php file as follows

<?php // ============================================================================= // VIEWS/GLOBAL/_TOPBAR.PHP // ----------------------------------------------------------------------------- // Includes topbar output. // ============================================================================= ?> <?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>

<?php echo x_get_option( 'x_topbar_content' ); ?>

<?php endif; ?> <?php echo do_shortcode( '[button type="flat" class="panic" shape="rounded" size="mini" href="https://www.steedman.co.uk/help/tax-emergency/" title="PANIC BUTTON" style="margin-top: 10px;background-color:red;"]PANIC BUTTON[/button]' ); ?> <?php x_social_global(); ?>

<?php endif; ?>

Therefore I could possibly try to put the icon in the shortcode within the php but I’m not sure if that will work. Or, if I put it in the Additional CSS that could be the solution. I was just wondering what the simplest way to do it is.

Many thanks

[jumar]

Hello @russell3,

Your idea of putting the icon in your shortcode within the PHP file is right. Please update it with:

[button type="flat" class="panic" shape="rounded" size="mini" href="https://www.steedman.co.uk/help/tax-emergency/" title="PANIC BUTTON" style="margin-top: 10px;background-color:red;"][icon type="bell" style="margin-right: 10px;"]PANIC BUTTON[/button]

Then change bell on the [icon type=“bell”] with the icon identifiers seen on this page: Icons

Keep note to only change the type value and not not the whole [icon] shortcode.

Hope it helps.

Let us know how it goes.

[russell3]

Perfect. That worked.

Thanks so much.

[jade]

You’re welcome.