Border in Login

niharika.s → made their first commit to this issue’s fork.

I am applying styles to the search button, but I am unable to apply styling to the login button. I might be making the changes correctly,
Let me know if i am not doing correct.

I have Tested this issue using MR #12 . Issue is resolved and attached screenshot for your reference. Moving this issue to RTBC.

flashwebcenter → closed merge request !12

Hello,

To apply a border, first define the border as a CSS variable in your sub-theme. Use this variable for the border styling instead of hardcoding colors. Then, set the color value either in your theme settings or within your sub-theme for better customization.
Here is an example:

#search-button-open button,
#page-wrapper .menu--account .nav__menu-item-account a {
  border: 1px solid var(--r-br);
  --r-br: #647d67;   /* Remove this line if you want to use the theme settings for customization */
  /* Optional */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page-wrapper .menu--account .nav__menu-item-account {
  margin-right: 8px;
}

Best wishes,
Alaa

It came out great!

Thank you so much and best regards

You're welcome! I updated the code to include a login popup button and a vertical nav hamburger, in case anyone else is looking for ways to modify all the top buttons.

#login-button-open,
#sidebar-button-open,
#search-button-open {
  border-radius: var(--solo-px8);
}

#login-button-open button,
#sidebar-button-open button,
#search-button-open button,
#page-wrapper .menu--account li a {
  border: 1px solid var(--r-br);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: var(--solo-px8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#login-button-open {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#login-button-open:hover,
#sidebar-button-open button:hover,
#search-button-open button:hover,
#page-wrapper .menu--account li a:hover {
  transform: translateY(2px);
}

#login-button-open,
#search-button-open,
#page-wrapper .menu--account li {
  margin-right: var(--solo-px8);
}

Best wishes,
Alaa

Thanks for all the customizations.

Best regards

Automatically closed - issue fixed for 2 weeks with no activity.