Change cm-footer-account button style

[14Steve14]

Bit of a silly one this.

I have been adjusting some of the CSS in the default temlate just to see the effect before creating a new template.

I added the following to the CSS file and uploaded and it

Code: Select all

.btn {
  font-weight: 400;
  font-size: 1.0375rem;
  border-radius: 20px;
}

Everything worked as expected on all the buttons apart from the 'login' button in the footer account module. That stayed the same. When logged in, the 'log out' button also never changed. I take it is something to do with the way it is coded, so is there a way to make those buttons act the same as the others.

They seem to have the btn class in there so I am a bit lost as to what I should be looking for.

Code: Select all

<div class="col-sm-6 col-md-<?= (int)MODULE_CONTENT_FOOTER_ACCOUNT_CONTENT_WIDTH ?> cm-footer-account">
  <h4><?= MODULE_CONTENT_FOOTER_ACCOUNT_HEADING_TITLE ?></h4>
  <nav class="nav nav-pills flex-column">

<?php
  if ( isset($_SESSION['customer_id']) ) {
?>
    <a class="nav-link pl-0" href="<?= $GLOBALS['Linker']->build('account.php') ?>"><?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_ACCOUNT ?></a>
    <a class="nav-link pl-0" href="<?= $GLOBALS['Linker']->build('address_book.php') ?>"><?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_ADDRESS_BOOK ?></a>
    <a class="nav-link pl-0" href="<?= $GLOBALS['Linker']->build('account_history.php') ?>"><?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_ORDER_HISTORY ?></a>
    <a class="nav-link mt-2 btn btn-danger btn-block" role="button" href="<?= $GLOBALS['Linker']->build('logoff.php') ?>"><i class="fas fa-sign-out-alt"></i> <?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_LOGOFF ?></a>

<?php
    } else {
?>
    <a class="nav-link pl-0" href="<?= $GLOBALS['Linker']->build('create_account.php') ?>"><?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_CREATE_ACCOUNT ?></a>
    <a class="nav-link mt-2 btn btn-success btn-block" role="button" href="<?= $GLOBALS['Linker']->build('login.php') ?>"><i class="fas fa-sign-in-alt"></i> <?= MODULE_CONTENT_FOOTER_ACCOUNT_BOX_LOGIN ?></a>

<?php
    }
?>
  </nav>
</div>

Edit - Added image showing buttons

[heatherbell]

Bit of a silly one this.
They seem to have the btn class in there so I am a bit lost as to what I should be looking for.

The border-radius style for .nav-link class on that button overrides the border-radius style you have applied to .btn
That can be seen in Dev Tools (using Chrome, Right click page - click on Inspect at the bottom of the popup menu - or just Control+Shift+I on your keyboard - the developer tools pane opens on the right of the screen).

Screenshot 2022-05-29 060334.png

So you could add a specific selector to target the cm-footer-account buttons, that is, .cm-footer-account .btn which targets elements with class btn that are descendant of element with class .cm-footer-account.

Code: Select all

   .cm-footer-account .btn, 
   .btn {
        font-weight: 400;
        font-size: 1.0375rem;
        border-radius: 20px;
      }

or override the .nav-link style by making the border-radius style on .btn important, that is

Code: Select all

   .btn {
        font-weight: 400;
        font-size: 1.0375rem;
        border-radius: 20px !important;
      }

However, that said, be aware that making such a broadly targeted style change such as .btn could have unforeseen or unintended results.