FANDOM


  • A continuation of my previous CSS thread because said thread's notifs are glitched. Here are my questions for this post:

    1. How do I change the looks of all comments and thread posts by certain users? I wanna spice up my comments and posts.

    2. How do I create a smooth image animation where the image displays normally at first, but it makes the corners rounded in about four seconds when you hover over it?

    If I have any more questions, I'll post them in replies.

    ~Wither

      Loading editor
      1. That depends on what parts you want to change. Could you be more specific?
      2. I suggest you read up on CSS animation.

      Also, here is the original thread if anyone cares.

        Loading editor
    • 1. The font and BG colour.

      2. Alright, thx.

      New Q: How do I position the Chat Send button to the center of the left of the typing box? ChatHacks are also enabled on the wiki (DBF) and the buttons would otherwise overlap.

        Loading editor
    • @keyframes IMGA {
          from {border-radius: 0px;}
          to {border-radius: 25px;}
      }
       
      body.img:hover {
          animation-name: IMGA;
          animation-duration: 4s;
      }

      Would this code work for the image animation?

        Loading editor
    • So far, nothing has happened.

        Loading editor
    • I now have this code:

      /* Image Animation */
       
      @keyframes IMGA {
          from {border-radius: 0px;}
          to {border-radius: 25px;}
      }
       
      body.img:hover {
          animation-name: IMGA;
          animation-duration: 4s;
          transition-timing-function: ease-in-out;
      }
        Loading editor
    • It is great we were able to clarify some things over chat.

      My apologies regarding the animation. This is my first time dealing with animations/transitions. I took another look into it an you do indeed want to use transitions, not animations.

      As for the thread posts (forums and/or message walls), do you have any examples where this has been done? Based on my investigation, it seems that there isn't enough information in the HTML to target a specific user.

      However, you can do it for article comments.

      .SpeechBubble[data-user="<spaced username>"] .speech-bubble-message {
          <desired CSS>
      }
      .SpeechBubble[data-user="<spaced username>"] .speech-bubble-message::before {
          border-right-color: <match message bubble border color>;
          border-bottom-color: <match message bubble border color>;
      }
      .SpeechBubble[data-user="<spaced username>"] .speech-bubble-message::after {
          border-right-color: <match message bubble background color>;
          border-bottom-color: <match message bubble background color>;
      }

      For the chat button, where you specify the position, add:

          bottom: 12px;
        Loading editor
    • Thanks.

      I'll try out the comments.

      Still no result for the animation.

        Loading editor
    • Still no result.

        Loading editor
    • Withersoul 235 wrote: How do I create a smooth image animation where the image displays normally at first, but it makes the corners rounded in about four seconds when you hover over it?

      You might want to use CSS transitions instead of CSS animations in this case. For example, if you wanted the avatars of users to round themselves for 1 second after hovering on them you can use:

      #UserProfileMasthead .masthead-avatar img {
          transition: border-radius 1s;
      }
      #UserProfileMasthead .masthead-avatar img:hover {
          border-radius: 50%;
      }
        Loading editor
    • How do I make it so that it stays rounded for as long as you hover over it?

        Loading editor
    • Oh, it will stay rounded. 1 second is just the duration of the transition which you can change by changing 1s in the CSS above to something else.

        Loading editor
    • Perhaps something like:

      .rounding-corners img {
          transition: border-radius 4s;
      }
      .rounding-corners img:hover {
          border-radius: 25px;
      }

      Then, you can do something like:

      <span class="rounding-corners">[[File:Name.ext]]</span>
      
        Loading editor
    • So far, nothing has happened. This is my code:

      body.img {
          transition: border-radius 4s;
      }
       
      body.img:hover {
          border-radius: 25%;
      }
        Loading editor
    • body.img is a selector for the whole contents of a page only if the body element had a class img, which it doesn't. If you wanted to select all images inside of an article, though, you can change that selector to #mw-content-text img. Or you can use something like what Andrewds1021 suggested above if you don't want them to apply to all images in an article.

        Loading editor
    • It works! Thx!

        Loading editor
    • Question; is it possible to use CSS to only affect pages when a certain tabber is active?

      If yes, then would it be done through the following example?

      .page-Chara#1.skin-oasis {
       /* CSS */
      }
       
      .page-Chara#2.skin-oasis {
       /* CSS */
      }
        Loading editor
    • Also, an "@import" at the top of the Wikia.css page on my wiki seems not to work. This is the code:

      @import "http://the-megadimensional-character-statistics.wikia.com/wiki/MediaWiki%3APages.css?action=raw&ctype=text/css";

      You can find the page here.

        Loading editor
    • Unfortunately, you cannot target an entire page based on which tab is active (at least, not with CSS alone). The reason is that anchors and query strings are not incorporated into a page's class. Aside from efficiency and page caching, there is also a third really good reason the particular syntax in your example isn't used. In CSS, # is a reserved character used to make selections based on id. Similar to how .myclass selects elements that have class="myclass", #myid selects elements that have id="myid". So something such as .some-class#something.another-class would select elements that have class="some-class another-class" id="something".

      As for why @import isn't working, it is because Wikia minifies (concatenates) site CSS. Think of it as creating a new file by copy-and-pasting Common.css and then Wikia.css. This means that the @import at the top of Wikia.css is actually in the middle of the style-sheet that the browser actually receives. Since @import must be at the top of whichever style-sheet it is in, the one in Wikia.css is ignored. The same is done (separately) for Wikia's global CSS and personal CSS. For example, personal CSS is combined in the following order:

      • global.css
      • common.css
      • <skin-name>.css
        Loading editor
    • Alright; what import should I use in that case, and where? 

        Loading editor
    • Well, is there a reason you don't want the imported CSS to be applied to other skins (such as monobook)?

        Loading editor
    • The Pages.css is primarily for page-specific backgrounds, which wouldn't work on Monobook. But if it's the only way, then I'll move the import nonetheless.

        Loading editor
    • Well, there are two ways to deal with this. The first is to import Pages.css in Common.css. As you noted, this would load it for all skins; which may not make sense. The second option is to remove everything besides comments, @charset, @import, and empty lines from Common.css. You may ask, "What about the CSS I have in Common.css?" Excellent question! You will need to move it to a separate stylesheet and then import that stylesheet in Common.css.

        Loading editor
    • I'll move it to Common.css, that's the simplest solution.

        Loading editor
    • Sounds good.

        Loading editor
    • Creo que no lo hago bien. De todos modos gracias. 

        Loading editor
    • Por favor hable en inglés. Nosotros, o al menos, no entiendo lo que dices.

      (Translated into Spanish because it might be easier for Snow88 to understand)

        Loading editor
    • How do you create links that not only glow, but also have an effect where two holographic copies of the link appear from above and below and disappear when meeting each other?

      Like on these wikis. I've been looking through their CSS pages, but copying their codes only lets the links glow, and doesn't create those duplicates.

        Loading editor
    • Also, it is apparently possible to do the comment style to threads, but it requires JavaScript. Looking into it. (Shown here)

        Loading editor
    • Can you link to where you are trying out the link CSS? It looks like the CSS is all you should need.

      As for the thread posts, yes, it could be done with JS because JS is not limited to the single-pass that CSS is. CSS is applied in a single, linear pass over the HTML; that is why you cannot select parent or predecessor elements.

        Loading editor
    • I tried it out in a live CSS/Sass/Less editor on the Chrome Web Store.

        Loading editor
    • Well, did you copy their CSS for both "a" and "a:hover"?


      Edit:

      By the way, I have stopped getting notifications for this thread as well. So annoying. I wish the issue would get fixed soon.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message