By "codes," do you mean shortcodes, like
[custom_menu]? There are no shortcodes available for those default Wordpress widgets that would allow you to put a widget anywhere you want. There are some plugins that provide both a shortcode version and a widget version, but the plugin developer has to build in that capability. However, one of the feature of Montezuma is that it allows you to create a widget area wherever you need, so you
can place a widget wherever you want. That's how you were able to get the Category widget and the search widget in the header.
Box sizing only has to do with making it easier to calculate the width of a web element. Let's say you have a DIV that is set to 960px wide, and you want have two DIVs inside that fit side-by-side, the first one with a width of 600px and the second one with a width of 360px. The way you would typically do that is to set the
width property of the two internal DIVs to 600px and 300px like this:
Code:
#container {
width: 960px;
}
#div1 {
float: left;
width: 600px;
}
#div2 {
float: left;
width: 360px;
}
So the two internal containers should sit side-by-side since their combined widths is the same as it's containing element.
However, let's say you want to draw a border around one of the two internal containers, plus you want some padding so the text isn't right next to the edges of the container:
Code:
#container {
width: 960px;
}
#div1 {
float: left;
width: 600px;
}
#div2 {
float: left;
width: 360px;
border: 2px solid black;
padding: 5px;
}
Without box sizing, what will happen is that the border and padding will contribute to the width of the container, such that the calculated width will be:
360px (width of div2 contents)
+ 4px of border (2px on left & 2px on right)
+ 10px of padding (5px on left & 5px on right)
= 374px
So the second DIV will be "forced" below the first DIV since the combined widths of the two inside DIVs no longer fits inside the containing element. The way you would normally "fix" this is to decrease the
width property to take the border & padding into account:
Code:
#div2 {
float: left;
width: 336px;
border: 2px solid black;
padding: 5px;
}
As you can see, this can be a pain, you shouldn't have to continually set the width of the element if the border & padding changes.
By setting box-sizing to
border-box, the space taken by any borders or padding is taken into account when the browser sets the width of the container. That is, with box sizing, the browser will adjust the amount of space for the div contents so that the overall width of the element will still be 360px.
Code:
#div2 {
float: left;
box-sizing: border-box;
width: 360px;
border: 2px solid black;
padding: 5px;
}
Quote:
|
I am reading about CSS Flex at w3schools.com. Is it similar to the box model?
|
The
flex properties allow you to position, size, and re-order web elements a bit more easily than using floats.
For example, with the flexbox model, you can re-order the sequence of web elements independent of the sequence that they were output. As an example, let's say you have a page with a sidebar on the left, the main content area in the middle, and a sidebar on the right, and they are output in this order:
Code:
<div id="leftSidebar">...</div>
<div id="content">...</div>
<div id="rightSidebar">...</div>
In a responsive site using floats, what would normally happen if you view the page on a mobile device, like a smart phone, is that all the elements would be stacked on top of one another based upon the sequence that the elements were output. So the left sidebar would appear at the top, the main content under it, and the right sidebar under the main content.
With the flexbox model, it would be easier to specify that the left sidebar comes after the main content and before the right sidebar on a smaller viewport. You can read more about the flexbox model
here and
here. You can probably incorporate this into Montezuma, you'll just have to set the
display property of any block level container to
flex. Also, it doesn't sound like it is uniformly implemented yet across different browsers, so you will have to take that into consideration. I think I'll try playing around with it for certain situations.
»
WordPress Themes »
Montezuma Theme »
