Fun with Boxes
Borders
Catchy Title
Useful information
The default note box is simple and spans one column. You can add the "wide" class to extend it (or any element) across the page horizontally, but this may have unexpected effects on your formatting.
Catchy Title
Useful information
Getting rid of the border is easy, but I recommend a little padding, or else the text will look odd due to being flush with the edge of the box.
Catchy Title
Useful information
Catchy Title
Useful information
Catchy Title
Useful information
If you want to alter the borders you'll find some unexpected behavior. This is because GM Binder uses the "border-image" CSS property. Specifically, the default is:
url(/assets/img/sidebars.png) 12 stretch;
you can alter this with a new image, or override it with standard CSS border attributes:
Catchy Title
Useful information
.decriptive {
padding: 10px;
border: none;
}
.decriptive.n1 {
border: red;
}
.decriptive.n2 {
border-color: red;
}
.decriptive.n3 {
border: solid red;
}
.decriptive {
padding: 10px;
border: 2px dotted red;
}
Colors
Catchy Title
Useful information
You can easily change the solid color of the background and text colors with "background-color" and "color" attributes, respectively. You can even replace the background with an image using the "background-image" property:
Catchy Title
Useful information
Filters and blend modes
Catchy Title
Useful information
Note that if you want to change the color of an existing image, you need to use the "filter" attribute. Lots more detail on image manipulation in this excellent watercolor guide. Note that this does effect the entire element. Including text, borders, etc. Great for a single hue theme, but bad if you want more colors in your palette.
Catchy Title
Useful information
Catchy Title
Useful information
You can use "opacity" or "mix-blend-mode" to give the box some of the page texture. There is also a "background-blend-mode" property which can be used with "background-image" and "background-color" to blend the background image with a solid color.
Tldr: If your goal is to overhaul the boxes, your best bet is to settle on an image or color for the background, then select an image for your borders. But you can use filters to do a lot with just the defaults.
.decriptive.n1 {
background-color: red;
color: white;
}
.decriptive.n2 {
background-image: url("http://www.textures4photoshop.com/tex/thumbs/stained-paper-texture-seamless-for-photoshop-thumb44.jpg");
color: darkslategray;
}
.descriptive {
filter: hue-rotate(60deg) saturate(8);
}
.descriptive.n1 {
background-color: #ffdfff;
mix-blend-mode: multiply;
}
.descriptive.n2 {
background-color: #ffdfff;
opacity: 0.75
}