Skip to content

Widget | CSS customization

Solved WordPress
53 2 18.0k 1

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • The theme came with space on left side

    Solved WordPress css
    7
    3 Votes
    7 Posts
    2k Views
    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    3k Views
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    6k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    857 Views
    No one has replied
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    6k Views
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    61k Views
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27