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.

Sign up for GitHub

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

Jump to bottom

Custom CSS and JavaScript Loading #299

Open
MichaelRFox opened this issue Aug 4, 2024 · 3 comments
Open

Custom CSS and JavaScript Loading #299

MichaelRFox opened this issue Aug 4, 2024 · 3 comments

Comments

@MichaelRFox
Copy link

Currently, clean-jsdoc-theme loads custom CSS and JavaScript files near the beginning of the <head> section of index.js. Since custom CSS files are loaded before clean-jsdoc-theme.min.css, conflicting styles in clean-jsdoc-theme.min.css override those in a custom CSS file.

In my use case I have loaded an octocat svg file to customize my menu link to my GitHub page. In my custom CSS file I use the svg as a mask-image with a background-color of currentColor to accommodate theme toggling, However, the .nav-bar-item:hover background style from clean-jsdoc-theme.min.css overrides my custom hover style. I managed a work around my using !important, but this is admittedly clumsy.

Here is a portion of my jsdocConfig.json:

"template": "node_modules/clean-jsdoc-theme",
"theme_opts": {
    "default_theme": "dark",
    "static_dir": ["./static"],
    "favicon": "./static/favicon.ico",
    "homepageTitle": "Home",
    "title": "fxTooltip",
    "includeFilesListInHomepage": true,
    "include_css": ["./static/docs.css"],
    "include_js": ["./static/docs.js"],
    "displayModuleHeader": true,
    "sort": false,
    "search": true,
    "menu": [
        {
            "title": "<span class = 'hiddenText'>Gihub</span>",
            "link": "https://github.com/MichaelRFox/fxToolTip.js/",
            "target": "_blank",
            "class": "github linkItems",
            "id": "repository"                
        },
        {
            "title": "<span class = 'hiddenText'>NPM</span>",
            "link": "https://www.npmjs.com/package/fx.tooltip.js/",
            "target": "_blank",
            "class": "npm linkItems",
            "id": "npm"
        }
    ]
}

And here is my custom CSS:

.linkItems { 
    mask-size: contain;
    webkit-mask-size: contain;
    mask-repeat: no-repeat;
    webkit-mask-repeat: no-repeat;
    mask-position: center;
    webkit-mask-position: center;
    margin: 0 0.5em 0 0.5em;
    background-color: currentColor;
}

.linkItems a:active {
    background-color: currentColor im !important;    
}

.linkItems:hover {
    color: currentColor;
    background-color: #ababab !important;
    cursor: pointer;
}

.github {
    width: 2em;
    mask-image: url(static/github-mark.svg);
    webkit-mask-image: url(static/github-mark.svg);
}

.npm {
    width: 3em;
    mask-image: url(static/Npm-logo.svg);
    webkit-mask-image: url(static/Npm-logo.svg);
}

.hiddenText {
    visibility: hidden;
}

In my second use case I would like to add a tooltip to my menu items to mirror the right-menu-items by including the following Javascript:

tippy('.github', {
    content: 'Github repo',
    delay: 500
})

tippy('.npm', {
    content: 'NPM repo',
    delay: 500
})

However, since my custom JavaScript is loaded before tippy.js it can't access it. I haven't yet figured out a workaround for this yet.

I think that loading custom CSS and JavaScript files at the end of the <head> section would be an easy solution. Anyone competent enough to create custom CSS and JavaScript for their docs should be able to prevent the unintended consequences of reusing variables, functions, and selectors from the index.html file, etc. (perhaps a disclaimer in your documentation).
@github-actions GitHub Actions
Copy link

github-actions bot commented Aug 4, 2024

Wonderful, you have created your first issue for clean-jsdoc-theme. Someone will talk to you soon!

@MichaelRFox
Copy link
Author

So I figured out a workaround for the JavaScript issue (rather embarrassed about this). It was simply to enclose the code in a window.onload event. Still seems a bit kludgy, but seems to work.

window.onload = function (event) {
    tippy('.github', {
        content: 'Github repo',
        placement: 'top',
        delay: 500
    })

    tippy('.npm', {
        content: 'NPM repo',
        placement: 'top',
        delay: 500
    })    
}

@ankitskvmdam
Copy link
Owner

Hi @MichaelRFox!
I am glad that you figured out a workaround for this.

To fix the css I would recommend you to increase the specificity. So to updated the hover colour of navbar item you could do something as follows:

.navbar-container .navbar-item:hover {
 /* My custom css. */
}

Alternatively, feel free to suggest some ideas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MichaelRFox @ankitskvmdam