Update sidebar button styling

[Mocke]

Hi all,

This seems like a very straight forward thing to solve but I'm struggling.

All I want to do is update all button styling within the sidebars to my own. I already created my CSS classes and basically all I want to do is update the classes on the buttons to my own custom classes. Unfortunately it seems easier than said as within the sidebar.tpl I would expect to see the buttons but only see the followings snippet. So not sure where the actual code for the button lies.

 

{if $item->hasFooterHtml()}
    <div class="panel-footer clearfix">
        {$item->getFooterHtml()}
    </div>
{/if}

 

 

I presume I will have to use PHP hooks or maybe even some JS to remove the existing button classes within the sidebar and replaced them with my own? What would be the best method? 

Thank you in advance.

[brian!]

14 hours ago, Mocke said:

This seems like a very straight forward thing to solve but I'm struggling.

WHMCS lulls you in like that... "oh this will be easy"... hours later, you're still banging your head hoping that you're getting close to a solution, but still not quite there... 😵

14 hours ago, Mocke said:

All I want to do is

it's still lulling you in! 🙂

14 hours ago, Mocke said:

update all button styling within the sidebars to my own. I already created my CSS classes and basically all I want to do is update the classes on the buttons to my own custom classes. Unfortunately it seems easier than said as within the sidebar.tpl I would expect to see the buttons but only see the followings snippet. So not sure where the actual code for the button lies.

when you say "buttons", you mean like these..

<div class="panel-footer clearfix">
	<a href="clientarea.php?action=details" class="btn btn-success btn-sm btn-block"><i class="fas fa-pencil-alt"></i> Update</a>
</div>

can you see from the above code, which parts comes from the sidebar template (divs) and which from the array - the menus (navbar, sidebar, panels) are now just arrays that the templates loop though to output them...

14 hours ago, Mocke said:

I presume I will have to use PHP hooks or maybe even some JS to remove the existing button classes within the sidebar and replaced them with my own? What would be the best method? 

whichever you prefer - if going down the hooks path, you'll probably need to read the Class docs, and get familiar with getfooterhtml and setfooterhtml... and then using string replaces to change the css class.

technically, you could do it in the sidebar.tpl template if you really wanted to avoid hooks/js by doing this...

        {if $item->hasFooterHtml()}
            <div class="panel-footer clearfix">
                {$item->getFooterHtml()|replace:'btn btn-success btn-sm btn-block':'btn btn-success btn-sm'}
            </div>
        {/if}

which basically just removes the btn-block (full-width) part of the css class - you can must multiple replaces to cover all your css changes.

have you thought of just adding your new css classes to a custom.css but still using the current class names - that should avoid using edits/hooks/js  ?

[Mocke]

Hi @brian!,

Apologies for only replying now.

haha 🙃 I have to agree with you WHMCS definitely does lull you in.

I ended up updating the existing class name styles. This was the quickest work around, also avoided having to use all the hooks/js etc as you mentioned.

Thank you for you input, do appreciate it.