7 Posts
st3f
11 months ago
0
Topic

Hello together

The Seblod dropdown (with the forms) for the 'New' menu button in Joomla 4.4.1 did not work for me either. Several attempts to solve this via the options failed and sometimes resulted in the backend no longer being accessible.

I then found a solution on https://www.seblod.com/community/forums/forms-content-types/problem-when-creating-content. However, this is not update-safe, which is why I recommend the following procedure:

1. create a backend module (type: custom).
2. assign the module to the 'Toolbar' position
3. insert the code below

This way the dropdown menu works perfectly and looks as if it is part of Joomla.

Best regards
Stefan

CODE:

<script>
/* Seblod Dropdown JS fix */
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("button.dropdown-toggle").on('mouseover',function(){
jQuery(this).next("ul.dropdown-menu").toggle();
});
});
</script>
<style>
/* Seblod Dropdown CSS fix */
#toolbar #toolbar-new .button-new.dropdown-toggle::after {
display: inline-block;
width: 2.375rem;
margin-left: .255em;
vertical-align: 0;
border: 0;
font-family: "Font Awesome 5 Free";
content: "";
font-size: 1rem;
line-height: 2.45rem;
font-weight: 900;
color: var(--template-text-dark);
}
#toolbar #toolbar-new .dropdown-menu {
margin-left: 0;
}
#toolbar #toolbar-new .dropdown-menu li {
border-bottom: 1px solid #0000001a;
padding: var(--dropdown-item-padding-y)var(--dropdown-item-padding-x);
}
#toolbar #toolbar-new .dropdown-menu li:hover,
#toolbar #toolbar-new .dropdown-menu li:focus {
color: var(--dropdown-link-hover-color);
background-color: var(--dropdown-link-hover-bg);
}
#toolbar #toolbar-new .dropdown-menu li a {
display: inline-block;
width: 100%;
font-size: var(--dropdown-font-size);
color: var(--dropdown-color);
text-align: left;
list-style: none;
}
/* Seblod Toolbar buttons CSS fix */
body.widescreen nav[aria-label="Toolbar"] #toolbar {
gap: 1rem;
}
</style>

Get a Book for SEBLOD