Jump to content
  • Pinned
    black.dragon74
    black.dragon74
    Sign in to follow this  

    Custom styling your signature on OSXL

    Hey community!

     

    As you all might know we underwent a massive upgrade from our old forum to this new one. After the upgrade you might have noticed that signatures aren't that well visible. They look completely out of the place and are a total mess to look at.

     

    So, after tuning up our site and handling the core things, I have managed to take out some time today and was toying around with the web developer tools in Chrome.

     

    I wanted my signature to look a bit different and more stylish. As you can see, it also has some fancy animation once you hover over it. You can look at the source code for my signature by inspecting the element.

     

    Here's how you can apply custom CSS3 styling to your signature:

    • Navigate to "Account Settings" from the user settings drop down menu (top right).
    • Screen Shot 2018-05-13 at 12.27.45 PM.png

     

    • Select "Signature" section.
    • Screen Shot 2018-05-02 at 6.22.32 PM.png

     

    • Now you need to change to source code mode as default IPS WYSIWYG is a headache when it comes to styling. Plus the CK Editor we get in Signature's section is very slimmed down (features removed).

     

    • To change to source mode you need to click on the source button on the editor's toolbar. Here's a visual reference:
    • Screen Shot 2018-05-02 at 5.07.20 AM.png
    • Once you switch to the source code mode, the first thing you wanna do is put your signature in the center of the screen. You can also use css but using a <center> tag of HTML would be more handy.
    • Now, by default IPS uses span element to store your signature and span is not that friendly when it comes to animating it.
    • The first thing you wanna do is use a div tag to store your signature and give it a custom unique ID. Like,
    • <div id="myUniqueID">
        This is a sample signature
      </div>

       

    • Here the id of our div element is myUniqueID. We will be using this ID in our CSS to style this element.

     

    • Now, here's the problem, once you use a div tag, your signature will take up the whole place overlapping with some controls in the signature are. Hence, it is a must to use a max-width property to circumvent this issue.

     

    • So, here's the basic bare bones syntax of a typical custom signature:
    • <center>
        <style type="text/css">
          /** Styling for our custom div element goes here **/
        </style>
        
        <!-- Declare a div tag with custom ID -->
        <div id="myUniqueID">
          This is a sample signature
        </div>
      </center>

       

    • Now, I'm gonna provide an other copy and paste code that shows how to control your signature's element using CSS (for noobs)
    • <!-- Source code for Nick's signature on OSXL -->
      <center>
      	<style type="text/css">
              /* Styling for the root DIV tag */
              #myUniqueID{
                /** This will control your signature's text appearance **/
              }
      
              /* Optional if you wanna do something when cursor is hovered (try hovering my signature) */
              #myUniqueID:hover{
                /* Code goes here */
              }
      
          </style>
      
      
      	<!-- Now we are just going to create a div element with our custom tag -->
          <div id="myUniqueID">
      		Please be kind to others. Help us to help you.
      	</div>
      </center>

       

     

    That's all that you need to know.

     

    Here's an advanced example of how to use custom code for signature.

    This is the current source code for my signature. If you have any doubts you are free to ask me about it.

     

    <center>
    	<style type="text/css">
            /** Custom animation to shake an HTML element using CSS **/
            @keyframes shakeSign {
                0% { transform: translate(1px, 1px) rotate(0deg); }
                10% { transform: translate(-1px, -2px) rotate(-1deg); }
                20% { transform: translate(-3px, 0px) rotate(1deg); }
                30% { transform: translate(3px, 2px) rotate(0deg); }
                40% { transform: translate(1px, -1px) rotate(1deg); }
                50% { transform: translate(-1px, 2px) rotate(-1deg); }
                60% { transform: translate(-3px, 1px) rotate(0deg); }
                70% { transform: translate(3px, 1px) rotate(-1deg); }
                80% { transform: translate(-1px, -1px) rotate(1deg); }
                90% { transform: translate(1px, 2px) rotate(0deg); }
                100% { transform: translate(1px, -2px) rotate(-1deg); }
            }
    
            /* Styling for the root DIV tag */
            #nicksSign{
                color: wheat;
                font-size: 15px;
                font-family: monospace;
                max-width: 500px;
                margin-bottom: 5px;
                background: #5f32e5;
                padding: 2px;
                -webkit-font-smoothing: subpixel-antialiased;
                box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.75);
                cursor: default; /* Prevent cursor from turning into a text selector */
                user-select: none; /* Make it non-selectable */
            }
    
            #nicksSign:before {
                content: attr(data-hover);
                opacity: 0;
                position: absolute;
            }
    
            #nicksSign > span {
                transition: all 1s;
            }
    
            /* Animate only when hovered */
            #nicksSign:hover{
            animation: shakeSign 2.5s ease-in-out infinite;
            }
    
            #nicksSign:hover span {
                opacity: 0;
                transition: all 1s;
            }
    
            #nicksSign:hover:before {
                opacity: 1;
                transition: all 1s;
            }
        </style>
    
    	<div data-hover="Thankyou for being here. Greetings from OSXL!" id="nicksSign">
    		<span>Please be kind to others. Help us to help you.</span>
    	</div>
        
    </center>

     

    Lets us know in comments if you have any questions with you custom signature.

     

    Welcome to new new era of Signatures at OSXL!

     

    Regards

    OSXL

     

    Please note: Funky signatures are strictly prohibited and are not allowed.


    Sign in to follow this  


    User Feedback

    Recommended Comments

    There are no comments to display.


  • OSXL Poll (feedback in topic)   272 members have voted

    1. 1. Do you like our site design ?


      • Yes
      • Yes, but still need some improvements
      • No, I hate it
      • Prefer old site template

    Please sign in or register to vote in this poll. View topic
  • Recent Posts

    • Hi All new to her, I am a total noob in doing thhis and would like help to turn my dell laptop into a hacintosh dell running high sierra. \mlaptop specs are  dell latitude with \intel core i5 3340\ivy \bridge socket, 8 gigs ram, intel hd graphics 4000. please help me get this working i have been battling 4 days straight with all these videos from youtube etc and manage to get to the clover boot menu but nothing happens from there, i do not have another mac to do a pen drive but do have macOS High Sierra running on vm ware with unifail downloaded already, i also tried that way and does not work
    • @InsanelyDeepak codec_dump.txt.zipI've got a new one I believe.   Detected ALC289 but some sort of crazy in the Dell Specs: ALC3281   https://topics-cdn.dell.com/pdf/precision-15-7530-laptop_specifications_en-us.pdf   Codec_Dump attached from Mint.   Any suggestions?  Plays via VoodooHDA but headphone socket sounds overdriven and isn't auto select.   Thanks   Mo codec_dump.txt.zip debug_27519.zip
    • Jake Lo.   Thanks for the reply.  Good to know I'm not going mad then.  I've done the best I can to this point.   I'll follow up as suggested.  The I2C is running in polling mode rather than via interrupt.   Mo 
    • You can put your request in for ALC289 here. Seems that's a new one. As for VoodooI2C touchpad buttons, you'll just have to wait for the developer to update his kext or post your issue there. Seems to be a known issue if you have an Alps I2C touchpad.
    • I got 2 separate jack's, one OUT and one IN. On the MSI website stands full list of IN/OUTs in this model, and it is: 1x Mic-in
      1x Headphone-out
      1x Headphone-out (SPDIF)
      1x Headphone-out (HiFi / SPDIF)

      And only SPDIF works correctly on each layout. That's why i think patching should be done, to use it correctly.
    • I tried it already, none of those layouts works correctly. ususally work ony Digital Out, and sometimes built in mic, nothing else. built in speakers working on one layout, but then mic not working. And I need all IN/OUTs working correctly  
    • @Waldemarek ALC898, there are a few already patched with AppleALC.kext + Lilu.kext give these layout-id a try 1, 2, 3, 5, 7, 11, 13, 28, 65, 98, 99, 101
×