-
Notifications
You must be signed in to change notification settings - Fork 102
Shoestrap 3 Beta Version User's Guide
The theme settings are now accessible bothe from the front end as well as the backend of the theme. We are using a modified fork of the Options Framework to handle the backend and the theme customizer (as in previous versions) for the frontend. Many options have been added to this theme, so we chose to "lighten-up" the customizer view. The Customizer now only includes some basic settings, while on the backend admin panel all options are available. This way we can give you access to more advanced settings, and at the same time keep the customizer minimal and functional.
You can use this to upload a custom logo for your site. This setting is only available in your admin panel. The uploader uses the native WordPress Media Manager, so you can use an already existing image of your site or upload a new one. You can also simply paste the full url to the image. If the logo is used on the main navbar, then its height will be restricted by the height of the navbar itself. If the logo is used on the "Header" area, then it is displayed in the size you chose when uploading it.
When enabled, the bootstrap breadcrumbs will be displayed. We are using a custom Class to generate them that supports hierarchical pages, hierarchical custom post types, hierarchical taxonomies and many more.
TODO: not implemented yet. We 'll have to wait for Bootstrap 3 to implement it first.
The border-radius setting alters bootstrap's @border-radius-base variable. From that variable the @border-radius-small and @border-radius-large are extrapolated. It has an effect on widget borders, navbars, buttons and more.
The padding-base setting alters bootstrap's @padding-base-vertical variable. From that variable the @padding-base-horizontal, @padding-large-vertical, @padding-large-horizontal, @padding-small-vertical and @padding-small-horizontal variables are extrapolated. It has an effect on widget borders, navbars, buttons and more.
You can enable or disable featured images on archives. By archives we mean all listings of any kind of any posts of any kind. So this applies to gategory views, tags views, monthly views etc. When enabled, this setting reveals 2 more settings: Archives Featured Image Width and Archives Featured Image Height. These let you customize the width and height of your featured images when viewing an archive of posts. We are using a timthumb alternative that takes advantage of WordPress's native resizing, but with a twist: all the images will be resized to exactly the size you specified, cropping the excess. That also means up-scaling your images if they have a resolution smaller than the one you specified, so it is advised that your featured images are equal or larger than the dimentions you specified in the above options.
You can enable or disable featured images on archives. By archives we mean all listings of any kind of any posts of any kind. So this applies to gategory views, tags views, monthly views etc. When enabled, this setting reveals 2 more settings: Posts Featured Image Width and Posts Featured Image Height The same applies as with the Featured Images on Archives setting.
If you want a background image, you can select one here. You can either upload a custom image, or use one of the pre-defined image patterns. If you both upload a custom image and select a pattern, your custom image will override the selected pattern. Please note that the image only applies to the area on the right and left of the main content area (TODO: Add an slider that will allow the user to select the opacity of the background color for the main area). This is done to ensure better content readability. You can also set the background position to be fixed or scroll, change the alignment (left/right/middle) as well as make it fill the screen by default.
When enabled, this option reveals the Upload a Custom Background Image option.
You can use this to upload a custom logo for your site. When editing from the admin panel, The uploader uses the native WordPress Media Manager, so you can use an already existing image of your site or upload a new one. You can also simply paste the full url to the image. Your background positioning will be affected by the 2 below options:
- Background Repeat
- Background Alignment You can use them to control how (and if) you background will be tiled, as well as its vertical alignment.
You can choose a background pattern that will be used in your site. We have already bundled a few that will cover a lot use-cases. All our backgrounds are from subtlepatterns and are licence under the CC3 licence.
You can also upload your own files or delete the ones we already have there, by adding or removing your files in the assets/img/patterns folder.
Please note that if you have uploaded a background image, the patterns you have selected have no effect as the custom images has a higher priority.
You can set your background to scroll or to be fixed. This setting applies both if you have a background pattern or a custom background image.
For SEO purposes the HTML structure of your page is always like this: Content Area - Primary SIdebar (if active) - Secondary Sidebar (if active). However, you can alter the order in which they are displayed without disrupting that structure, since the layout you select is applied using CSS. You can select if you want a 1-column, 2-columns or 3 column layout, as well as the order of your sidebars. 1 Column Layout:
- Content area 2 Columns Layouts:
- Content Area - Primary Sidebar
- Primary Sidebar - Content Area 3 Columns Layouts:
- Primary Sidebar - Secondary Sidebar - Content Area
- Content Area - Primary Sidebar - Secondary Sidebar
- Primary Sidebar - Content Area - Secondary Sidebar
By default the sidebars are not displayed on the frontpage of your site. In case you want to display them, simply enable this option.
This option wraps the navbar and the footer in a container so that they don't extend to the full width of the page but have the same width as your main content area. When enabled, you also have another option revealed:
- "Boxed" view margin from top This option adds an extra margin from the top of your page.
When enabled, the containers are removed and your layout becomes fluid, spanning through the entire length of your screen. This will hide any background images you might have selected.
You can define the width of your primary sidebar here. The width of the sidebar is measured in columns. The total width of your page is 12 columns, so selecting for example a 4-columns wide sidebar will make it 1 third of the total width of your page.
- Minimum value: 2 columns
- Maximum Value: 6 columns
You can define the width of your secondary sidebar here. As with the primary sidebar, its width is measured in columns. The total width of your page is 12 columns, so selecting for example a 3-columns wide sidebar will make it 1 fourth of the total width of your page.
- Minimum value: 2 columns
- Maximum Value: 4 columns
By enabling this option, several other options are revealed.
- Tiny Screen Width (bootstrap variable:
@screen-tiny) - Small Screen Width (bootstrap variable:
@screen-small) - Medium Screen Width (bootstrap variable:
@screen-medium) - Large Screen Width (bootstrap variable:
@screen-large) - Columns Gutter (bootstrap variable:
@grid-gutter-width) These let you control the various breakpoints of your layout, as well as the width of the 12 columns in your grid and the spacing between them. We would advise you leave these to their default values.
This option has a major effect on your website. It changes the @body-bg bootstrap variable, as well as all the below, which are auto-calculated based on the color you select for your background:
- Tables:
@table-bg-accent,@table-bg-hoverand@table-border-colortake care of borders as well as the hover colors of rows etc. - Inputs & forms:
@input-bg,@input-bg-disabled,@input-border,@input-border-radius,@input-color-placeholder,@form-actions-bg,@dropdown-bg,@dropdown-divider-bottom,@dropdown-link-active-color,@dropdown-link-color,@dropdown-link-hover-colorall affect the colors and backgrounds of your forms, drompdowns, search boxes etc. - Pagination:
@pagination-bg,@pagination-border,@pagination-active-bgchange the colors of the pagination links to match your page background. - Widgets: Your widgets on the primary and secondary navbar are rendered as bootstrap panels, so the below variables that are calculated from the body background have an affect on them:
@panel-bg,@panel-border,@panel-heading-bg,@panel-footer-bgand@panel-primary-text. Many more other elements are also affected, such as popovers, tooltips and more. TODO: Add an option that will make the background color ONLY affect the background color, leaving all other variables untouched.
The color of your site's main text. Default: #333333.
The color of your site's links. Default: #428bca.
You can select 4 colors for your branding.
-
Brand Colors: Primary: Your primary branding color. This will affect various areas of your site, including the color of your primary buttons and more. Default:
#428bca. -
Brand Colors: Success: Your branding color for success messages etc. Default:
#5cb85c. -
Brand Colors: Warning: Your branding color for warning messages etc. Default:
#f0ad4e. -
Brand Colors: Danger: Your branding color for success messages etc. Default:
#d9534f. -
Brand Colors: Info: Your branding color for info messages etc. It will also be used for the Search button color as well as other areas where it semantically makes sense to use an "info" class. Default:
#5bc0de.
You can activate or deactivate your Primary NavBar here, and define its properties. Please note that you might have to manually create a menu if it doesn't already exist and add items to it from this page.
Using this option, you can format your primary menu as a navbar, or as a normal nav. To completely remove the primary menu, you will have to set this option to OFF and then visit Appearance => Menus => Manage Locations. Make sure you haven't selected anything in the "Primary Menu".
This option will display your branding (whether it's your sitename, or a logo). Default: ON
The background color for your navbars. Default: #EEEEEE.
The text color for menu items and text in your navbars. Default: #777777.
If this option is enabled and you have added urls to your social networks in the social panel, then a new menu item is displayed, that contains a dropdown with all your social profiles. Default: OFF
When enabled, an seaechbox will be displayed in your navbar.
When enabled, your menu will float to the right of the navbar instead of the left. Default: OFF
Using this option you can set the navbar to be fixed to top, fixed to bottom or normal. When you're using one of the "fixed" options, the navbar will stay fixed on the top or bottom of the page. Default: Normal
Select the height of the Navbar. If you're using a logo then this should be greater than its height + 30px. If it is smaller that the logo height, then the logo size will be scaled-down. It is recommended that you use a logo that is properly sized instead. For example, if your navbar is 50px tall, then your logo should be 50px - 30px = 20px (navbar - 30 = logo). If your logo is 40px tall and you want to keep it that way, then the navbar should be 70px tall (40px + 30px = 70px).
You can use an alternative menu style for your NavBars. TODO: add some presets and create thumbnails for them.