aliasnines
pronounsshe/her
583written posts
offlinecurrently
VOLITION [Medium: Success]
[nospaces] [attr="class","ninecodes"] [attr="class","ninecodestop"] [attr="class","ninecodestopleft"]magnolia [attr="class","ninecodestopright"][HASH]jcink [HASH]skin [HASH]monochrome [HASH]dark [HASH]light[break] live preview[attr="class","ninecodesbody"] features- A left-aligned forum (sits on the left side of the screen)
- Black & white aesthetic, compatible with any color accent you choose
- Fits up to 1200px wide screens comfortably
- Full custom HTML including mini profiles
- 200x400 Mini Profile hovers
- Custom header with option for banner image (autosized to fit)
- Quick Edit is disabled; see installation guide for more details.
[attr="class","ninecodesbody"] how to install- Download the XML file attachment titled "Magnolia.xml"
- Log into your Jcink Admin Panel
- Navigate to Skins & Templates then select Manage Skin Sets
- Navigate to the section titled Create New Skin Set and find the option: Choose a skin XML file to one-click install a new skin. Upload the XML attachment you've downloaded. Hit "Create New Skin Set".
- Once you have uploaded the file, you will see a new skin installed in that section that operates as an overview of all the skins currently installed. You can use the links in that menu to quickly navigate to access the wrappers, style sheets, HTML templates, and macros.
- Lastly, please disable Quick Edit. In order to do so, simply navigate: Admin CP >> System Settings >> Topics Posts and Polls >> Enable QuickEdit? Set to "No."
[attr="class","ninecodesbody"] customizing- Remember to set up your Custom Fields first before plugging them in/editing the HTML Templates. Be sure to write down the Custom Field #s down so you can plug them in accordingly where it corresponds in the skin.
- The board images can be edited by adding new div classes called "#b1" with the number "1" corresponding to the forum id number. If you don't know what the forum id number is, simply click on a forum and look at the last digit in the url address. So this means you'll need a new div id class for each board image you want to customize. You can always change the default board image by finding ".boardimg" in the css.
- The miniprofile hover utilizes this script for full customization for mini profiles you want to make for each member group. Please refer to this script if you wish to add more mini profiles for additional member groups.
- Be sure to go in every HTML Template to see what needs to be customized/revised according to your needs!
[attr="class","ninecodesbody"] terms of service- Due to this skin utilizing a lot of gradients, you'll need to be careful on how you change the colors, etc. if you want to keep the skin looking consistent. If you're having trouble editing the gradients, I would suggest ColorZilla as a quick and simple gradient css generator.
- General coding troubleshooting should be done in the Coding Help board but any questions or feedback are welcome in this thread. I'll try my best to assist you should you run into problems.
- As always, please leave my credit/copyright intact!
[attr="class","ninecodesbody"] changelog- 10/07/2018 — Added dimensions for mini-profile hovers.
- 10/25/2018 — Included some additional styling (such as the main profile, mini profile hover, etc.) to make it easier to customize.
[googlefont="Roboto"] [googlefont="Roboto Mono:100,300,400,500,700"] [newclass=".ninecodes"]font-family: Roboto Mono; width: 500px; margin: 30px auto; background: white; box-sizing: border-box; color: #8d929c;[/newclass] [newclass=".ninecodes a"]font-family: Roboto; color: #f2426e; letter-spacing: 0px;[/newclass] [newclass=".ninecodestop"]position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 60px 30px; background-color: rgba(51, 34, 47, 0.85); background-image: url(https://image.ibb.co/kfdePK/50_opacity.png); background-size: cover; background-blend-mode: darken;[/newclass] [newclass=".ninecodestop:before"]content: " "; width: 260px; height: 220px; position: absolute; -webkit-clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%); background: rgba(242, 66, 110,0.25); left: 0px; z-index: 1;[/newclass] [newclass=".ninecodestopleft"]width: 50%; font-weight: 100; font-size: 40px; line-height: 30px; text-align: right; padding: 20px; color: #FFFFFF; position: relative; z-index: 1;[/newclass] [newclass=".ninecodestopright"]width: 50%; font-size: 10px; position: relative; z-index: 1;text-align:left;[/newclass] [newclass=".ninecodestopright a"]font-family:Roboto Mono;text-decoration: none; color: white; background: #ec6789; padding: 2px 4px; line-height: 220%;[/newclass] [newclass=".ninecodestopright a:last-child]background: #56b8ff;[/newclass] [newclass=".ninecodesbody"]padding: 30px; font-family: Roboto; font-size: 11px; border-bottom: 1px solid #efefef;[/newclass] [newclass=".ninecodesbody:last-child"]border-bottom: 0px solid white;[/newclass] [newclass=".ninecodesbody b"]color: #ec6789;[/newclass] [newclass=".ninecodes h1"]font-family: Roboto Mono; font-weight: 300; word-spacing: -4px; text-transform: lowercase; font-size: 22px; margin: 0px; padding: 0px; margin-bottom: 10px;[/newclass] [newclass=".ninecodes h1:before"]content: "//"; color: #f2426e; font-weight: 300; font-size: 26px; margin-right: 5px;[/newclass] [newclass=".ninecodes li"]padding: 4px 40px 4px 0px;line-height:150%;[/newclass]
|
last edit on Nov 13, 2018 3:45:33 GMT by ninelie
|