Post by Alisha on Aug 15, 2014 15:37:44 GMT -7
[attr="class","mytable"]
[attr="class","mytext"]Hey there, Adoxians! This will be a helpful tutorial for theme creators looking to make their themes more user-friendly and easy to style, and less easy to change the structure of. I can't guarantee the latter, but it will certainly deter the less experienced coder and hopefully keep those support questions to a minimum. Your days of line numbers and hex code searching in the stylesheet are over! Note: This tutorial requires a basic knowledge of CSS.
This all will be achievable via the Advanced Styles & CSS section of the admin panel.
For the purposes of this tutorial, we'll start out with a simple div with the class ".tutorial". This will also with spans, tables, anything with a class really, but we'll just be using a div here. Meet .tutorial, your traditional run of the mill div class with styling. Notice that all of the colors and other properties are located right there in the in the css.
Part 1: CSS Variables
To advance further, we need to talk about css variables. These are different than the variables you see in the layout templates, and they only work within the stylesheet. You may have noticed them in the stylesheet on a default theme. They are the bits that begin with an @ symbol. Here is one for the navigation bar.
CSS Variables will allow you to simplify your css and are the first step to making things easier to edit.
Now that we've got our sample div all styled, we're going to integrate variables into the css. In this code, the bolded parts are the bits that we'll be creating variables for. When do so for your own divs, you can do as many or as little of these as you'd like. For my latest theme, I mainly stuck to colors and the occasional font. If you want to preserve your design, I'd suggest sticking to the basics.
From here, we'll begin to create our variables. The first step is naming them. Remember, variables must be unique from each other, so make sure your variable has a relevant name that hasn't been used yet. Also worth noting, variables cannot have spaces or symbols in their names(punctuation). These were the variables I came up with for my tutorial div. Notice how I gave each an easily identifiable name for each property I wish to create a variable for: background, font, color, text-transform, and text-align.
Next, we input our original styles, the styles in which I bolded above. This is what your variables should look like when you're done inputting the styles. They should follow this syntax: @variablename: value;
When you've finished creating your variables, the next step is to insert them into your css for the div. The variable will replace the original value for the property.
In the end, you should end up with something like this:
This concludes the css variable portion of this tutorial, but there is one last note for further understanding and optimization. Though css variable names can be only used once, the variables themselves can be used as many times as you'd like. For example, if you have two different divs and want them to have the same background, just input the same variable for each div's background property. You can even insert a variable as another variable's value if you wish.
Part 2: Adding your variables to the Visual Editor
Alrighty kids, are you still with me? The second, and final, part of this tutorial will show you how to add your variables and custom elements to the Visual Editor. Still on the Stylesheet page, scroll down to the bottom and take a look at the preview pane. You'll notice in the bottom left-hand corner two buttons/tabs. Once says "Preview Pane" and the other "Visual Editor Builder". Click the button for Visual Editor Builder. This is a fancy little feature that allows to edit the structure of the Visual Editor, including rearranging, adding, and deleting elements or even whole sections - and the best part is that it will export with your theme! Not many people know about or know how to use this feature, and trust me, it will foster a whole new love that visual editor so many of us seldom use.
Okay, let's get this show on the road. Once you've clicked the Visual Editor Builder button, you should see a copy of the visual editor in place of the normal preview pane. Notice that when you hover over each section/row, three options will pop up on the right-hand side, much like the Category & Board List section of the admin panel. In some cases you might be editing an existing section, for example if you remodeled the board list and added some extra elements, but in this case we just created a new div so we'll be creating our own section.
[IMAGE OF BUTTONS HERE]
Personally I like to add my custom elements to the last category of the Visual Editor, the Objects Category. However, it would also be just as good, maybe even better, to create your own category specific to your own theme, which you would use the "Add New Category" button located in the top-right corner of the builder for.
Moving on, back to those three buttons that appear when you hover over each row, or alternatively the ones that are located at the top of each category. For a new section, click the "Add New Row" button. Once you click that, a new row will appear and you'll see a name box, a drop-down, as well as a two buttons for creating and canceling the addition. The name box is pretty self-explanatory, this is either the name of the section or variable you'll be adding. Variable names don't have to have the "@" and can have spaces. i.e. A background variable would probably just be named "Background".
Let's create a new section, and name it "Tutorial" (or whatever the name of your element is, be it a header or sidebar). And click "Create".
When you have your section created, you'll want to click the "Add New Row" button that is shown when you hover over that section. This is when you'll create your row for your first variable. For this tutorial, it is the background variable. I named it Background, and chose the selection "Background". This will allow images and/or color, but you can choose either specifically if you want people using images or colors, etc.
Once you've chosen your variable type, another drop-down will appear. Note: Depending on your screen resolution a small scrollbar might appear and you'll have to scroll down to see it. This is the drop-down for the variable. If you completed the first part of this tutorial correctly, you should see the new variables you created in that list.
Select the corresponding variable to the row you are creating, and then click the "Create" button. Remember, you may have to scroll down to see it.
Finally, you should have your row created. Because I chose "Background" as my variable type, there are quite a few options available. Don't worry, they all correspond to the variable you selected.
You can create sections within sections if need be, and just click the "Add New Row" on the main section row when you need a new row or section. (is that terribly confusing?)
Lastly, worth noting, when you hover over an existing row (not section), you'll see the same series of buttons. If you click the "Add New Row" button, the new row will appear below the current row. If you click the button on the section the new row will appear at the top of that section.
Concluding Notes
That's all, folks! I hope this tutorial was helpful. If you have any questions/critiques please feel free to post them here. I want this to be as easy to follow as possible.
This all will be achievable via the Advanced Styles & CSS section of the admin panel.
For the purposes of this tutorial, we'll start out with a simple div with the class ".tutorial". This will also with spans, tables, anything with a class really, but we'll just be using a div here. Meet .tutorial, your traditional run of the mill div class with styling. Notice that all of the colors and other properties are located right there in the in the css.
.tutorial { width:100%; margin:10px auto; background: #FFFFFF; font: 30px Arial; color: #000000; text-transform: uppercase; text-align: center; padding: 30px; }
Part 1: CSS Variables
To advance further, we need to talk about css variables. These are different than the variables you see in the layout templates, and they only work within the stylesheet. You may have noticed them in the stylesheet on a default theme. They are the bits that begin with an @ symbol. Here is one for the navigation bar.
@nav_bar_background
CSS Variables will allow you to simplify your css and are the first step to making things easier to edit.
Now that we've got our sample div all styled, we're going to integrate variables into the css. In this code, the bolded parts are the bits that we'll be creating variables for. When do so for your own divs, you can do as many or as little of these as you'd like. For my latest theme, I mainly stuck to colors and the occasional font. If you want to preserve your design, I'd suggest sticking to the basics.
.tutorial { width:100%; margin:10px auto; background: #FFFFFF; font: 30px Arial; color: #000000; text-transform: uppercase; text-align: center; padding: 30px; }
From here, we'll begin to create our variables. The first step is naming them. Remember, variables must be unique from each other, so make sure your variable has a relevant name that hasn't been used yet. Also worth noting, variables cannot have spaces or symbols in their names(punctuation). These were the variables I came up with for my tutorial div. Notice how I gave each an easily identifiable name for each property I wish to create a variable for: background, font, color, text-transform, and text-align.
@tutorial_background
@tutorial_font
@tutorial_color
@tutorial_transform
@tutorial_align
@tutorial_font
@tutorial_color
@tutorial_transform
@tutorial_align
Next, we input our original styles, the styles in which I bolded above. This is what your variables should look like when you're done inputting the styles. They should follow this syntax: @variablename: value;
@tutorial_background: #FFFFFF;
@tutorial_font: 30px Arial;
@tutorial_color: #000000;
@tutorial_transform: uppercase;
@tutorial_align: center;
@tutorial_font: 30px Arial;
@tutorial_color: #000000;
@tutorial_transform: uppercase;
@tutorial_align: center;
When you've finished creating your variables, the next step is to insert them into your css for the div. The variable will replace the original value for the property.
.tutorial { width:100%; margin:10px auto; background: @tutorial_background; font: @tutorial_font; color: @tutorial_color; text-transform: @tutorial_transform; text-align: @tutorial_align; padding: 30px; }
In the end, you should end up with something like this:
/* My Tutorial */
@tutorial_background: #FFFFFF;
@tutorial_font: 30px Arial;
@tutorial_color: #000000;
@tutorial_transform: uppercase;
@tutorial_align: center;
.tutorial { width:100%; margin:10px auto; background: @tutorial_background; font: @tutorial_font; color: @tutorial_color; text-transform: @tutorial_transform; text-align: @tutorial_align; padding: 30px; }
@tutorial_background: #FFFFFF;
@tutorial_font: 30px Arial;
@tutorial_color: #000000;
@tutorial_transform: uppercase;
@tutorial_align: center;
.tutorial { width:100%; margin:10px auto; background: @tutorial_background; font: @tutorial_font; color: @tutorial_color; text-transform: @tutorial_transform; text-align: @tutorial_align; padding: 30px; }
This concludes the css variable portion of this tutorial, but there is one last note for further understanding and optimization. Though css variable names can be only used once, the variables themselves can be used as many times as you'd like. For example, if you have two different divs and want them to have the same background, just input the same variable for each div's background property. You can even insert a variable as another variable's value if you wish.
Part 2: Adding your variables to the Visual Editor
Alrighty kids, are you still with me? The second, and final, part of this tutorial will show you how to add your variables and custom elements to the Visual Editor. Still on the Stylesheet page, scroll down to the bottom and take a look at the preview pane. You'll notice in the bottom left-hand corner two buttons/tabs. Once says "Preview Pane" and the other "Visual Editor Builder". Click the button for Visual Editor Builder. This is a fancy little feature that allows to edit the structure of the Visual Editor, including rearranging, adding, and deleting elements or even whole sections - and the best part is that it will export with your theme! Not many people know about or know how to use this feature, and trust me, it will foster a whole new love that visual editor so many of us seldom use.
Okay, let's get this show on the road. Once you've clicked the Visual Editor Builder button, you should see a copy of the visual editor in place of the normal preview pane. Notice that when you hover over each section/row, three options will pop up on the right-hand side, much like the Category & Board List section of the admin panel. In some cases you might be editing an existing section, for example if you remodeled the board list and added some extra elements, but in this case we just created a new div so we'll be creating our own section.
[IMAGE OF BUTTONS HERE]
Personally I like to add my custom elements to the last category of the Visual Editor, the Objects Category. However, it would also be just as good, maybe even better, to create your own category specific to your own theme, which you would use the "Add New Category" button located in the top-right corner of the builder for.
Moving on, back to those three buttons that appear when you hover over each row, or alternatively the ones that are located at the top of each category. For a new section, click the "Add New Row" button. Once you click that, a new row will appear and you'll see a name box, a drop-down, as well as a two buttons for creating and canceling the addition. The name box is pretty self-explanatory, this is either the name of the section or variable you'll be adding. Variable names don't have to have the "@" and can have spaces. i.e. A background variable would probably just be named "Background".
Let's create a new section, and name it "Tutorial" (or whatever the name of your element is, be it a header or sidebar). And click "Create".
When you have your section created, you'll want to click the "Add New Row" button that is shown when you hover over that section. This is when you'll create your row for your first variable. For this tutorial, it is the background variable. I named it Background, and chose the selection "Background". This will allow images and/or color, but you can choose either specifically if you want people using images or colors, etc.
Once you've chosen your variable type, another drop-down will appear. Note: Depending on your screen resolution a small scrollbar might appear and you'll have to scroll down to see it. This is the drop-down for the variable. If you completed the first part of this tutorial correctly, you should see the new variables you created in that list.
Select the corresponding variable to the row you are creating, and then click the "Create" button. Remember, you may have to scroll down to see it.
Finally, you should have your row created. Because I chose "Background" as my variable type, there are quite a few options available. Don't worry, they all correspond to the variable you selected.
You can create sections within sections if need be, and just click the "Add New Row" on the main section row when you need a new row or section. (is that terribly confusing?)
Lastly, worth noting, when you hover over an existing row (not section), you'll see the same series of buttons. If you click the "Add New Row" button, the new row will appear below the current row. If you click the button on the section the new row will appear at the top of that section.
Concluding Notes
That's all, folks! I hope this tutorial was helpful. If you have any questions/critiques please feel free to post them here. I want this to be as easy to follow as possible.
