Skip to content
Sudonix

Targeting a disappearing element for its CSS

Moved Let's Build It
  • phenomlabundefined

    Have you ever tried to target dynamic elements such as as Tooltips under bootstrap only to find that they disappear when you try to inspect them? You’re not alone.

    Fortunately (and inspired by this post), there is a workaround in case you find yourself in a similar boat.

    The Problem

    You locate the popover element you’d like to change, right-click then select Inspect Element and then element itself disappears - along with any hope of you finding the related CSS.

    The Solution

    We need to use a bit of ingenuity here. This is where the browser (in the case of Webkit, such as Google Chrome etc) debug facilities come in handy.

    1. Fire up the page where the element appears that you want to inspect
    2. Press F8 to open the developer tools
    3. Click on the console tab
    4. Paste the below into the console
    setTimeout(function(){debugger;},5000);

    Note that 5000 is adjustable (and the inspiration for the Mission: impossible - Rogue Nation sequence 🙂 ) It should look like the below - essentially, 5000 is 5 seconds… Now you see (hopefully) the paradigm.

    4f721beb-9f2f-42b2-8b64-c497df50eb98-image.png

    1. Now press enter
    2. You have 5 seconds before the debugger will launch, which should be enough time for you to active the element you want to target

    4741514b-83c0-4195-8d41-e673a8fbf36a-image.png

    1. Wait until the debugger fires

    6c706df4-ebbb-4d84-ae2e-2e25e63f5736-image.png

    1. Now select the element you want to inspect in the usual manner

    3d9cd04f-a769-41b7-a4f7-4524deb7e8b6-image.png

    1. Expose the CSS as required

    a55a0a2a-81af-401e-9ac4-69065c2f23d7-image.png

    Customise as necessary 🙂

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    3
  • phenomlabundefined phenomlab marked this topic as a regular topic on
  • phenomlabundefined phenomlab moved this topic from Configure on
  • DownPWundefined

    Nice. Very good tips Mark 😁

    PW and WS Spirit alive

    👍
    2
  • phenomlabundefined phenomlab moved this topic from Guides on
  • phenomlabundefined phenomlab referenced this topic on

Related Topics
  • phenomlabundefined

    Target the posts counter in categories using CSS and jQuery

    Let's Build It
    2
    3 Votes
    2 Posts
    111 Views
    DownPWundefined

    Very great 😉

  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    598 Views
    phenomlabundefined

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • Hariundefined

    Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    833 Views
    Hariundefined

    @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

  • Salaundefined

    The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    450 Views
    phenomlabundefined

    @Sala This should look better

    .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png

    You can increase the top and bottom padding by increasing the values above.

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    1k Views
    phenomlabundefined

    @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.

  • DownPWundefined

    chat list navbar

    Solved Customisation
    30
    3 Votes
    30 Posts
    2k Views
    DownPWundefined

    No no it’s ok @phenomlab
    I just comment the 2 lines mentionned aboves 😉

  • DownPWundefined

    [NodeBB] Import custom Font

    Solved Customisation
    12
    3 Votes
    12 Posts
    1k Views
    phenomlabundefined

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.

  • Mike Jonesundefined

    CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    553 Views
    phenomlabundefined

    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.