Open Search is a technology which allows to create your own browsing engine used by a browser. Thanks to it, e.g. in a Firefox browser, a user may define a new browser after entering our website based on GavernWP framework. Because of it, in the case of more extensive websites, e.g. data catalogs, searching is much easier.
Switching on support for Open Search requires switching on one option in an administration panel in a tab of advanced settings. All other operations are made with GavernWP.
GavernWP makes possible to create themes based on Responsive Web Design. That’s why, it has two additional CSS styles:
Thanks to options available in an administration panel, it is possible to specify when these styles will be loaded.
Two column layout (if a column is switched on) is loaded when tablet.css file is not loaded.
At the moment of reaching maximum width for tablet.css file, page’s layout is changed into one column and the column itself is placed before or after page’s main content.
Additionally, in widget positions like top or bottom1/2/3, modules from three column layout are changed into one column layout.
After loading mobile.css file there is one column layout used everywhere.
A very important improvement is a possibility of specifying whether a module will be loaded in tablet or mobile mode. More information can be found in Widget Rules entry.
GavernWP has an extensive mechanism allowing to create additional theme styles. We may distinguish two main groups of styles in this mechanism:
The whole configuration is included in styles.json file:
[code][{
“family”: “color”,
“family_desc”: “Theme color”,
“family_tooltip”: “You can select one of the theme colors”,
“styles”: [
{
“name”: “Color I”,
“value”: “color1”,
“file”: “style1.css”
},
{
“name”: “Color II”,
“value”: “color2”,
“file”: “style2.css”
}
]
}][/code]
As you can see, it includes color style family which has two styles, namely: Color I and Color II.
In order to create new style family or a style for style family given, it is enough to create a next object in styles.json file and then create CSS files connected with a family given – in the case of color family, these are style1.css and style2.css files.
GavernWP will load CSS files of a style given in a head section – chosen in an administration panel or, if there is a tool for choosing user’s styles switched on, they will be loaded based on a Cookie file storing data about a style used by a user.
You have to remember that for each style family there is at least one CSS file loaded. Therefore, creating coexisting style families like:
is incorrect because at least one CSS style from each family will be loaded immediately. So the correct one is creating style families responsible for some elements of website styling, e.g. a separate family responsible for website coloring (colors) and a separate one for website background (patterns).
Generally, you have to care about particular style families in order not to overwrite one another.
GavernWP has built – in support for Open Graph protocol. Thanks to it, each post added may have metatags specified and during publishing a post given on Facebook, there will be information specified earlier by an author of an entry displayed:
Thanks to it, an author of a post has better influence on the information displayed on social media services. It’s also worth remembering that in the case when fields connected with Open Graph will not be filled, then GavernWP will try to fill them automatically basing on the entry data.
Support for Open Graph is a great supplement for a Social API system implemented in GavernWP.
In order to make GavernWP framework more flexible, we decided to use files in JSON format for storing thme’s configuration and options layout in an administration panel.
You may find files responsible for theme’s configuration in gavern/options/ catalog:
In order to understand better JSON files format, we recommend to visit the official website of this format.
GavernWP has full support for making translations. Because of differences being a result of using JSON files for generating theme’s options, a theme’s translation should be done in three places:
The first stage is a standard operation described in details in WordPress documentation. Let’s focus on the two remaining stages then:
Generally, there is en_US catalog created in config and options catalogs which includes JSON configuration files in an English language. So, in order to translate a theme to a different language , you have to copy this catalog and change its name to a respective language used in your installation, e.g. pl_PL. Then, you have to change all phrases from the English language to your language.
NOTE! You must not change the names of keys in JSON files, the same as, proper names because they are used for proper work and reading values.
e.g. in a widgets.json file for a fragment:
[code]{
“name”: “Top widgets”,
“id”: “top”,
“description”: “Widgets area on under the header of website”,
“before_widget”: “<div id=\”%1$s\” class=\”box%2$s\”>”,
“after_widget”: “</div>”,
“before_title”: “<h3 class=\”box-title\”>”,
“after_title”: “</h3>”
},[/code]
change the following phrases only:
After this operation, you will see sentences in your mother tongue in an administration panel.
It’s worth remembering that in the case when GavernWP will not find a catalog corresponding to the language set in configuration, there will be files used from en_US catalogs.
oEmbeds is an important facility used while creating posts. Thanks to it, a user may embed in an entry easily, e.g. a movie from You Tube service by giving just a link to the movie – WordPress will generate a movie from this link automatically.
A few examples are presented below:
YouTube
http://www.youtube.com/watch?v=MdrC7kYTAX4
What is your favorite demo toolbar? http://t.co/tkN72PH5 http://t.co/RAXXHm4L
— GavickPro (@gavickpro) July 6, 2012
Flickr
GavernWP allows to access a lot of additional typography elements created with Shortcodes use. The use is very simple thanks to an additional button in a posts editor. A typography description from a programistic side has been divided into two parts, namely: front-end and back-end.
Below, there are all elements available in theme’s typography. Typography elements can be divided into three main groups:
These elements are used for highlighting text fragments together with their importance / type of information by using appropriate colors.
[warning]Warning text example using Shortcodes[/warning]
[info]Info text example using Shortcodes[/info]
[notice]Notice text example using Shortcodes[/notice]
[error]Error text example using Shortcodes[/error]
Labels are useful for marking the importance of the text fragment or a word given. In the case of longer texts, we recommend to use elements from Warnings / Infos / Notices group.
This is a paragraph with the [label style=”1″]labeled text[/label] using the first style.
This is a paragraph with the [label style=”2″]labeled text[/label] using the second style.
This is a paragraph with the [label style=”3″]labeled text[/label] using the third style.
This is a paragraph with the [label style=”4″]labeled text[/label] using the fourth style.
This is a paragraph with the [label style=”5″]labeled text[/label] using the fifth style.
This is a paragraph with the [label style=”6″]labeled text[/label] using the sixth style.
Badges in their look are similar to Labels, however, you may use them mainly for highlighting shorter texts, e.g. numerical values.
This is a paragraph with the badge [badge style=”1″]12[/badge] using the first style.
This is a paragraph with the badge [badge style=”2″]12[/badge] using the second style.
This is a paragraph with the badge [badge style=”3″]12[/badge] using the third style.
This is a paragraph with the badge [badge style=”4″]12[/badge] using the fourth style.
This is a paragraph with the badge [badge style=”5″]12[/badge] using the fifth style.
This is a paragraph with the badge [badge style=”6″]12[/badge] using the sixth style.
We recommend to use an element creating code listings in one out of three styles available for presenting source codes:
[code style=”1″]function helloWorld() {
alert(‘Hello World!’);
}[/code]
[code style=”2″]function helloWorld() {
alert(‘Hello World!’);
}[/code]
[code style=”3″]function helloWorld() {
alert(‘Hello World!’);
}[/code]
Text blocks are useful for generating an element highlighting a particular part of an entry:
[textblock style=”1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock]
[textblock style=”2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock]
[textblock style=”3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock]
[textblock style=”4″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/textblock]
[numblock num=”01″ style=”1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/numblock]
[numblock num=”02″ style=”2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/numblock]
[numblock num=”03″ style=”3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/numblock]
[numblock num=”04″ style=”4″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/numblock]
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. [floated align=”left”]Lorem ipsum dolor sit amet[/floated]
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. [floated align=”right”]Lorem ipsum dolor sit amet[/floated]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. [floated align=”center”]Lorem ipsum dolor sit amet[/floated] Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Quotes elements are useful for highlighting the author of a sentence given:
[quote style=”1″ author=”Author”]The content of the quote in style 1[/quote]
[quote style=”2″ author=”Author”]The content of the quote in style 2[/quote]
[quote style=”3″ author=”Author”]The content of the quote in style 3[/quote]
[quote style=”4″ author=”Author”]The content of the quote in style 4[/quote]
[quote style=”5″ author=”Author”]The content of the quote in style 5[/quote]
Ordered and unordered lists:
Buttons in many different variations:
[button style=”1″]Your text[/button] [button style=”2″]Your text[/button] [button style=”3″]Your text[/button] [button style=”4″]Your text[/button] [button style=”5″]Your text[/button] [button style=”6″]Your text[/button] [button style=”7″]Your text[/button]
The same buttons as links:
[button style=”1″ url=”#”]Your text[/button] [button style=”2″ url=”#”]Your text[/button] [button style=”3″ url=”#”]Your text[/button] [button style=”4″ url=”#”]Your text[/button] [button style=”5″ url=”#”]Your text[/button] [button style=”6″ url=”#”]Your text[/button] [button style=”7″ url=”#”]Your text[/button]
Elements with legend useful while creating text blocks in a frame provided with an appropriate title.
[legend title=”Legend style 1″ style=”1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/legend]
[legend title=”Legend style 2″ style=”2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/legend]
[legend title=”Legend style 3″ style=”3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/legend]
[legend title=”Legend style 4″ style=”4″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/legend]
[legend title=”Legend style 5″ style=”5″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.[/legend]
An element useful for generating text without formatting:
[raw]Your text[/raw]
Tooltips may occur in two forms: a link to a different website with a tooltip or a text connected with the text:
[tip label=”Default style” style=”1″ href=”URL”]Text of the tooltip[/tip]
[tip label=”Blue style” style=”2″ href=”URL”]Text of the tooltip[/tip]
[tip label=”Red style” style=”3″ href=”URL”]Text of the tooltip[/tip]
[tip label=”Green style” style=”4″ href=”URL”]Text of the tooltip[/tip]
[tip label=”Yellow style” style=”5″ href=”URL”]Text of the tooltip[/tip]
Elements which could not be groupped to other categories.
Columns allow to place text in multicolumn layout:
[columns]
[column]Content for the first column[/column]
[column]Content for the second column[/column]
[column]Content for the third column[/column]
[/columns]
You can also adjust the columns width using the width attribute:
[columns width=”50,25,25″]
[column]Content for the first column[/column]
[column]Content for the second column[/column]
[column]Content for the third column[/column]
[/columns]
Toggle text – elements useful for creating blocks with text to toggle:
[toggle header=”Header text”]Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.[/toggle]
[toggle header=”Header text” open=”true”]Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.[/toggle]
Shortcode pageurl allows to place an address to a blog:
[pageurl]
A link to a RSS channel:
[rss href=”URL”]Link text[/rss]
A link to a PDF document:
[pdf url=”URL”]Text of the link[/pdf]
A private note in an entry, visible for an author only:
[note]Your private note[/note]
Mail illegible for bots creating data bases for spammers:
[mail]email.to@obfuscate.com[/mail]
Content visible for logged in users only:
Related posts:
[related limit=”5″]