Skip to content

Widget | CSS customization

Solved WordPress
53 2 19.3k 1
  • @Sala Those are just placeholders and inherited from the iframe embed. If you change those values, nothing will happen.

    wrote on last edited by
    #39

    @phenomlab you know the current yt video size is 400 * 225, on that line at the end of that code and still its reported to be very tall. So these placeholders could be the culprit

  • @phenomlab you know the current yt video size is 400 * 225, on that line at the end of that code and still its reported to be very tall. So these placeholders could be the culprit

    wrote on last edited by
    #40

    @Sala What do you get if you try in incognito? It works fine for me.

  • @Sala What do you get if you try in incognito? It works fine for me.

    wrote on last edited by
    #41

    @phenomlab we are called off for supper, will attempt to check using that, the browser would have to start a fresh. Catch up on later. Many thanks bdw

  • @Sala What do you get if you try in incognito? It works fine for me.

    wrote on last edited by
    #42

    @phenomlab i also believe the video is okay, though the report is still unclear.

    Is this a video issue or its the article image?
    alt text

  • @phenomlab i also believe the video is okay, though the report is still unclear.

    Is this a video issue or its the article image?
    alt text

    wrote on last edited by
    #43

    @Sala That’s telling you that the video is too tall, and doesn’t meet Google’s criteria. You should remove the CSS below and be more specific with image sizes

    div.text img {
        width: 100%;
        height: 315px;
    }
    

    You are targeting all img tags with this CSS, which is less than desirable. Let’s first remove this CSS and see if that resolves the Google crawl issue which I’m confident it will.

  • @Sala That’s telling you that the video is too tall, and doesn’t meet Google’s criteria. You should remove the CSS below and be more specific with image sizes

    div.text img {
        width: 100%;
        height: 315px;
    }
    

    You are targeting all img tags with this CSS, which is less than desirable. Let’s first remove this CSS and see if that resolves the Google crawl issue which I’m confident it will.

    wrote on last edited by
    #44

    @phenomlab sure, let me compose myself, because the css currently is wrapped up. But, what of the height if we remove its going to use the image height which sometime back i saw them occupying a large space.

    div.text is affecting even yt video d**n, that brings up the picture 👍

  • @phenomlab sure, let me compose myself, because the css currently is wrapped up. But, what of the height if we remove its going to use the image height which sometime back i saw them occupying a large space.

    div.text is affecting even yt video d**n, that brings up the picture 👍

    wrote on last edited by
    #45

    @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

  • @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

    wrote on last edited by
    #46

    @phenomlab On it sir

  • @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

    wrote on last edited by
    #47

    @phenomlab done, its resubmitted on google. I am composing another article so we can clarify if that was the problem. Talk to you later

  • @phenomlab done, its resubmitted on google. I am composing another article so we can clarify if that was the problem. Talk to you later

    wrote on last edited by
    #48

    @Sala Ok. Keep me posted.

  • @Sala Ok. Keep me posted.

    wrote on last edited by
    #49

    @phenomlab new article has been index though we have the same issue. At least not from article image, this time its the image from the video?
    alt text

  • @phenomlab new article has been index though we have the same issue. At least not from article image, this time its the image from the video?
    alt text

    wrote on last edited by
    #50
  • wrote on last edited by Sala
    #51

    @phenomlab Hi, thanks for the additional info, it would help people online by comparing. For us we finally found a solution fixing the videos totally in a different way. It was detailed with one of our member. It appears that google has made some changes over these recent days. We’re formulating a plan on how we would save old and future articles. It has been a joy though hell of a ride.

  • wrote on last edited by
    #52

    @phenomlab Hi, please help us to hide the cap links from crawlers. P - pakistan which is on homepage.

    alt text

  • @phenomlab Hi, please help us to hide the cap links from crawlers. P - pakistan which is on homepage.

    alt text

    wrote on last edited by
    #53

    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.


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
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    3k Views
    Sala
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @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.
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @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