![]() (aka another attempt to ask this lovely rpc to stop making me scroll sideways or zoom to use the built-in features on your forums. So as I was updating my base skin, I thought I’d share my framework for styling Jcink pages on desktop mode for mobile. I'm sure I'm missing things or will need to add containers or get ideas for new things I want as I go but it's a good place to start making things look the way that I want. And I think I speak for all of us when I say it sucks. It's not much to look at but as I add CSS and whatnot it will start to come together. So I put together basically my bare bones (what I think I'll need basically) theme template and it looks something like what is on the right. I will create my containers and then work on the CSS for those containers before I move on to the next part but you'll work on it however you want.įor those that want avatars or other types of things in the board wrapper you can look at this page on Jcink to find all available Board Wrapper variables. Each person has their own method to this. This part unfortunately is a little more difficult to teach. You'll note that the Board statistics exist within the section and that's basically where your main content will always lie. is in Red (this is also where advertisement are on free versions), (or the site breadcrumb) is in green and the is in blue. To help get a feel for the main elements of the theme I highlighted their backgrounds. Removing these items will not allow you to save the wrapper. ![]() Note: Almost everything with a around it is required to be in the wrapper at all times. You'll be likely be going back and forth to get things to look right from the wrapper page to the CSS to Macros to the templates as you go and get a feel for how things start to appear. So now you're able to look at your board wrapper and see what there is available to change. I prefer this program because it actually won't lose your data if it crashes on you it also has an amazing undo feature as well as a you can download a compare plugin so you can see differences between the main code and what you've changed. For example the Board Statistics section is an HTML wrapper.įirst thing I recommend to do is it copy and paste your code into a program like Notepad++. First off, not everything in the mock up to the left is actually in the board wrapper. Now that we have a mock up we have a general knowledge of what we're going to need to do. It's debatable if you would like to get rid of affiliates on mobile as well since there are so many huge gifs I would say you should but make the choice yourself. Note that I removed a section (Staff) from the mobile version to reduce on how much time it takes for a user to get past the section as well as it's frivolous (normally imaged) section that a mobile user doesn't need at the top of their page. If I were looking to also design for mobile I made a similar thing to what is on the right. It's not really intended to have all the bits and bobs outlined exclusively, at least not for my purposes. I have chosen to work with a basic layout like what is on the left. Most themers currently only design for desktop but if you'd like to go through and design for multiple screens you can do that as well. Hopefully you have a mock up or general look in your head of what you're wanting to develop. Utilizing it is as simple as clicking the link shown in the screenshot in your Admin CP, which we're not making obvious/outstanding for the moment.So as we trek through making a theme in Jcink the first thing is the board wrapper. The syntax highlighting is automatic, but to use the auto complete feature press control-space to see suggestions, if there are any. extended! Our end goal is to make it the default editor but there will always be a way to fall back to the basic textarea editor. We'll extend it to HTML Templates after further testing and feedback. The codemirror syntax highlighting editor is available for the CSS and Board Wrappers only at this time. ![]() We invite you to give it a try and let us know what you think but please backup your CSS or wrappers before doing so just in case. While CodeMirror itself is not a beta piece of software, and is very safe and stable, our usage of it within the service is new and not widely tested. ![]() Our goal is to make this the default editor. Syntax highlighting for CSS, HTML, JavaScript.We've been testing CodeMirror, an open source "versatile text editor specialized for editing code" as a replacement for the basic textarea input for the main board wrapper and stylesheet editors in the Admin CP.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |