Jump to content
  • Articles, Guides and News

    Our website articles, guides and news

    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).  
    Select "Signature" section.  
    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: 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.
  • Recent Posts

    • Excuse me, guy. I'm using Opencore (OC) 0.5.9 DEBUG version for installing hackintosh in my DELL INSPIRON 3421. Although the VRAM=1536mb and the display is default for scaled, there’re still lots of noise, stripes on the screen so I’ve surfed the net for a way to solve this headache maker problem and finally, I’ve found one on this group (the link is here: https://osxlatitude.com/forums/topic/11004-e6230-upgrade-to-mojave-has-anyone-had-success/page/2/?tab=comments#comment-90011) , although it’s for Clover config.plist but I’ve put them in OC config.plist (Kernel->Patch) but didn’t solve it. Is there any help to make it work correctly My DELL INSPIRON specs is here: CPU : DualCore Intel Core i5-3337U, 1800 MHz (18 x 100) Motherboard Name: Dell Inspiron 3421 (Intel Panther Point HM76, Intel Ivy Bridge) RAM: 3993 MB (DDR3 SDRAM) BIOS: A13 (12/14/2015) Graphic: Intel(R) HD Graphics 4000 (2077230 KB) Monitor: LG Philips LP140WH2 (Dell MV65P) [14" LCD] (1366 x 768), connector LVDS Intel Panther Point HDMI @ Intel Panther Point PCH - High Definition Audio Controller Audio: Realtek ALC282 @ Intel Panther Point PCH - High Definition Audio Controller HDD WDC Green 500GB Keyboard: Standard PS/2 Keyboard Mouse: Dell Touchpad Wifi card: Broadcom 802.11n Network Adapter (DW1704) Ethernet card: Realtek PCIe FE Family Controller Here is some picture about my problem as well as my config.plist (sorry that I’ve delete the platforminfo because it has my real MAC address) Thanks a lot Config.rar Videos.rar
    • Same error as before - Could not Register with Framebuffer.  Graphics showing as Intel HD Graphics 6000 4Mb.   Hackintool shows Current framebuffer as: Model - Macbook Pro 12.1 Inter Generation - ??? Platform ID - 0xFFFFFFFF GPU Device ID - 0x1616800086 GPU Name - Intel HF Graphics 6000
    • Hi all.    I've manage to install OSX Catalina 10.15.5 on a Lenovo T470s and have it mostly functioning. The one thing I can't solve is the battery status. Let me explain   1. The battery status icon only sits at 0% and never updates on OpenCore 2. I have to use ACPIbatterymanager.kext for the the status indicator to even appear. Furthermore if I load SMCbatterymanager.kext instead I get a series of errors show in the included picture.  3. The same kexts when used in Clover are able to show some battery status, including charging even though even then it's not perfect.  4. I've tried every combination of kexts and SSDT's that I can find lying around but none of them fix this problem.    Configuration:   Lenovo T470s Intel Core i5 6300u 1 TB HPEX920 NVMe SSD 12 GB of RAM     Git Repo with current EFI: https://github.com/Elemiel-K/Opencore-T470s   Any help or advice would be appreciated.   
    • Hi @Syonagar, sorry late im not receive instantly mail about notifications...   Sure, im post here my EFIs. 1. EFI only for boot, wait and be patient, after 20 sec ou more, you be like a "freeze" step, but its is normal, im thought im get KP but not...(iMac Pro SMBIOS works for my Lenovo) and my Desktop!!   EFI OC Install BOOT Lenovo PS2 iMacProWork 10072020.zip     2. EFI 2 for my laptop im only change my serial number because im use iCloud.  EFI-Opencore-Lenovo Thinkpad E470 - Use after install Big sur beta 1 or 2.zip   Im need share too that my wifi card is modified... like my post on forum...my processor is intel i5 7200u SkyLake.    Here we go...enjoy and post if you can install with usb.   Im let said that, im not advanced user, but im spend a lot weeks and with good heart im share with you, sorry if not perfect...   Im don't know if im should post on my tutorial on this forum, but im think later, when get out final version that Big Sur...   Post if works. for you!!! Regards!!!     
    • did you include the boot arg I suggested above? What error are you encountering?
    • Jake Lo thanks so much for all  this info and resources u have provided. i have been trying for 2 weeks now to set up my dell e5470 to run mac with no success. i have not succeeded yet but for the first in a  while i think there is hope. I'm facing a problem with installation, it keep getting stuck on verbos boot. here is the debug file and screenshot debug.zip
×
×
  • Create New...