Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

customcss is not working as expected #26

Open
nvallinoto opened this issue May 24, 2024 · 7 comments
Open

customcss is not working as expected #26

nvallinoto opened this issue May 24, 2024 · 7 comments
Assignees
Labels
Bug Something isn't working Cannot replicate Cannot replicate the issue

Comments

@nvallinoto
Copy link

nvallinoto commented May 24, 2024

Describe the bug
I modified the css in order to change the text colour of items when hovering the navbar menu (from white to black).

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Settings' of Adaptable theme
  2. Click on 'custom css'
  3. Add to css the following
#adaptable-page-header-wrapper #main-navbar .navbar-nav>li>a.nav-link:hover,
#adaptable-page-header-wrapper #main-navbar .navbar-nav>li>div.nav-link:hover,
#adaptable-page-header-wrapper #main-navbar li #editingbutton input[type="submit"]:hover {
    background-color: #FFED0D;
    color: #000 !important;
}

In the navbar styles I have the following settings
theme_adaptable | menubkcolor = #1b1c1f
theme_adaptable | menufontcolor = #ffffff
theme_adaptable | menuhovercolor = #FFED0D

image
image

  1. Go to navbar menu in the header and hovering with the mouse the font colour is white (not black). See the picture below
    image

Expected behavior
Hovering the navbar menu the font colour of items should appear black as indicated in the custom css. See picture below.

image

When I modify the css diretly with Chrome inspecting function it works (unselecting the color property)

image

I tried also with this rules (not working as well)

header .nav-item:hover, header li.nav-item:hover, a.nav-link:hover, li.nav-item:hover {
   color: #000 !important;
} 

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):
Moodle: 4.1
Theme Adaptable: 401.1.10 - 2022112311
Browser version: Google Chrome version 124.0.6367.207 (Build ufficiale) (64 bit) on Windows 10

Just two additional informations:

  • I cleaned the cache
  • when I open the css with inspecting browser function the css rule is not updated as indicated in customcss field
@nvallinoto nvallinoto added Bug Something isn't working Pending replication Pending the issue being replicated to demonstrate that it is indeed an issue. labels May 24, 2024
@gjb2048 gjb2048 added Can replicate Can replicate the issue Cannot replicate Cannot replicate the issue and removed Pending replication Pending the issue being replicated to demonstrate that it is indeed an issue. Can replicate Can replicate the issue labels May 24, 2024
@gjb2048
Copy link
Collaborator

gjb2048 commented May 24, 2024

The customcss is working as expected, i.e:

.form-label label,
.form-label > p,
.form-shortname {
    font-style: italic;
}

it is the effect of the settings that is not as would be thought to be expected. That is the bug.

Unselecting an attribute in the development tools is not the same as defining a value for it.

@nvallinoto
Copy link
Author

Hi, you are right unselecting an attribute is not the same as defining it.
In my case I'm trying to redefining the color of the font (from white to black) when hovering the menu item of navigation bar.
If I understood as custom css is working what you define in it will be the last css file uploaded.
I tried several solutions:
for example this one
#adaptable-page-header-wrapper #main-navbar .navbar-nav .context-header-settings-menu .action-menu-trigger a.dropdown-toggle:hover, #adaptable-page-header-wrapper #main-navbar .navbar-nav .region-main-settings-menu .action-menu-trigger a.dropdown-toggle:hover { color: #000 !important; }
but when I reload the site the css is not modified. It appears as defined originally.
As if the custom css was not loaded.
Perhaps I'm missing some steps.
Thanks for the help to find the right way to do it.

@gjb2048
Copy link
Collaborator

gjb2048 commented May 27, 2024

Are you saving the CSS setting?

@nvallinoto
Copy link
Author

yes. I tried also to modify these rules to change the behaviour without success :

.nav-link:hover,.nav-link:focus { color: #000 !important; } header .nav-item:hover, header li.nav-item:hover, a.nav-link:hover, li.nav-item:hover { color: #000 !important; }

@gjb2048
Copy link
Collaborator

gjb2048 commented May 27, 2024

Pragmatically I don't provide one to one support for custom code without being financially compensated. Sometimes I choose to answer questions on the Moodle forums. In this case, I have recognised that there is an issue with the theme in terms of the setting that pertains to this area. This I have already addressed in the development (supporters only) repository. It is my intention to make the changes in the public release soon.

@nvallinoto
Copy link
Author

Hi, after a while I understood that custom css was not working as expected because from a specific line it was broken. It was caused by a not well written custom css (could be a comment or an empty space before the rule). Now I removed the problem and all is working as expected. The issue can be closed.
If possible let me know the content of the issue will be released in the public code. Otherwise good work.

@gjb2048
Copy link
Collaborator

gjb2048 commented May 29, 2024

I normally announce releases on https://x.com/gjbarnard, https://moodle.org/mod/forum/view.php?id=46 and the core code should alert you to updates on https://moodle.org/plugins/theme_adaptable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Cannot replicate Cannot replicate the issue
Projects
None yet
Development

No branches or pull requests

2 participants