Installation Default Restaurant Ecommerce
Introduction
The Quark Restaurant style swaps the clean design demonstrated in the default Quark style for a more rustic, homely layout with a host of new features that offer new ways to highlight your restaurant's atmosphere as well as its food with video backgrounds, parallax images and more, and includes the core aspects like menu pages and reservation functionality you would expect to provide a connection to your customers.
Though the core layout of Restaurant is warm and inviting, you'll naturally want to add your personal touch. In this guide we'll look at some core changes that you might want to do to refocus the content to your own establishment or clientèle. For accuracy this guide's customization options will be based on the demo layout, which you can achieve if you've followed either the manual or quickstart installation guides.
Guide Structure
This guide for Restaurant has three major sections:
- Theme Options - Provides details on the options available in the Theme Customizer, with additional details on how to use these options where necessary.
- Frontpage Elements - Examines how to modify the core frontpage elements of the Restaurant layout to repurpose it for your own needs; this includes modifying text, widgets, or other specific elements of the frontpage.
- Theme Features - Includes details on how to use and modify the Restaurant-specific features and content, such as menu pages, reservation plugins and typography.
Theme Options
Quark Restaurant includes support for the WordPress Customizer, where you may modify many theme-specific items such as colors and layouts with a real-time preview so you can see the effect of any changes you make before committing. In this section we'll look at each option and its functionality.
Colors
The Colors section allows for instant modification of the theme's main colors. Restaurant is mainly an image or white-based theme, but there are still four color elements that can be modified:
- Primary Color - This option sets the color of major elements, such as button text or link text and Cookie Law banner buttons, and the default header background color (displayed if no background image is selected for parallax effects).
- Secondary Color - This option sets the color for secondary elements like the button frame in the parallax scrolling blocks.
- Tertiary Color - Like the secondary color, this option sets the color of button or picture frame elements, but instead of modifying the blocks with parallax images this options sets the color for text blocks. The options are separated so that dark-colored images can have a light button frame or text, whilst elements on a white background can have a darker coloring, improving readability.
- Dark Color - Changes the color for elements using the dark CSS suffix; in the demo content this would include things like the Newsletter sign-up block, though you can add this class to your other elements if necessary.
Header Image
The Header Image section lets you control the background image for the frontpage, which displays the HTML content from the default frontpage that's using the Frontpage template as an overlay, and adds a parallax effect to the image. There are two main options in this area:
- Add New Image - This button will allow you to upload a new header image, or choose an existing image from your WordPress Media collection.
- Hide Image - Removes the currently-set background image, ready for a new one to be uploaded or selected.
There are also two secondary options:
- Randomize uploaded headers - Previous headers you've uploaded are displayed in the Previously uploaded section to let you rollback image changes quickly if necessary. This option allows you have WordPress rotate through your previously uploaded headers automatically each time a user visits your site.
- Randomize suggested headers - The Suggested section of this option area includes suggestions on which header image to select, based on previous activity. By clicking this option you may have WordPress randomly assign the header from the suggested headers.
Navigation
This section provides options for assigning menus to the available menu areas of the theme just like you'd find in the Appearance → Menus section of your WordPress backend, though with no options for modifying the menu content; you may only assign menus in this section. There is also one additional checkbox that's very important:
- Enable Classic Menu - By default Restaurant uses an Off-Canvas menu that pops in from the right of the screen when the menu button is clicked. When this option is checked, the main menu is displayed in a classic layout instead of off-canvas.
Widgets
Here you may remove, modify or add widgets to the available widget areas just like in the Appearance → Widgets section of your WordPress backend.
Static Front Page
This section allows you to select whether your front page is based on your latest posts, or displays a static page. Since Quark Restaurant's frontpage relies on a particular frontpage being set you'll likely not need to modify these options.
Font Options
Here you may set the fonts used in the theme; either a standard font or a Google font. There are two font areas to be chosen; one for the headers and titles of the theme and another for the body, or content of the page.
Using a Google Font
Using a Google font in Photo requires some very simple steps:
- Navigate to to Google Fonts website.
- From the list of fonts, select the one you wish to use and click the Quick Use icon.
- Select the styles and character sets you wish to use for the font by clicking the tickboxes next to each.
- In the Add this code to your website section, copy only the font URL from the link element.
- In the Appearance → Customize → Font options section of your WordPress backend, select Google Font in the drop-down list for the section you wish to use.
- Paste the copied URL into the Google Font URL for Header/Body/Other Elements field; after a moment the live preview will update to show you how your site looks with the new font.
- Click the Save & Publish button to save changes.
The font has now been set as needed, and you will see the changes in the live preview window.
Using a Standard Font
The standard fonts available may be seen and selected in the Header Font, Body Font or Other Elements Font drop-down list; under the initial Google Font option are a list of standard fonts, so if you wish to use one of these fonts you may simply select it from the list, and the live preview will updated accordingly.
Default font configuration
Body font
Google Font
//fonts.googleapis.com/css?family=Open+Sans:300,400,500,700
Selectors:
body, button, .button, input[type="submit"], input[type="button"], select, textarea, input[type="text"], input[type="password"], input[type="url"], input[type="email"], article header h1, article header h2
Using a Standard Font
The standard fonts available may be seen and selected in the Header Font, Body Font or Other Elements Font drop-down list; under the initial Google Font option are a list of standard fonts, so if you wish to use one of these fonts you may simply select it from the list, and the live preview will updated accordingly.
Layout
The layout options allow you to control the theme width across all display sizes. Each width setting for responsive displays, which includes the Theme Width, Tablet Width, Small Tablet Width and Mobile Width options, all define their sizes in pixels (px). The theme has our recommended widths already set, but you are free to modify these should you have a preferred width in mind for your site.
There are also two options related to the sidebar layout; Restaurant doesn't use a sidebar by default, but if you should add widgets to the sidebar you can define whether the sidebar appears on the left or right of the page with the Sidebar Position option, and set the percentage of the total page width that the sidebar should take up with the Sidebar width (%) option.
Features
This section provides multiple toggles for enabling/disabling core theme features, and provides additional controls for extras such as search page header images and copyright information.
The available toggle controls, which you may choose to enable or disable by adding a tick to the relevant clickbox, are as follows:
- Enable Word-Break - This option may be useful when using elements with a dynamic width or a non-romanized language such as Japanese or Korean that may not word-wrap correctly otherwise.
- Use Scroll Reveal - Sets whether scroll reveal animations (discussed in the Theme Features section of this guide) are enabled or not.
- Use Photo Swipe - When enabled, images added to a Gallery page (discussed in the Theme Features section) will be browsable via a touch interface that uses swipes to move between zoomed-in images.
- Use Kalendae Script - When enabled, users entering a date in the Reservation page will see a calendar pop-up so a date may be selected from the list. If disabled, the date must be entered manually.
- Display Related Posts - When enabled your blog posts will include an area above the comments where posts related to the post currently being read are displayed as thumbnails with titles.
- Display Mouse Icon in Header - Decides whether an animated mouse icon in the header like that used in the default layout of Quark is displayed on the currently shown page.
- Dark Image Background - When enabled, the theme logo and menu buttons will be set to a light color instead of dark (or light image logo if you've defined one) so it is easier to see if the header images are dark-colored. This option can be toggled on each individual page, whether for posts, pages or categories.
- Dark Image Background in Header - The same functionality as the Dark Image Background option above, but specific to the frontpage of the theme.
- Use Page Preloader - Sets whether the preload animation is displayed when the pages of the theme are loading or not.
- Enable Popup Login - When enabled users clicking the Login/Register link will open a popup overlay containing the the login fields without leaving the current page; if disabled then the link will lead to a separate login page.
- Date Format - This option sets whether dates are displayed in the theme-specific way, or in the standard WordPress way. In Quark, the theme date format reads "Sunday, 5 October 2014", whereas the standard WordPress version would use "October 5, 2014" without the day or shortened month name.
- Upload Author Page Background - Like the frontpage header options, this setting lets you assign an image to be used as the parallax background header on author pages (what users see when they click an author's name in a blog post).
- Upload Error Page Background - Sets the header background image for the 404 error page.
- Upload Search Page Background - Sets the header background for the search page.
- Copyright Text - Decides what copyright text should appear at the bottom of all pages. You can replace the existing text with your own, or remove it entirely by leaving the field blank.
Images
The images options let you set the exact image height for each screen size to provide more effective site experiences for users on a range of devices. There are five image height options that provide the ability to height of images used the header area of each page. There are specific settings for each screen size, so you can use smaller images for smaller screens to improve the browsing experience. Width for the images is based on the layout settings defined earlier.
Social API
The social API included with Quark Restaurant provides options for including sharing, liking and other useful social media sharing buttons along with icons for several other media networks. The settings in this section provide toggle controls so you can decide which elements should be shown or hidden. The available options are:
- Post Social Icons - When enabled your chosen social media share buttons, including Facebook, Twitter, Google+, Pinterest, LinkedIn and VK, will be displayed on all your WordPress posts.
- Page Social Icons - When this option is active your chosen social media share buttons will appear on all your WordPress pages.
- Enable Popup for Social Icons - If enabled the social media share buttons will be hidden, with a Share icon taking their place. When clicked, the available sharing options will be displayed in a separate popup overlay for instant sharing and clean post/page layouts.
- Enable Facebook/Twitter/Google etc... Icon - This set of 6 toggles lets you decide which social media icons should be displayed on your posts/pages; simply add a check to all icons you want to be available on your site.
Cookie Law
The Cookie Law section includes options to aid websites in adhering to the EU regulations on cookies; it requires that users are told if the website uses cookies, and must opt-in before cookies may be permitted.
Restaurant has its own cookie banner prepared that matches the theme aesthetic to help your site be compatible with this law without damaging the site's looks. This section includes the following options:
- Use Cookie Consent plugin - When enabled, the cookie consent banner and options will be displayed to users visiting your site.
- Consent Mode - Defines the type of cookie consent your site uses; choose from Explicit, where no cookies are set until the visitor consents, and Implied, which sets cookies but offers users the option to opt-out.
- Use SSL - Sets whether the cookie banner and options uses Secure Sockets Layer (SSL) to encrypt any data it receives.
- Banner Placement - Defines where the banner appears on your site, such as at the bottom or top of the viewport.
- Tag Placement - Sets the position of the Privacy Policy tag.
- Refresh after gaining consent - When enabled, the page will be refreshed automatically once the user consents to cookies.
There are some advanced configuration options available with this plugin; more information may be found on our blog in this Quark Features article.
Contact Page
The contact page settings appear only when the Theme Customizer preview window is display your contact page; in the demo content the contact page is reachable via the main menu, so after opening the Theme Customizer simply click on the menu button in the viewport and click the Contact link.
Once on the page, the Contact Page options tab will appear at the bottom of the list of theme options. The following settings are available:
- Enable reCaptcha - When enabled users will need to verify they are a real person and not a spambot by filling out a reCaptcha.
- Email Source - The email address entered in this section will be the target email for any messages sent via the contact form; if left blank the site administrator email address is used by default.
- Email header text - This option sets the subtitle text that appears directly under the main title of the page in the header:
- Facebook, Twitter and Google+ URLs - These three fields set the link URLs for the three social icons that are displayed in the header under the subtitle; usually they will be set to point to your equivalent social media profile. If any of these fields are left blank then the icon will not be displayed.
- URL of map button - Sets the link URL for the View on Google Maps link button at the bottom of the contact page header. Leave this field blank if you want to remove this text.
Frontpage Elements
Restaurant offers a beautiful, enticing frontpage, but it's not much use to you until you've repurposed the existing content for your own establishment. In this section, we'll look at each section of the frontpage and discuss how it is created and provide tips on some basic customization so that you can make this theme your own.
Frontpage Layout
The frontpage of Restaurant uses our page-based layout; a base page is created and assigned a Frontpage template with the HTML code for the header text added, and then subpages are added corresponding to each section of the frontpage. The content from these pages is then automatically arranged into the complete frontpage like what you see on our demo site. As such, any modification will require that we modify the content of the given section's subpage.
This guide assumes that you have already installed the quickstart or followed the manual installation guide, and so already have the demo frontpage and its subpages ready to be modified.
Many of the HTML tags in the demo content include **data-sr** attributes; these attributes refer to the ScrollReveal JavaScript library which is included in Quark Restaurant and allows users to add reveal animations to their HTML elements. More information on how these attributes may be modified is covered in the **Features** section of this guide if you are interested in changing the animations, or you can leave them as they are to use the default for the theme.
Common CSS Classes
The Restaurant style, and the Quark theme in general, have been designed to offer robust, eclectic layouts. This often requires nuanced HTML content so that appropriate CSS rules can be applied to achieve an effect, like separating items into columns. Two elements are commonly used for this; <div> HTML tags, which can separate content into "blocks" for easier separation, and CSS Classes that are added to the <div> or other HTML elements that allows for more targeted style changes.
Many of the sections covered in this guide will have special one-off classes to style their content; the effects and use of these classes will be discussed in their specific sections. However, there are also several common CSS classes that will be used repeatedly throughout the content because their function is particularly useful and time-saving. In this section, we'll look at the common CSS classes, which HTML tag they are applied to, and what they actually do, so that you are able to understand their purpose when you encounter them when modifying the frontpage content.
Common <div> Element CSS Classes
The <div> tag is a core component of any layout; it separates content into standalone blocks that can then be styled individually; with them you can, for example, align an entire column of content to the right of the screen without creating CSS for each individual tag. It's a very useful functionality, and Quark includes several <div>-specific classes to help diversify the content's layout:
-
gk-cols - <div> tags with this class will separate any content between them (contained within nested <div> tags) into equally-sized columns. This class will also have an attribute added to the tag, data-cols, which specifies the number of columns. For example, a two-column section would use three sets of <div> tags; the first set containing the gk-cols class and data-cols attribute (set to 2), and the second and third sets placed within the first set creating the column content:
<div class="gk-cols" data-cols="2"> <div>First Column Content</div> <div>Second Column Content</div> </div>
This class is very common in Quark as it offers several interesting layouts that rely on separating content into distinct columns.
-
bigger-spaces - When added to a <div> tag, this class increases the padding (margin) size at the top and bottom of the content. This class is needed because each section's block will automatically resize itself to fit the content; if you have only one line of text the block would be very thin and some CSS-created elements, like borders, would overlap into the sections above and below. With the bigger-spaces class attached, the text would have a larger space to fit into for a clearer transition between blocks.
- small-spaces - Provides the same functionality as the bigger-spaces class, but adds a smaller amount of padding at the top and bottom for more fine-tuned control of the section's size.
- very-big-spaces - Again, similar functionality to the small-spaces and bigger-spaces classes, but this class adds a higher amount of padding than the others.
- col-width-x (where "x" is a number) - This class specifies a particular width for a column of content created by the gk-cols class to help keep the layout standardized on different sized screens; for example, an element with the class col-width-40 will have a fixed width of 40% of the available page width. There are multiple values available that are used to provide a responsive base to some theme elements.
- col-t-width-x (where "x" is a number) - Functionally the same as the col-width-x class, but this time focused on screen-sizes that correspond to tablets or smaller, which usually will use a smaller percentage. Again, it sets a fixed width to keep the element responsive and natural-looking no matter the screen size.
Common <a> Element CSS Classes
The <a> tag can be used to create simple text links, but with the right CSS it can be much more.
- btn - <a> tags with this class attached are styled into buttons rather than plain text links; the text is used as the button text, and a colored border is added.
- btn-large - Like the plain btn class, an <a> with this tag will be styled into a button, but this time the button will be larger than that created with the btn class.
The Frontpage Header
The Frontpage Header is a simple but visually-appealing parallax image background with overlaid text and a button link that can be directed to your most important area, such as the menu or reservation page:
The code for the header is taken from the base page that is using the Frontpage template, with the background image set in the Customizer as covered in the Frontpage area of the Theme Options section of this guide, above. The HTML code used in the page mainbody field is as follows:
<div class="gk-page"><i class="gkicon-dinner big-icon" data-sr="enter bottom and move 50px"></i>
<h1 data-sr="enter bottom and move 50px">Welcome to Quark food</h1>
<p data-sr="enter bottom and move 50px and wait .2s">Bar, bistro, restaurant theme</p>
<a class="btn" href="#" data-sr="enter bottom and move 50px and wait .3s">Browse Menu</a>
</div>
<sub data-sr="enter bottom and move 50px and wait .3s">Quaking Row, Kensington, IN, 47699-9366, US <br \>Hours 11am – 11pm, daily</sub>
HTML Breakdown
This section will give a brief explanation on each tag used in the HTML code and what it does; if you want to start modifying your content you can jump to the next section. First, we'll provide a listing of the demo content with all the demo text replaced with placeholders that tell you exactly what kind of text/information should go in which area:
<div class="gk-page"><i class="Icon Class Here big-icon" data-sr="enter bottom and move 50px"></i>
<h1 data-sr="enter bottom and move 50px">Title Text Here</h1>
<p data-sr="enter bottom and move 50px and wait .2s">Subtitle Text Here</p>
<a class="btn" href="/Button Link URL Here" data-sr="enter bottom and move 50px and wait .3s">Button Text Here</a>
</div>
<sub data-sr="enter bottom and move 50px and wait .3s">Address and Opening Hours Text Here</sub>
The code opens with a <div> tag that uses the gk-page class:
<div class="gk-page">
This class sets some core layout CSS for the header, and is imperative for the section to function correctly. After this is an empty set of <i> tags that defines the icon that appears at the top of the header; the class of the opening <i> tag is what defines which icon should be displayed:
<i class="gkicon-dinner big-icon" data-sr="enter bottom and move 50px"></i>
It also uses a big-icon class to make the icon larger than the standard font for this section. Next comes the title and subtitle text from the header; the title is contained in a set of <h1> tags and the subtitle is placed in the set of <p> tags underneath the title:
<h1 data-sr="enter bottom and move 50px">Welcome to Quark food</h1> <p data-sr="enter bottom and move 50px and wait .2s">Bar, bistro, restaurant theme</p>
After the title and subtitle text is a button call-to-action, which in the demo tempts visitors to check out the menu. The button is created using a standard <a> link tag, but with a special btn class assigned that takes care of button styling, with the link URL in the href attribute of the opening tag:
<a class="btn" href="/Button Link URL Here" data-sr="enter bottom and move 50px and wait .3s">Button Text Here</a>
Then the main header content block is ended with a closing </div> tag:
</div>
Then comes the final bit of header content; a <sub> tag that contains the address and opening hours info that is displayed as small text at the bottom of the header:
<sub data-sr="enter bottom and move 50px and wait .3s">Address and Opening Hours Text Here</sub>
Changing the Header Icon
The icon of a dinner plate with cutlery that appears at the top of the header is created in the first line of the page's HTML code following the opening <div> element:
<div class="gk-page"><i class="Icon Class Here big-icon" data-sr="enter bottom and move 50px"></i>
An empty set of <i> tags are created, and the class assigned in the opening <i> tag decides which icon will be displayed. For example, in the demo content a dinnerplate icon is used via the class gkicon-dinner:
<i class="gkicon-dinner big-icon" data-sr="enter bottom and move 50px"></i>
There is also a second class assigned here, big-icon; this class makes the icon larger than standard to make it more noticeable. To change the icon, we must modify the class to our chosen icon. Full details of the available icons and how to insert them into your content may be found in the Theme Features → Theme Icons section of this guide.
Editing the Title and Subtitle
The title and subtitle of the theme come immediately after the icon, and should be used to instantly display your eatery's name and a tagline that makes it clear what you're all about. These elements are created in the in HTML tags directly following the icon's <i> tag; an <h1> tag for the title, and a standard <p> tag for the subtitle:
<h1 data-sr="enter bottom and move 50px">Welcome to Quark food</h1> <p data-sr="enter bottom and move 50px and wait .2s">Bar, bistro, restaurant theme</p>
Modifying these texts is very simple; leave the tags untouched, but change the text between the <h1> tags to your own title, and change the text between the <p> tags to your own subtitle; the modified code with placeholder text as detailed above makes things even clearer:
<h1 data-sr="enter bottom and move 50px">Title Text Here</h1> <p data-sr="enter bottom and move 50px and wait .2s">Subtitle Text Here</p>
Adding Extra Titles or Subtitles
The title of the header section is created with an <h1> tag; this is the most important title tag and should only be used once on each page. Equally, the subtitle tag's CSS specifically targets a single instance of the <p> tag; extra <p> tags in the header will not be styled correctly. So how can you have more titles or subtitles? Technically, you can't without modifying the CSS, but you can use the <br \> line-break tag to split your existing title or subtitle into multiple lines, which is functionally the same result.
For example, if we wanted to add a second subtitle to our header that says "Book a table today!"; we can take the basic subtitle HTML tags:
<p data-sr="enter bottom and move 50px and wait .2s">Bar, bistro, restaurant theme</p>
And add a <br \> tag immediately after the end of the subtitle but before the closing <\p> tag, followed by our second subtitle's text:
<p data-sr="enter bottom and move 50px and wait .2s">Bar, bistro, restaurant theme<br \>Book a table today!</p>
After saving the update, the new subtitle will look like this:
You can do this with both subtitle and titles, but remember to pay attention to the available space so as not to pack the header to densely.
Changing the Button Link and Text
The button is created with an <a> tag in the example code, but with a special class added, btn, which restyles the standard link into a button layout with a border. The single line of code appears directly after the subtitle's code:
<a class="btn" href="/Button Link URL Here" data-sr="enter bottom and move 50px and wait .3s">Button Text Here</a>
Something to bear in mind is that directly after this link tag is a closing </div> element that signifies the end of the main block as mentioned in the HTML code breakdown above.
Changing the Link
By default in the demo content the button doesn't actually link anywhere; it's left blank ready for customization. We'll need to add our own link URL to the href attribute of the <a> tag:
href="Button Link URL Here"
It's enough to simply copy and paste your link URL between the quotation marks. For example, if I wanted the button to link to the site's reservation page, I might add the following URL to the <a> tag:
www.sitename.com/make-a-reservation
The amended code would be:
<a class="btn" href="/www.sitename.com/make-a-reservation" data-sr="enter bottom and move 50px and wait .3s">Button Text Here</a>
Changing the Text
So your button now links somewhere, but you still need to make sure the button text is clear; it's not much use linking to your reservation page if the button says "Browse our Menu"! To change the text of the button, you just need to modify the text between the opening and closing <a> tags; the text says "Button Text Here" in the placeholder code above:
<a class="btn" href="/www.sitename.com/make-a-reservation" data-sr="enter bottom and move 50px and wait .3s">Button Text Here</a>
For example, if I want my button that links to the reservation page to say "Reserve Now", I would just adjust the code as follows:
<a class="btn" href="/www.sitename.com/make-a-reservation" data-sr="enter bottom and move 50px and wait .3s">Reserve Now</a>
Very easy to do!
Modifying the Address and Opening Hours
At the bottom of the header is some small text that is used in the demo content to display useful information for potential customers, including the street address of the establishment and opening hours so they know when they can come and eat! This information is set separately from the rest of the header content and is created using a single <sub>, that appears straight after the closing </div> of the first block:
<sub data-sr="enter bottom and move 50px and wait .3s">Quaking Row, Kensington, IN, 47699-9366, US <br \>Hours 11am – 11pm, daily</sub>
To modify this content we'll need to add our own text between the opening and closing tags, just like in breakdown content:
<sub data-sr="enter bottom and move 50px and wait .3s">Address and Opening Hours Text Here</sub>
If you wish to have multiple lines like that of the demo content, where the address and opening hours are separated, you will need to use a line-break <br /> tag to separate each line:
<sub data-sr="enter bottom and move 50px and wait .3s">First Line Address <br />
Second Line Opening Hours</sub>
If needed you can use additional <br /> tags to add further lines:
<sub data-sr="enter bottom and move 50px and wait .3s">First Line Address <br />
Second Line Opening Hours <br />
Third Line Contact Number</sub>
The text will be automatically centered and the header extended to accept more lines, but do bear in mind that adding too many lines will look rather messy so keeping things simple is probably for the best!
Changing the Header Background Image
The background image in the header has an eye-catching parallax effect added, so it's well worth taking advantage with your own custom photography. The header image is controlled entirely via the theme options in the WordPress Customiser, as detailed in the Theme Options section of this guide.
The Restaurant Section
The Restaurant section appears directly under the header of the frontpage, and combines three separate elements for an eclectic but memorable section, including a text block with link in the left column, a vertical image on the right, and a button with accompanying text at the bottom:
This section is created by adding the HTML code to the mainbody section of the first subpage of the Frontpage page. In the demo content this page is simply called Restaurant, and the HTML code used in this page is as follows:
<div class="gk-cols bigger-spaces" data-cols="2">
<div class="gk-intro">
<h3>Restaurant</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.
</p>
<p>
Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.
</p>
<a href="#" class="gk-read-more">Learn more</a> </div>
<div> <span class="gk-image-border gk-right gk-border-anim" data-sr="enter right and move 100px over .01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/restaurant_image.jpg" alt="Restaurant" /></span> </div>
</div>
<div class="gk-cols" data-cols="2">
<div class="col-width-40 col-t-width-50"> <a href="#" class="btn large" data-sr="enter left and move 100px and wait 0.2s">Online reservations</a> </div>
<div class="col-width-60 col-t-width-50 gk-intro-small" data-sr="enter right and move 100px and wait 0.2s">
<h3>Valentine’s Day</h3>
<p>
This Valentine’s Day, enjoy delicious specials at our new NY location.
</p>
</div>
</div>
HTML Breakdown
At first glance the HTML code may seem quite daunting for beginners, but it's really quite simple to follow once you understand the layout. If you're interested in learning how the code fits together you should continue reading this section; otherwise if you're just interested in swapping out the existing content with your own you may jump straight to the next section where we cover how to add your own text and images to the section. Still reading? Then first, let's replace the demo content with simple placeholder text so you can see which information goes where:
<div class="gk-cols bigger-spaces" data-cols="2">
<div class="gk-intro">
<h3>Left Column Title Here</h3>
<p>
Left Column First Paragraph Here
</p>
<p>
Left Column Second Paragraph Here
</p>
<a href="/Left Column Button Link URL Here" class="gk-read-more">Left Column Button Text Here</a> </div>
<div> <span class="gk-image-border gk-right gk-border-anim" data-sr="enter right and move 100px over .01s"><img src="/Right Column Image URL Here" alt="Restaurant" /></span> </div>
</div>
<div class="gk-cols" data-cols="2">
<div class="col-width-40 col-t-width-50"> <a href="/Bottom Button Link URL Here" class="btn large" data-sr="enter left and move 100px and wait 0.2s">Bottom Button Text Here</a> </div>
<div class="col-width-60 col-t-width-50 gk-intro-small" data-sr="enter right and move 100px and wait 0.2s">
<h3>Bottom Title Here</h3>
<p>
Bottom Text Here
</p>
</div>
</div>
This should make things a bit clearer, but it can still be a bit daunting if you're new to this kind of thing, so let's break it down into sections.
The code begins with an opening <div> tag with the gk-cols class attached to create two columns of content. Then, the first column's content is opened with another new <div>, this time with the gk-intro class attached; this class is used so that specific CSS changes to the font-size and styling can be targeted only on the left column:
<div class="gk-cols bigger-spaces" data-cols="2"> <div class="gk-intro">
Next, the content for the left column, consisting of a title provided by an <h2> tag and two paragraphs added with plain <p> tags:
<h3>Left Column Title Here</h3> <p> Left Column First Paragraph Here </p> <p> Left Column Second Paragraph Here </p>
Finally, the "Learn More" link text is added in an <a> tag with a gk-read-more class attached that adds extra highlights such as bolding and underlining as well as adjusting the font, before the left column's content is closed with a closing </div> tag:
<a href="/Left Column Button Link URL Here" class="gk-read-more">Left Column Button Text Here</a> </div>
Next comes the second column's content; another <div> tag opens the content, and an image is added with a combination of two tags and several classes; a <span> tag that includes the gk-image-border, gk-right and gk-border-anim classes. These three classes add extra flair or styling to the image; gk-image-border adds a colored border that surrounds the image, while gk-border-anim adds a simple reveal animation that slides the border so that it is off-center with the image.
Lastly, the gk-right class is used to align the column contents to the right of the column.
<div> <span class="gk-image-border gk-right gk-border-anim" data-sr="enter right and move 100px over .01s">
Now that these special classes that will affect the image's border and alignment have been declared, the image itself is added using a plain <img> tag, and the column content is closed out with the closing </span> and </div> tags:
<img src="/Right Column Image URL Here" alt="Restaurant" /></span> </div>
Then there's another closing </div>, this time to signal the end of the two columns' content.
</div>
Now comes the bottom section, where the reservations button and Valentine's Day promotional text is. This section is similar to the the preceding block of code; a new <div> is created with the gk-cols class to separate the section into two columns, and the first column's content is opened with yet another <div>:
<div class="gk-cols" data-cols="2">
<div class="col-width-40 col-t-width-50">
The first column's <div> includes the col-width-x and col-t-width-x classes; you can learn more of these classes purpose in the Common CSS Classes section of this guide. After the opening <div> a button is created with an <a> tag and the btn-large class, with the text between the tags used for the button label, followed by a closing </div> to end the column's content:
<a href="/Bottom Button Link URL Here" class="btn large" data-sr="enter left and move 100px and wait 0.2s">Bottom Button Text Here</a> </div>
Next, the second column's content is created with an opening <div> tag once again, with a col-width-x class for controlling the responsive width and a gk-intro-small class, which is used to adjust the text size and font:
<div class="col-width-60 col-t-width-50 gk-intro-small" data-sr="enter right and move 100px and wait 0.2s">
The content for this section is then added, with a simple title and subtitle provided by plain <h3> and <p> tags before the second column's <div> and the entire section is closed with two closing </div> tags:
<h3>Valentine’s Day</h3> <p> This Valentine’s Day, enjoy delicious specials at our new NY location. </p> </div> </div>
And that's the full code for the section, and how it fits together! It seems like quite a hefty bit of code, but realistically you only need to make minor changes to the existing text and tags to create wholly-original content that takes advantage of the styling included in Quark Restaurant.
Modifying the Left Column
The left column can be split into two sections; the first containing the title and text paragraphs, and the second containing the text link.
Modifying the Title and Text
The left column's title and text are all contained in the <h3> and <p> tags immediately following the opening 2 <div> tags:
<div class="gk-cols bigger-spaces" data-cols="2"> <div class="gk-intro"> <h3>Left Column Title Here</h3> <p> Left Column First Paragraph Here </p> <p> Left Column Second Paragraph Here </p>
Simply add your title and text to the specified areas; the demo content already has its own text in these areas, so don't forget to delete it before adding your own!
Adding More Text Paragraphs
You may extend the content in this section by creating additional <p> tags to create additional paragraphs. As more content is added the block's height will automatically increase to accommodate it. Theoretically you can add as much content as you wish, but do bear in mind that adding to much content will cause the left column to extend past the right column's image, which will look less appealing. As an example, a left column HTML code with three paragraphs would look like this:
<div class="gk-cols bigger-spaces" data-cols="2"> <div class="gk-intro"> <h3>Left Column Title Here</h3> <p> Left Column First Paragraph Here </p> <p> Left Column Second Paragraph Here </p> <p> Left Column Third Paragraph Here </p>
Adding Additional Titles
What if you want to have two titles and paragraphs; can you just duplicate the <h3> and <p> tags? Unfortunately, this is not as simple as first appears. This is because in this section the <h3> tag has additional padding added to help it blend with the right column content more effectively; the area under the title has much more padding than the top, so using two sets of tags like this:
<h3>Restaurant</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.
</p>
<h3>Restaurant</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.
</p>
Will result in the second title being placed a short margin from the end of the first paragraph, while the second paragraph will have a much larger gap:
This layout works well with one title, but if you want to have additional titles it will be necessary to modify the margin sizes for the element in CSS. If you're unfamiliar with making such changes, you'll want to start by getting to grips with WordPress Child Themes or learn how to Apply Custom CSS to our themes.
Modifying the Link
Under the text in the left column is a simple bit of highlighted text that is used to link to another area of the site, whether you want to link to your menu page or other sections.
<a href="/Left Column Button Link URL Here" class="gk-read-more">Left Column Button Text Here</a> </div>
To set the link, you'll need to add your chosen link's URL into the href attribute of the <a> tag; in the demo content the link is left blank with just a pound/hash sign (#) as a placeholder, so make sure to remove this before pasting your own URL in, otherwise the link might not function properly.
For the text, just modify the text between the opening and closing <a> tags to your own.
Adding More Links
Unlike the titles, it's entirely possible add more links to this section just with the addition of more <a> tags with the gk-read-more class attached, since the margins for this element are standardized. So, if you have one link text already:
<a href="/Left Column Button Link URL Here" class="gk-read-more">Left Column Button Text Here</a> </div>
You can just copy and paste the full <a> tag again and add it before the closing </div> for the section:
<a href="/Left Column Button Link URL Here" class="gk-read-more">Left Column Button Text Here</a> <a href="/Second Left Column Link URL Here" class="gk-read-more">Second Left Column Link Text Here</a></div>
You can use this if you want to add multiple links for several areas, such as a "Learn about our restaurant" and "learn about our chef" links. Remember that adding too many links will extend the height of the block automatically, so it's probably best to stick with two at the most.
Modifying the Right Column
The right column only displays an image, but there's a bit more going on under the hood with the CSS classes to help add more stylization like borders and animations to the area.
Modifying the Image
Changing the image that's displayed in this section is extremely easy, but there are several factors that should influence your decision as to which image from your media collection you should use. The image itself is created in the <img> tag that appears after the <span> element establishes the classes:
<img src="/Right Column Image URL Here" alt="Restaurant" />
To set the image, you'll just need to add your chosen image's URL into the src attribute of the <img> tag. If you want to use an image from your WordPress media library, you'll need to obtain the image's URL. You can find this by clicking on Media in your WordPress dashboard to open the media library, then clicking on the image you wish to use.
An overlay will open with additional information and image options; in the top-right part of the overlay is a URL field; copy this address and paste it into the src attribute as mentioned above to use the image in this section.
There are some things to be aware of when selecting your image; images used in this section will be automatically resized to fit the block, however, the aspect ratio of the chosen image will be preserved. This means that though the demo layout uses an image that's taller than it is wide.
If you select a standard-sized image that's larger horizontally, such as an image at 800x600 resolution, then the image will be displayed with the same aspect ratio (that is, wider horizontally than vertically). This isn't an issue on a technical level since the section and image border will resize itself accordingly, but it is something to consider when decided the layout of your page. It's a good idea to experiment and see what works for you.
Removing the Image Border
It may be that you want the image to appear on its own on the right, without the framing off-center border. This can be easily taken care of by removing the gk-image-border class from the <span> tag that appears before the <img> tag:
Before:
<span class="gk-image-border gk-right gk-border-anim" data-sr="enter right and move 100px over .01s">
After:
<span class="gk-right" data-sr="enter right and move 100px over .01s">
Notice that in the second block of code the gk-border-anim class has also been removed; this is because the class is specifically included to add a reveal animation to the border of the image. If the border has been removed there's no need for the animation code to be used either.
Using Multiple Images
If preferred it's entirely possible to add multiple images to this section in a vertical stack; this might be useful if you have extended the content of the left column and wish to add more images to avoid useless white space in the right column. The border of the images will be automatically extended to cover all the images too.
To add additional images, you'll need to add more <img> tags between the <span> tags in the block's code, such as in this example:
<span class="gk-image-border gk-right gk-border-anim" data-sr="enter right and move 100px over .01s"><img src="/Right Column Image URL Here" alt="Restaurant" /><img src="/Right Column Second Image URL Here" alt="Restaurant" /></span>
Added images will stack vertically on their own; it's recommended that you ensure that each of your images share the same aspect ratio or the images will not look uniform, which will damage the aesthetics of the site.
Modifying the Bottom Content
The bottom content is actually made up of two columns of content, just like the first part of this section. However, the content itself is very simple and easy to modify.
Modifying the Button
The large button that appears at the bottom of this section is created much like the other buttons in Quark; with an <a> tag and a special class, though in this case the btn-large class is used to create a larger button than usual. The tag itself is in the code directly after the <div> element that opens the first column of content in the bottom area (recognizable in the code by its use of the col-width-x and col-t-width-x classes:
<div class="gk-cols" data-cols="2"> <div class="col-width-40 col-t-width-50"> <a href="/Bottom Button Link URL Here" class="btn large" data-sr="enter left and move 100px and wait 0.2s">Bottom Button Text Here</a>
As with the other buttons, changing this button to suit your needs is easy. To change where the button links to, you'll need to add your chosen URL into the href attribute of the tag. For the button label, modify the text between the opening and closing <a> tag:
<a href="/Bottom Button Link URL Here" class="btn large" data-sr="enter left and move 100px and wait 0.2s">Bottom Button Text Here</a>
Modifying the Subtitle and Text
To the right of the button is the second column's content, which consists of a simple subtitle with text taken from the <h3> and <p> tags that follow the <div> tag that uses the gk-intro-small class in the demo content:
<div class="col-width-60 col-t-width-50 gk-intro-small" data-sr="enter right and move 100px and wait 0.2s"> <h3>Bottom Title Here</h3> <p> Bottom Text Here </p> </div>
So you can just modify the text between the tags to your own requirements. Make sure to leave the <div> elements and classes untouched though, as they're required to ensure the styling's correct!
The "Dinner in New York" Section
This section forms the second area after the frontpage header, and combines a parallax background with a transparent text overlay that's great for introducing customers to your location.
This section's code is taken from the second subpage of the Frontpage page; in the demo content this page is called "Where's the best place to get dinner". The parallax background is taken from the Featured Image of the page, whilst the other elements such as the overlay and text are created via the HTML code in the mainbody of the page, which looks like this:
<div class="gk-parallax-overlay very-big-spaces" data-sr="enter bottom and move 100px and scale up 10%">
<h2 data-sr="enter bottom and move 50px and wait .4s">Where's the best place to get a dinner in New York?</h2>
<hr data-sr="enter bottom and move 50px and wait .45s" />
<p data-sr="enter bottom and move 50px and wait .6s">
Lorem ipsum dolor sit amet, consectetur Integer adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo.
</p>
<a href="#" class="btn" data-sr="enter bottom and move 50px and wait .7s">Locate us</a>
</div>
HTML Breakdown
This section's HTML code is much simpler than the last, with few complexities to worry about. As always, we'll first break the code down by replacing the existing content with placeholder text that makes it clear which element goes where:
<div class="gk-parallax-overlay very-big-spaces" data-sr="enter bottom and move 100px and scale up 10%"> <h2 data-sr="enter bottom and move 50px and wait .4s">Title Text Here</h2> <hr data-sr="enter bottom and move 50px and wait .45s" /> <p data-sr="enter bottom and move 50px and wait .6s"> Paragraph Text Here </p> <a href="/Button Link URL Here" class="btn" data-sr="enter bottom and move 50px and wait .7s">Button Label Text Here</a> </div>
First, an opening <div> that uses the very-big-spaces class and a new class, gk-parallax-overlay, which is used to create the transparent overlay that goes over the parallax background.
<div class="gk-parallax-overlay very-big-spaces" data-sr="enter bottom and move 100px and scale up 10%">
Next comes the content in the overlay; an <h2> tag provides the large section heading, whilst a plain <hr> tag is added after the heading to create the separating line under the title:
<h2 data-sr="enter bottom and move 50px and wait .4s">Title Text Here</h2> <hr data-sr="enter bottom and move 50px and wait .45s" />
After this comes the text content in a standard <p> tag:
<p data-sr="enter bottom and move 50px and wait .6s"> Paragraph Text Here </p>
Before the button at the bottom of the overlay is created with an <a> tag that uses the btn class, with the button label added between the opening and closing <a> tags, with the entire section ending with a closing </div>:
<a href="/Button Link URL Here" class="btn" data-sr="enter bottom and move 50px and wait .7s">Button Label Text Here</a> </div>
Changing the Title and Paragraph Text
The title and subtitle of this section are contained in the plain <h2> and <p> tags in the second and fourth line of the HTML code, separated by an <hr> tag:
<h2 data-sr="enter bottom and move 50px and wait .4s">Title Text Here</h2> <hr data-sr="enter bottom and move 50px and wait .45s" /> <p data-sr="enter bottom and move 50px and wait .6s"> Paragraph Text Here </p>
Just modify the text between the <h2> tags for your title, and the text between the <p> tags for your paragraph text.
Removing the Divider Line
You may decide that having the line separating the title and paragraph is not required; if so, all you need to do is delete the <hr> tag from the third line of code and it will be removed:
<hr data-sr="enter bottom and move 50px and wait .45s" />
Changing the Button Link and Label
Just like in the other areas of this theme the button link is created with an <a> tag, which in this case appears immediately after the <p> tag in the page's HTML code:
<a href="/Button Link URL Here" class="btn" data-sr="enter bottom and move 50px and wait .7s">Button Label Text Here</a>
To change where the button links to, add your link URL to the href attribute between the quotation marks. For the label, change the text between the opening and closing tags as per the placeholders.
Changing the Parallax Background Image
The parallax background image for this section is automatically taken from the Featured Image of the subpage, which is set via a special option block in the right sidebar of the page.
Adding your own image is easy; first, click on the Remove featured image text if you've already got an image loaded, like in our demo content. This deletes the image from the page and replaces the Remove featured image text with Set featured image.
Click on this new text to open the Set Featured Image overlay. Here you can upload a new file to use as your background image, or you can click on the Media Library tab to pick an existing image from your collection. Once you've found the image you want to use, click on it to select the image (a blue outline with a tick in the corner will appear around the image when it's selected) then click the Set featured image button in the bottom-right.
Your new image is set and will be used as the background by the theme automatically.
Adding More Paragraphs and Separators
The demo layout looks nice, but you may have some additional information that you want to add to this section; thankfully, the overlay and background block size are entirely flexible and will automatically increase in size to accommodate such changes. To add more paragraphs you simply create a new set of <p> tags beneath the existing text. For example, to have two paragraphs, you can change this demo code:
<div class="gk-parallax-overlay very-big-spaces" data-sr="enter bottom and move 100px and scale up 10%"> <h2 data-sr="enter bottom and move 50px and wait .4s">Title Text Here</h2> <hr data-sr="enter bottom and move 50px and wait .45s" /> <p data-sr="enter bottom and move 50px and wait .6s"> Paragraph Text Here </p> <a href="/Button Link URL Here" class="btn" data-sr="enter bottom and move 50px and wait .7s">Button Label Text Here</a> </div>
To:
<div class="gk-parallax-overlay very-big-spaces" data-sr="enter bottom and move 100px and scale up 10%"> <h2 data-sr="enter bottom and move 50px and wait .4s">Title Text Here</h2> <hr data-sr="enter bottom and move 50px and wait .45s" /> <p data-sr="enter bottom and move 50px and wait .6s"> First Paragraph Text Here </p> <p data-sr="enter bottom and move 50px and wait .6s"> Second Paragraph Text Here </p> <a href="/Button Link URL Here" class="btn" data-sr="enter bottom and move 50px and wait .7s">Button Label Text Here</a> </div>
Notice the second paragraph's <p> tags were added. It's also a good idea to copy the data-sr attribute in the existing <p> tag to the new one; this controls the reveal animation and you'll want your paragraphs to match together well.
If you want to add additional separators to this section, such as to separate two paragraphs, you can do so by just adding another <hr> tag. Don't forget to also copy the data-sr text across from the original if you want the element to be animated:
<p data-sr="enter bottom and move 50px and wait .6s"> First Paragraph Text Here </p> <hr data-sr="enter bottom and move 50px and wait .45s" /> <p data-sr="enter bottom and move 50px and wait .6s"> Second Paragraph Text Here </p>
The Quark Menu Section
Though the atmosphere, décor and service are all big drivers in your restaurant's success, you won't get anywhere without good food. This section offers a simple yet effective way to highlight some of the core dishes your chef has to offer to get mouths watering:
This section of the frontpage is created by taking the HTML code from the mainbody of the third subpage of the Frontpage page. In the demo content the HTML is:
<div class="bigger-spaces"> <div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Menu" /></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-dinner"></i> <h3>Quark Menu</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> </div> <a href="#" class="gk-read-more">Learn more</a> </div> </div> </div>
HTML Breakdown
Though there's a lot of HTML content in this section, it follows a very distinct and basic layout since it is essentially a list of items. Let's look at how it works. As always, we'll start by getting rid of the confusing demo content text and replacing it with placeholder text that makes it easy to see which content goes where:
<div class="bigger-spaces"> <div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="/Left Image URL" alt="Menu" /></span> </div> <div class="gk-menu col-width-60"> <i class="Top Icon Class"></i> <h3>Section Title</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>First Menu Item</dt> <dd>First Menu Item Price</dd> <dt>Second Menu Item</dt> <dd>Second Menu Item Price</dd> <dt>Third Menu Item</dt> <dd>Third Menu Item Price</dd> <dt>Fourth Menu Item</dt> <dd>Fourth Menu Item Price</dd> <dt>Fifth Menu Item</dt> <dd>Fifth Menu Item Price</dd> </dl> </div> <div> <dl> <dt>First Menu Item</dt> <dd>First Menu Item Price</dd> <dt>Second Menu Item</dt> <dd>Second Menu Item Price</dd> <dt>Third Menu Item</dt> <dd>Third Menu Item Price</dd> <dt>Fourth Menu Item</dt> <dd>Fourth Menu Item Price</dd> <dt>Fifth Menu Item</dt> <dd>Fifth Menu Item Price</dd> </dl> </div> </div> <a href="/Read More Link URL" class="gk-read-more">Read More Text</a> </div> </div> </div>
The code opens with a set of two opening <div> tags that use a range of classes to create the overall shape of the section; the first <div> contains the bigger-spaces class for larger margins, while the second <div> uses the gk-cols class to separate the content into two columns:
<div class="bigger-spaces"> <div class="gk-cols" data-cols="2">
Next comes the first column's content; first another <div> is created with the col-width-40 class to standardize its width. Then, we have a combination of a <span> and <img> tag to create the image on the left-hand side of the section:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="/Left Image URL Here" alt="Menu" /></span>
Like the Restaurant section under the header of the frontpage, the image here has some stylization provided by special classes in the <span> tag; gk-image-border and gk-border-anim classes add the off-centered color border to the image along with the reveal animation. There's also a gk-left class, which is used to align the contents to the left of the block. Then, the image itself is added in the standard way; via the src attribute of the <img> tag before the column content ends with a closing </div> tag.
The next part of the HTML code deals with the content of the right column, but things get a little bit more complicated. First, a new <div> tag is created to hold the column content. Then, the icon that appears at the top of the section is added with an <i> tag with the icon class added, and the title of the section is added immediately after with an <h3> tag:
<div class="gk-menu col-width-60"> <i class="Top Icon Class Here"></i> <h3>Section Title Here</h3>
Now comes the interesting part; another <div> tag is added with the gk-cols class, which splits the right column into two further columns, so you've got nested content columns that are then used to display the menu items:
<div class="gk-cols" data-cols="2">
Now the two menu columns must be created. Both columns follow the exact same pattern; a plain set <div> tags create the column area and then the menu items are added via a description list <dl> which functions much the same as an unordered list <ul> but with one difference; the description list has separate tags for titles <dt> and descriptions <dd>.
So to create the menu items, an opening <dl> list tag is added, and then each menu item name is added in a <dt> title tag, and the price added below in a <dd> description tag. Once all items are added, the closing </dl> and </div> tags are added to close out the list and the column content:
<div> <dl> <dt>First Menu Item</dt> <dd>First Menu Item Price</dd> <dt>Second Menu Item</dt> <dd>Second Menu Item Price</dd> <dt>Third Menu Item</dt> <dd>Third Menu Item Price</dd> <dt>Fourth Menu Item</dt> <dd>Fourth Menu Item Price</dd> <dt>Fifth Menu Item</dt> <dd>Fifth Menu Item Price</dd> </dl> </div>
That's the first column added, so what about the second? Well, the second column uses exactly the same HTML as the first column of menu items since the gk-cols class will automatically sort the two separate sets of <div> tags into the appropriate layout. Just after the end of this second menu block is another closing </div> tag that marks the end of the two columns of content:
<div> <dl> <dt>First Menu Item</dt> <dd>First Menu Item Price</dd> <dt>Second Menu Item</dt> <dd>Second Menu Item Price</dd> <dt>Third Menu Item</dt> <dd>Third Menu Item Price</dd> <dt>Fourth Menu Item</dt> <dd>Fourth Menu Item Price</dd> <dt>Fifth Menu Item</dt> <dd>Fifth Menu Item Price</dd> </dl> </div> </div>
At this point one final element is added; an <a> link tag that creates the read-more link at the bottom of the center column before all remaining <div> elements are closed with three final </div> tags:
<a href="/Read More Link URL" class="gk-read-more">Read More Text</a> </div> </div> </div>
Let's recap the layout of the section since there are a lot of <div> tags used to create the overall look. The first <div> creates larger margins at the top and bottom of the section. Then, the second one splits the entire block into two columns. The third <div> contains the content for the left column, and it also uses a col-width-40 class to force the column to 40% width, leaving 60% of the total width for the right column.
At this point the left column's content is ended with a closing </div>. Then, the right column's content is created with a new <div> that uses the col-width-60 class to force it's width to 60% of the total available width. Now two elements are added; the icon and section title.
Here's the tricky part; a new <div> is added with the gk-cols class; this splits the right column area below this tag into two additional columns at 30% width each. Then, another new <div> is used and the content for the menu items in the left column is added into it, with a closing </div> ending the section. Then, another set of <div> tags that uses the same layout as the previous section creates and closes the right column, so you have two menu lists.
Next, a closing </div> ends the nested columns, returning the right column to 60% width instead of two columns of 30% width. Then, the final piece is added; the link tag. After this comes the final closing </div> tags; the first one ends the right column, the second one ends the column content in general, and the third closes the entire section.
Changing the Left Column
The left column in this section displays just one element; an image with off-center colored border, so it's easy to change to your liking.
Changing the Image
To modify the image you'll need to change the URL in the src attribute of the <img> tag found in line 4 of the page's HTML code (it is contained within a <span> tag):
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Menu" /></span>
If you want to use an image from your Media Library you can find the URL very easily. Click on the Media link in your WordPress dashboard's left menu to open the Media Library, then click on the image you wish to use. An overlay will open; in the top-right corner you'll find a URL field. Copy the link in this field and paste it into the src attribute:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="/Paste Image URL Here" alt="Menu" /></span>
Don't forget to save changes!
Note: Bear in mind that images added to this section will be resized to fit, but the aspect ratio will be preserved. As such, for best aesthetic results try to use portrait images in this section
Removing the Image Border
You might find that you want to use an image on the left without the colored border. This is an easy fix; you simply need to remove the gk-image-border class from the <span> tag that wraps the <img> tag. If you do this, it's also worth removing the gk-border-anim class since this only adds an animation to the border.
Before:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="/Paste Image URL Here" alt="Menu" /></span>
After:
<span class="gk-left" data-sr="enter left and move 100px"><img src="/Paste Image URL Here" alt="Menu" /></span>
Using Multiple Images
Just like with the restaurant section under the header, you can add multiple images within the <span> tags if needed; any additional images will be vertically stacked and the colored border and section container will be expanded to cover it.
To add an image just duplicate the <img> tag and add it between the <span> tag:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="/Paste First Image URL Here" alt="Menu" /><img src="/Paste Second Image URL Here" alt="Menu2" /></span>
Don't forget that every image added increases the overall weight of your site and you want the section to be a snapshot of what you offer rather than a full menu, so it's a good idea to avoid overfilling this section with images.
Modifying the Right Column
The right column actually consists of three parts; the icon and title at the top, the menu items in the middle (split into a further two columns), and the link text at the very bottom. Let's look at modifying each of them in turn.
Changing the Icon
Right at the top of the section is one of the included icons from Pixel Love, which is created in the <i> in line 7 of the HTML code:
<i class="gkicon-dinner"></i>
The icon displayed is set in the class attribute of the <i> tag; any of the included icons from Pixel Love or Font Awesome can be used simply by adding the icon's class into this attribute. Full details of the available icons and how to insert them into your content may be found in the Theme Features → Theme Icons section of this guide.
Changing the Section Title
The section title is taken from the <h3> tags in line 8 of the HTML code:
<h3>Quark Menu</h3>
Change the text between these tags to set your own title as desired.
Changing the Menu Item Name and Price
The menu is split into two columns created by two identical description list tags. Inside these tags are the menu items, created by using a <dt> tag for the title, and a <dd> tag for the price, so each menu item's code looks like this:
<dt>Menu Item Name</dt> <dd>Menu Item Price<dd>
To change these elements, just modify the text between each of the tags; each list has five items and prices for a total of ten in the entire section:
<div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div>
Adding More Menu Items
Adding more menu items is easy; the hard part of adjusting the size of the block where the menu appears is automatically taken care of by the theme, so adding new menu items is as simple as adding a new set of <dt> and <dd> tags to the existing description list:
Before (5 items):
<dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl>
After (10 items):
<dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl>
One thing to bear in mind; if you decide to expand the number of menu items, make sure you do it for both description lists on the page, otherwise your columns will be different sizes.
The section's code when using 10 items per column looks like this:
<div class="bigger-spaces"> <div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Menu" /></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-dinner"></i> <h3>Quark Menu</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> <div> <dl> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> </div> <a href="#" class="gk-read-more">Learn more</a> </div> </div> </div>
And creates the following result:
Changing the Link Text and URL
At the bottom of the right column is a readmore, created using a standard link tag with the gk-read-more class attached:
<a href="#" class="gk-read-more">Learn more</a>
To change where the text links to when clicked (by default it does not in fact lead anywhere) you must replace the # in the href attribute of the opening <a> tag with your own URL. For the link text, change the text between the opening and closing tags:
<a href="/Link URL" class="gk-read-more">Link Text</a>
Adding Additional Read-More Texts
If you'd like to have two or more Read-More texts under your menu, then there are a few ways to go about it. First, you can add more Read-More links vertically by duplicating the link format directly after the existing one:
<a href="/Link URL" class="gk-read-more">Link Text</a> <a href="/Link URL" class="gk-read-more">Link Text</a>
The second link will appear underneath the first with a bit of a gap due to the padding the element receives.
Alternatively, you might want to try adding a read-more underneath each menu column; to do this you will still use the <a> tag format used above, but instead of adding it at the end in its own <div>, you add it directly after the description list, as in the following code:
<div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> <a href="/Link URL" class="gk-read-more">Link Text</a> </div> <div> <dl> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> <a href="/Link URL" class="gk-read-more">Link Text</a> </div> </div>
Notice the two <a> tags, one at the end of each menu description list? They will create two separate read-mores under the menu text.
Adding Titles to the Menu Lists
Perhaps you want to showcase different areas of your menu on your frontpage? You can of course simply list the items; it has been designed as an introduction rather than a full listing. If preferred, however, you can add titles to each column to provide further information about the items. To do this, you'll need to add your title tags (technically you can use any from <h2> - <h6>, but the best option for basic functionality is <h3>, since other titles are either too big or require additional CSS modifications to place and style them correctly) before the opening <dl> tag of the description list, as in the following example:
<div class="gk-cols" data-cols="2"> <div> <h3>Title</h3> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <h3>Title</h3> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> </div>
As you can see, before each description list is an <h3> tag, that then creates a title for the column.
Adding More Menu Columns
In the default layout there are two menu columns, but it is possible (and very easy) to add additional menu columns if desired with some minor changes. There are some limitations created by these changes, which we'll discuss over the course of this section.
To add more menu columns, we need to take care of two things:
- We must change the data-cols attribute that defines the number of columns accordingly.
- We must add the third column content in the correct format.
Changing the data-cols attribute is done in the <div> element that appears just after the <h3> title (line 9 of the demo content's code). In this example we'll create three menu columns, so all we need to do is change the data-cols attribute to "3":
<div class="gk-cols" data-cols="3">
The CSS code for the class will automatically separate each column for you. Now we need to add the content; we can do this just by duplicating the layout of the existing two columns from opening to closing <div>:
<div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div>
However, here is where one of the limitations comes into play; whereas previously each column had 30% of the total available width, by adding a third column we reduce that share to 20% of the available width (40% is taken by the left column with the image). For this reason, any menu item text must be reduced in length otherwise your text will wrap to a new line, which doesn't look attractive. In our example code above, the "Stir Fried Teriyaki Chicken" menu item has been changed to just "Teriyaki Chicken" to prevent word-wrap.
Due to this issue with space, I'd say that three columns is the maximum possible before you'll need to start making changes in the CSS to accommodate the additional content.
The full code for this section when using three columns of menu items looks like this:
<div class="bigger-spaces"> <div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter left and move 100px"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Menu" /></span> </div> <div class="gk-menu col-width-60"><i class="gkicon-dinner"></i> <h3>Quark Menu</h3> <div class="gk-cols" data-cols="3"> <div> <dl> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Teriyaki Chicken</dt> <dd>$ 80.00</dd> </dl> </div> </div> <a href="#" class="gk-read-more">Learn more</a> </div> </div> </div>
And this will produce the following result:
The Reservation Section (Video Background)
The Reservation section of the frontpage is a marriage of form with function; a video background provides the flair, and an overlaid text block provides a suitable call-to-action to encourage users to make a booking, with contact information and links to the reservation page:
The content for this section is created using the HTML code from the mainbody of the fourth subpage of the Frontpage page; the demo code looks like this:
<div class="video-bg"> <div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s"> <sup>Come and enjoy</sup> <h2>Book a table</h2> <i class="gkicon-headset"></i> <span class="gk-phone-number"> <sup>Monday - Sunday 10AM : 10PM</sup> <strong>+66 233459876</strong> </span> <span class="gk-reservation-button"> <sup>or use the form</sup> <a href="http://localhost/WordPress/Quickstarts/Quark/Restaurant/?page_id=104" class="btn" data-sr="enter bottom and move 20px and wait .4s">Make reservation</a> </span> <small>Your reservation will be kept for 30 minutes from your booking time after that space will be released.</small> </div> <video muted autoplay loop poster="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.jpg"> <source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.mp4" type="video/mp4"> <source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div>
HTML Breakdown
As ever, this section will break down each part of the HTML code to help you understand how it all fits together. If you'd rather just get on with making some modifications, jump to the next section where you'll find quick tips on doing all the basics, like changing the text, icon and background video.
We'll start by swapping out the demo content with placeholder text in the code:
<div class="video-bg"> <div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s"> <sup>Small Top Text</sup> <h2>Main Title Text</h2> <i class="Icon Class"></i> <span class="gk-phone-number"> <sup>Opening days and times</sup> <strong>Telephone Number</strong> </span> <span class="gk-reservation-button"> <sup>Small Text Above Button</sup> <a href="/Button Link URL" class="btn" data-sr="enter bottom and move 20px and wait .4s">Button Text</a> </span> <small>Additional Information Text</small> </div> <video muted autoplay loop poster="/Image URL (Used when browser can't play video)"> <source src="/MP4 Video URL" type="video/mp4"> <source src="/OGG Video URL" type="video/ogg"> Warning Text (displayed when browser can't play video) </video> </div>
This section can be split into two separate blocks of code; the first block creates the overlay and is contained in the second <div> element, whilst the second block defines the video background and extras.
The code in this section starts with a <div> using the video-bg class to define the entire section's block and CSS rules, such as padding, background size and the like:
<div class="video-bg">
After this is the beginning of the code for the text overlay; a <div> using the gk-border-box class to create a coloured border is created for the overlay content to go into:
<div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s">
Then the actual content begins; first, a <sup> superscript tag (superscript usually refers to smaller text above a given element, in much the same way that a <sub> tag will be under a major element) creates the small text that appears above the title, and the title text is created in a pair of <h2> tags:
<sup>Come and enjoy</sup> <h2>Book a table</h2>
After this comes one of our included Pixel Love icons, created with an empty <i> tag and a particular class:
<i class="gkicon-headset"></i>
Next, a <span> tag is introduced to separate the next set of text elements from those that follow; this tag also uses a gk-phone-number so that the elements can be styled separately in CSS. Inside this span are two more elements: a <sup> tag that again creates some small text that is used in the demo content to provide opening days and times, and a set of <strong> tags which contains bolded, larger text used to create the phone number in the demo, before the section is closed with a closing </span> tag:
<span class="gk-phone-number"> <sup>Monday - Sunday 10AM : 10PM</sup> <strong>+66 233459876</strong> </span>
Following this is another <span> section that will contain the code for the reservation button and the text above it, so it uses the gk-reservation-button class to target the CSS:
<span class="gk-reservation-button">
The content is then made up of two sets of tags; a <sup> tag that creates the small text above the button, and an <a> tag with the btn class to create the button and button label, before closing this small block with the closing </span> tag:
<span class="gk-reservation-button"> <sup>Small Text Above Button</sup> <a href="/Button Link URL" class="btn" data-sr="enter bottom and move 20px and wait .4s">Button Text</a> </span>
There's still one little bit of text left in the overlay, and that's the small disclaimer/additional information text that appears at the bottom of the block. For this, a <small> tag is used before the overlay section is ended with the closing </div> tag:
<small>Additional Information Text</small> </div>
Now the overlay is finished with, the video background must be created. The entirety of the video background is created using a <video> tag that defines multiple settings and fallback options. First, the opening <video> tag is created along with four attributes: muted, which prevents any sound from the video being played, autoplay, which forces the video to play as soon as it enters the browser's viewport, loop, which causes the video to keep restarting once it ends so it is always playing, and poster, which functions similarly to the src attribute in an <img> tag in that it defines an image URL, but in this case the image will only appear in this section if the browser cannot play the background video:
<video muted autoplay loop poster="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.jpg">
After this opening tag comes the video content, which is defined in two <source> tags which contain a src attribute that points to the video URL. It is also necessary to define the type of content via a type attribute; the first tag defines the type as video/mp4 (for MP4 video files, naturally) and the second tag sets the type as video/ogg, for OGG files:
<source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.mp4" type="video/mp4"> <source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.ogg" type="video/ogg">
Why are there two video files being defined for the same content? This is used as a fallback option for browsers with limited support. The <video> tag can include three different video formats; WebM (defined in a type attribute as video/webm), MP4, and Ogg. Most modern browsers support at least MP4, but depending on the device your visitors are using and how old the browser version is there's a chance that they won't have support for a particular format; by including both Ogg and MP4 you cover most bases. Of course, in a perfect world everyone would be up-to-date, but the reality is that some people will wait years before updating, so it's best to have some element of redundancy.
Now with the video files defined, all that's left is to add the message that should appear in the event that the user's browser doesn't support the provided video file types, then follow that with the closing </video> tag to end the video background section, and then a closing </div> to close out the section entirely:
Your browser does not support the video tag. </video> </div>
Modifying the First Text Block
The first text block in this section consists of two pieces of text; a small sentence above the title, and the title itself. The smaller writing is created using the <sup> tag, and the title in an <h2> tag; these appear one after the other in lines 3 and 4 of the HTML code:
<sup>Small Top Text</sup> <h2>Main Title Text</h2>
Simply modify the text between the tags to your own content.
Changing the Icon
The icon is created in the empty <i> tag like the other icons in this theme; to change the icon you will need to modify the class attribute to your chosen icon's class name:
<i class="Icon Class"></i>
Full details of the available icons and how to insert them into your content may be found in the Theme Features → Theme Icons section of this guide.
Changing the Second Text Block
The second text block is contained within a <span> element with the gk-phone-number class, with tags to create the opening days and times text as well as the larger phone number text:
<span class="gk-phone-number"> <sup>Opening Days and Times Text</sup> <strong>Phone Number</strong> </span>
To change the opening times text, modify the content between the <sup> tags. For the phone number, modify the text between the <strong> tags.
Changing the Reservation Button Block
The reservation button block is contained in its own <span> tag that uses the gk-reservation-button class, with a <sup> tag to create the small lead-in text, and an <a> tag with the btn class to create the button:
<span class="gk-reservation-button"> <sup>Small Text Above Button</sup> <a href="/Button Link URL" class="btn" data-sr="enter bottom and move 20px and wait .4s">Button Text</a> </span>
To modify the text before the button, change the text in the <sup> tags. For the button link, add your chosen link URL into the href attribute of the opening <a> tag, and for the button label, change the text between the opening and closing <a> tag.
Changing the Extra Info Text
At the bottom of the text block is some small text for adding extra information such as limits or booking times. This is created with a <small> tag just before the closing <div> for the text overlay block:
<small>Additional Information Text</small> </div>
Just change the text between the tags accordingly.
Changing the Video Background
In the demo content the video background may seem like a single entity, but there are actually several elements added to provide redundancy and fallback options for different browser setups. Let's look at each element in turn.
Changing the Poster Image
Chances are you haven't seen this image, assuming that everything was working properly with the video background. However, some browsers and devices simply won't run video backgrounds, and it's important to make sure that you have something to show in this section in these cases.
For this purpose, an image is included that will be displayed should the video not run; this is located in the opening <video> tag of the HTML code:
<video muted autoplay loop poster="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.jpg">
Simply modify the poster attribute to point to an image in your media library; remember that you can find the URL for an image by opening your media library, clicking on the image, and copying the text from the URL field in the top-right of the screen and pasting it into the attribute:
<video muted autoplay loop poster="/Image URL Here">
Changing the Video
In order to change the video used in as the background you will need to upload your own video files to your media library. The supported formats are WebM, MP4 and Ogg, and the videos are added in an src attribute contained in a <source> tag:
<source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.mp4" type="video/mp4"> <source src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/themes/Quark/images/restaurant/bg.ogg" type="video/ogg">
In the demo content two versions of the video are defined, one MP4 and one Ogg as a fallback option should a browser be unable to play the MP4 file for some reason. To replace the videos, get the URL for your chosen video from your Media Library and paste it into the src attribute. You will also need to define the type attribute which defines the format for the video, using the format:
type="video/format"
So for example, an MP4 video would use the following type:
type="video/mp4"
Whereas an Ogg would use:
type="video/ogg"
And a WebM:
type="webm"
It's all fairly straightforward. So, paste your video URL into the src attribute, and define the type attribute:
<source src="/Video URL" type="Video Format"> <source src="/Video URL" type="Video Format">
Though the demo content uses two video formats it is not required that you do so; merely recommended to ensure redundancy.
Changing the Error Text
The error or warning text is text that appears when the video is unable to play due to incompatibility with the browser. It is added before the closing </video> tag but after the <source> tags:
Warning Text (displayed when browser can't play video) </video>
So you can change this text as needed; just remember that it will only be seen when the video doesn't play so it's better to keep it short and to the point.
The Events Section
The events section delivers an attractive way to link to your blog posts in a modern, clean news rotator:
This functionality is provided by our News Show Pro WordPress widget, which is embedded as a shortcode in the fifth subpage of the Frontpage page. The full shortcode used in the demo content looks like this:
<div class="gk-wide bigger-spaces"> [gknsp article_wrapper="news_slider" data_source_type="wp-category" RestaurantWPQuick_category_list="2" news_slider_articles="5" news_slider_show_title="on" news_slider_show_text="on" news_slider_date_format="D, j F Y" news_slider_animation_interval="6000" news_slider_small_img_margin="-30% 0" news_slider_cat_url="#" news_slider_widget_label="Events" news_slider_cat_label="More events" cache_time="0" article_image_w="350" article_image_h="500" article_text_len="15"] </div>
How It Works
Since there's no HTML code to breakdown apart from the opening and closing <div> tags, which use the gk-wide and gk-bigger-spaces classes to add extra padding to the block:
<div class="gk-wide bigger-spaces">
We can instead look at how the shortcode for News Show Pro works. It looks like a complex shortcode, but in fact it is relatively simple. At its most basic, News Show Pro can be inserted into a page with:
[gknsp]
This will create an instance of News Show Pro with all settings as default. However, the instance of NSP in the demo content has a number of specific options set to control how it looks, animation settings, and data sources (i.e. which articles are displayed in this section). Let's look at each of the options used in the demo content to see how they work:
- article_wrapper - Defines the NSP style to be used; News Show Pro includes a number of preset styles that change the layout and how the content is presented. In Restaurant this should always be set to news_slider as this was specifically styled for the Restaurant theme; only change this option if you are comfortable adjusting the CSS and other options accordingly.
- data_source_type - This option defines what type of data-source the widget should target. NSP includes support for WordPress categories, latest posts, tags etc...or third-party sources such as WooCommerce. In the demo content this is set to wp-category, which tells the widget to pull latest posts from a specified category.
- category_list - This option defines which category the posts should be pulled from by ID. This option is only relevant when the data_source_type is set to pull from categories.
- news_slider_articles - Defines the number of articles that should be displayed at any one time in the NSP instance.
- news_slider_show_title - Defines whether the title of the blog post is displayed in the preview.
- news_slider_show_text - Defines whether a text snippet from the previewed post is displayed in the preview.
- news_slider_date_format - Defines how the date is displayed.
- news_slider_animation_interval - Sets the wait-time in milliseconds before NSP rotates the previews.
- news_slider_small_img_margin - Sets the margin size for the smaller images displayed in posts that appear in the events section but are not currently the focus.
- news_slider_category_url - Sets the URL that the More Events text under the previews will link to.
- news_slider_widget_label - Sets the display title of the widget; this appears slightly to the left of the main image in the previews.
- news_slider_cat_label - Sets the read-more link text that appears underneath the previews.
- cache_time - Sets how long the widget should cache data for.
- article_image_w - Defines the image width of the preview images in pixels.
- article_image_h - Defines the image height of the preview images in pixels.
- article_text_len - Defines the length of the text snippet preview in total words.
There are many more options available for News Show Pro, but these are the core settings utilized in the demo content.
Changing the Data Source
In the default demo content the data-source (where NSP should look for articles) is set to pull from categories, and the Quark Restaurant Blog category is set as the target. This is defined in the following two attributes in the NSP shortcode:
data_source_type="wp-category" RestaurantWPQuick_category_list="2"
Let's look at how we can modify these settings.
Changing the Category
If you want to keep pulling your articles that appear in the Events section from a particular category, but want to use a different category, you will need to change the category_list attribute to point to your chosen category. To do this, you'll need to find the category's ID.
In your WordPress backend, click on Posts → Categories to bring up a list of your available post categories.
Click on the category you want NSP to pull article from to go to the Edit Category screen. On this screen you can see the name, slug, parent and description of the category, but we're more interested in the URL for the page, which should look something like this:
http://www.yoursite.com/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=3&post_type=post
If you look at the example URL above, you'll notice that there is a section called tag_id=x. This is the ID of the category, so note the number down. In the above example the ID is "3", so we'll add that number to the category_list attribute in our NSP shortcode:
data_source_type="wp-category" RestaurantWPQuick_category_list="3"
Save the changes, and NSP will now pull the latest articles from the chosen category.
Displaying Latest Posts from All Categories
If you have multiple blog categories and would like all of the new posts from every category to be displayed in the Events section, you can do so by removing both the data_source_type and category_list attributes from the shortcode:
[gknsp article_wrapper="news_slider" news_slider_articles="5" news_slider_show_title="on" news_slider_show_text="on" news_slider_date_format="D, j F Y" news_slider_animation_interval="6000" news_slider_small_img_margin="-30% 0" news_slider_cat_url="#" news_slider_widget_label="Events" news_slider_cat_label="More events" cache_time="0" article_image_w="350" article_image_h="500" article_text_len="15"]
Remember that any option not defined in the shortcode will be set to default, and in the case of the data-source if no other option is set it will default to the latest posts from all categories.
Changing the Widget Title
The title of the widget appears to the left of the main image preview:
It is defined in the news_slider_widget_label attribute; simply change this to your own title:
news_slider_widget_label="Widget Title Here"
Changing the Link Text and URL
Underneath the post previews is a read-more link that can take user to a list of blog posts, or a particular category, or anywhere you'd like to define! The text for this link is set in the news_slider_cat_label attribute:
news_slider_cat_label="More events"
And the URL that this text will link to when clicked is set in the news_slider_cat_url attribute:
news_slider_cat_url="#"
So you can change these attributes to set your own label and link:
news_slider_cat_label="Link Text" news_slider_cat_url="Link URL"
Changing the Preview Image Sizes
The preview image sizes are set (in pixels) in the article_image_w (width) and article_image_h (height) attributes; simply modify these attributes to the number of pixels you wish to define as the height and width:
article_image_w="Width In Pixels" article_image_h="Height In Pixels"
Modifying the Preview Text
In each preview block you have four elements; the featured image of the linked post, the date of publication, the post title, and a text preview of the post:
In the demo content the length of the preview text is set at 15 words, but this can be extended or reduced by modifying the total in the article_text_len attribute to your chosen length (in number of words):
article_text_len="Text Length Here"
Alternatively, you may remove the snippet completely by deleting the following line from the shortcode:
news_slider_show_text="on"
If this attribute is deleted the widget will switch to the default setting, which is "off".
Removing the Post Titles From the Preview
As well as the snippet text, you can also remove the post title from this section; great if you're putting more emphasis on your images. Just delete this attribute from the shortcode:
news_slider_show_title="on"
Changing the Number of Preview Articles
The news slider format of NSP used in Restaurant will only display a maximum of five articles on the page at any one time, but it's possible to increase the total number of articles that will be rotated via this attribute:
news_slider_articles="5"
For example; if you have 10 articles in the category that NSP is pulling articles from, but the news_slider_articles attribute is set to "5", then it will only display the latest 5 articles in the rotator; with each article preview that moves off to the right instantly reappearing on the left.
However, if you set the attribute to "10", then all of your ten articles will appear in the rotation, with each one that moves off to the right taking another five rotations to appear back at the left.
There's no limit to the number of articles you have in rotation, but remember that many visitors won't spend too much time on your frontpage so it's better to keep the number at the lower end of the spectrum for maximum visibility of your latest news.
The Newsletter Section
This section contains a basic newsletter sign-up field and a call-to-action to encourage users to dive in:
The HTML code for this section is taken from the sixth subpage of the Frontpage page. The basic code looks like this:
<form class="newsletter-gk dark-bg" action="#"><small>Stay up-to-date with latest products</small><input name="email" required="required" type="email" placeholder="Enter your e-mail..." /><input class="dark btn-border" type="submit" value="Subscribe" /></form>
Note that this code is just a placeholder; if left unchanged it will not do anything as the form action hasn't been created. This is to allow you to apply your own form action as needed, whether a bespoke action or one via third-party such as MailChimp or MailPoet. This guide covers adding a form action in modification section after the HTML breakdown.
HTML Breakdown
The HTML code in this section is easy to understand for those familiar with form tags, but for many of us the logic behind it is not so clear. The section uses a standard <form> tag (which is used to control the form and its function) that uses a newsletter-gk and dark-bg class to control the styling of the block, with a <small> tag inside that provides the call-to-action text, an <input> tag that creates the input field and the "Enter your e-mail..." text, and a second <input> tag that creates the button (using a dark and btn-border class to frame the button with a light border and dark background) and takes form-submission duties.
Modifying the Call To Action
The call-to-action text that appears to the left of the email field and can be used to encourage users to sign-up for the newsletter, is contained in the <small> tag that appears immediately after the opening <form> tag. Simply add your own text between these tags:
<small>Your call to action text here</small>
Modifying the Email Field Text
The field where users input their email has a small piece of text that informs users what to do to subscribe; in the demo content this text is "Enter your e-mail...", but you can add whatever text you feel is appropriate. To do so, you will need to modify the text in the placeholder attribute of the first <input> tag in the above code:
<input name="email" required="required" type="email" placeholder="Email Field Text Goes Here" />
Modifying the Button Text
The text for the submit button, which in the demo says "Subscribe", is set in the value attribute of the second <input> tag of the code; just change this attribute to your own text to change the button accordingly:
<input class="dark btn-border" type="submit" value="Button Text Goes Here" />
Applying a Form Action
By default the form has no action set to it; this means that when a user enters an email address and clicks the subscribe button nothing will happen. This has been designed in this way because there are many different newsletter clients and plugins that a site owner might wish to use, so the base form needed to be ready for adjustment to suit. In the following sections we'll look at applying a form action for two of the most popular newsletter solutions; MailChimp and MailPoet.
MailChimp Form Action
If you prefer to use MailChimp as your newsletter solution, you will need to perform the following steps for the form in Quark to allow sign-ups:
- Ensure that you have already created a MailChimp account and started your first newsletter list. Log-in to the MailChimp site, and click on Lists on the top menu; you'll see your current subscriber lists.
- Click on the list that you wish visitors to your Quark-based website to be added to if they sign-up to be taken to the configuration screen for the list, then click on the Signup Forms tab.
- You'll see a list of different form types; click on Embedded forms to be taken to the form configuration screen.
- On this page you would usually configure how you want the form to look, what fields need to be completed, and many other elements. In this case, we already have a form ready to go in Quark, so we just need to take the important information from the Copy/Paste onto your site section on the right of the screen.
- There's a lot of HTML code and inline CSS styling in this field, but we can ignore the majority of it. In the code, find the <form> tag; it should look something like this:
<form action="//test.us10.list-manage.com/subscribe/post?u=0a51e78c937188d221d463d11&id=c0ccacb0ae" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
The validate class and id attribute in the above code are not needed for the form to function so can be removed:
<form action="//test.us10.list-manage.com/subscribe/post?u=0a51e78c937188d221d463d11&id=c0ccacb0ae" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
Now that's removed, copy the contents of the tag from "action" to "novalidate":
action="//test.us10.list-manage.com/subscribe/post?u=0a51e78c937188d221d463d11&id=c0ccacb0ae" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate
And paste it into the <form> tag of your page content, leaving the classes untouched but replacing the blank action attribute. It should look something like this:
<form class="newsletter-gk dark-bg" action="//test.us10.list-manage.com/subscribe/post?u=0a51e78c937188d221d463d11&id=c0ccacb0ae" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
- Next we need to configure the first <input> tag's name attribute to match what MailChimp expects; if you don't do this then MailChimp will ask for the email address again once they reach the subscription screen. In the embed code on the MailChimp screen you should find an <input> tag that looks something like this:
Notice the name attribute; in this example code it's value is "EMAIL". Copy this value and use it to replace the existing name attribute in the Quark newsletter code:
<input name="EMAIL" required="required" type="email" placeholder="Enter your e-mail..." />
The name attribute is case-sensitive, so make sure it matches exactly.
- With both of these changes made, your code should now look something like this (though of course with a different action URL specific for your account):
Save changes by clicking the Update button on the right of the Edit Page screen, and you're done!
The Frontpage Contact Info Block
The final section of the frontpage before the footer menu is a basic information section that covers opening hours, location, contact details and social media links:
The code for this section is straightforward if you've worked through the rest of the frontpage sections already:
<div class="gk-cols small-spaces small-text" data-cols="4"> <div class="col-width-40 col-t-width-50"> <strong>Hours</strong> <div class="gk-cols" data-cols="2"> <div> <p>Monday - Friday <br>10.00am - 5.30am</p> </div> <div> <p>Saturday - Sunday <br>12.00am - 10pm</p> </div> </div> </div> <div class="col-width-25 col-t-width-50"> <strong>Location</strong> <p>Quaking Row, Kensington, <br> IN, 47699-9366, US</p> </div> <div class="col-width-20 col-t-width-50"> <strong>Phone</strong> <p>tel. 123.456.7890<br> fax: 098.654,3211</p> </div> <div class="col-width-15 col-t-width-50"> <strong>Connect with us</strong> <p> <a href="#" class="gk-social-link"><i class="gkicon-twitter"></i> Twitter</a><br> <a href="#" class="gk-social-link"><i class="gkicon-fb"></i> Facebook</a> </p> </div> </div>
HTML Breakdown
We'll start by listing the basic HTML code with the demo content replaced by easier to understand placeholder text so you can see what information is being added where:
<div class="gk-cols small-spaces small-text" data-cols="4"> <div class="col-width-40 col-t-width-50"> <strong>First Column Title</strong> <div class="gk-cols" data-cols="2"> <div> <p>Opening Weekdays<br>Weekday Opening Times</p> </div> <div> <p>Opening Weekend Days<br>Weekend Opening Times</p> </div> </div> </div> <div class="col-width-25 col-t-width-50"> <strong>Second Column Title</strong> <p>Address Line 1<br> Address Line 2</p> </div> <div class="col-width-20 col-t-width-50"> <strong>Third Column Title</strong> <p>Telephone Number<br> Fax Number</p> </div> <div class="col-width-15 col-t-width-50"> <strong>Fourth Column Title</strong> <p> <a href="/First Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a><br> <a href="/Second Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a> </p> </div> </div>
The code starts with an opening <div> that uses the gk-cols class to split the section in columns; the data-cols attribute sets the number of columns to four. There's also two additional classes in this <div>; small-spaces to keep the top and bottom margin of the section smaller than standard, and small-text that sets a smaller font than standard:
<div class="gk-cols small-spaces small-text" data-cols="4">
The next line of code is another <div> that creates the first column; this tag has two classes that are used to set the width for desktop and tablet/mobile views (in percentage); col-width-40 and col-t-width-50:
<div class="col-width-40 col-t-width-50">
Next is the title for the first column contained in a set of <strong> tags:
<strong>First Column Title</strong>
After this is another <div> that splits the existing column into a further two columns using the gk-cols class again, just like with the menu page:
<div class="gk-cols" data-cols="2">
So now we have a large column that takes up 40% of the available width, that displays a title and then splits the available space under the title into two 20% width columns. Next comes the content for each column; this consists of a <div> to create the column, a plain <p> tag for the content with a <br> tag to move to a new line in the middle (before the <br> tag is the days of the week, and after is the opening hours), and then a closing </div> to end the column:
<div> <p>Opening Weekdays<br>Weekday Opening Times</p> </div>
This format is repeated again for the second column:
<div> <p>Opening Weekdays<br>Weekday Opening Times</p> </div>
And then there are an extra two closing </div> tags to close the first column and the columns inside it:
</div> </div>
Now the code for the second main column comes in. starting with a <div> that sets its width at 25% for desktops and 50% for mobiles, the content consists of a <strong> tag for the title, and a <p> tag with <br> line-break tag in the middle to create the two lines of the address, before the column is closed with the closing </div>:
<div class="col-width-25 col-t-width-50"> <strong>Second Column Title</strong> <p>Address Line 1<br> Address Line 2</p> </div>
The third column uses almost exactly the same layout as the second column to display telephone numbers instead of address information, with one minor difference; in the third column the width is set at 20% for desktops rather than 25%:
<div class="col-width-20 col-t-width-50"> <strong>Third Column Title</strong> <p>Telephone Number<br> Fax Number</p> </div>
Then comes the final column's content; this time the opening <div> sets the width at 15% for desktops and 50% for tablets or smaller, followed by the <strong> tags for the title, and an opening <p> tag for the content:
<div class="col-width-15 col-t-width-50"> <strong>Fourth Column Title</strong> <p>
This time the content is created with <a> tags using the gk-social-link class to create the link. Inside the <a> tags is an <i> tag that defines the social media icon in its class, and then the text for the icon is added before the closing </a> tag:
<a href="/First Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a><br> <a href="/Second Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a> </p>
As with the other areas, a <br> tag is used to move the second icon link to a new line. Finally, two closing </div> tags complete the section's code.
</div> </div>
Changing the Column Content
Each of the first three columns uses the same layout for the text; a <strong> tag creates the title, then a <p> tag creates the text underneath, with a <br> tag used when content needs to move to a new line:
<strong>Column Title</strong> <p>Content Line 1<br> Content Line 2</p> </div>
So you can easily replace the text for these sections with your own; though in the demo content this section is used for address and contact information you are free to add whatever text you wish.
Changing the Fourth Column Content
The fourth column content is different from the other three in that it displays social icons with text that can be linked to their respective social media profiles. Two <a> tags are used, separated by a <br> line break tag to move to to a new line. The format for these links is straightforward:
<a href="/First Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a>
To set where the icon and text will link to when clicked, you will need to add your link URL into the href attribute in the opening <a> tag.
To change the social media icon you will need to modify the class of the opening <i> tag to your chosen icon from either the included Pixel Love icons or the Font Awesome set supported by our theme. Full details of the available icons and how to insert them into your content may be found in the Theme Features → Theme Icons section of this guide.
For the text next to the icon, simply change the text before the closing <a> tag.
If you are interested in adding more icons to this section you may do so by adding another <br> tag to move to a new line, then adding another <a> tag with <i> tag as before:
<a href="/First Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a><br> <a href="/Second Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a> <a href="/Third Social Icon Link" class="gk-social-link"><i class="Icon Class"></i> Icon Title</a>
The block will automatically expand to fit the additional icons, but remember that adding too many can make the section far too large (it is meant to be a small footer after all!), so keep it simple if possible.
Theme Features
The Restaurant style for Quark includes several custom elements designed exclusively for this style, including additional pages like the menu page, and feature-specific plugins such as the reservation plugin. In this section we'll look at the various extras included with Restaurant and how you can make them your own.
Additional Pages
Throughout the Quark restyles there are several additional pages provided; some are a constant that every style benefits from such as the Gallery page, whereas other pages are unique to a particular style as they fulfil an established need, such as the Menu page which is only realistically going to be used by the restaurant style users.
In this section we'll look at the available additional page styles in Restaurant, and discuss how you can modify them to better serve your needs.
The Menu Page
The Menu page provides full details of your restaurant menu, with product lists just like the menu preview on the frontpage, but with the addition of titles so everything you have to offer is clearly presented:
Creating a Menu Page
If you've installed our demo content or used our Quickstart package to setup WordPress, then you'll already have a demo menu page ready to modify; in the demo content this is called Restaurant Menu--Traditional American dishes. However, if you'd like to start a menu from scratch, or you want to have multiple menu pages (for example, for lunch and dinner), then it is very easy to create a new one.
In your WordPress backend, click on Pages → Add New to go to the Add New Page screen. First thing we'll need to do is click on the Template drop-down list option in the right sidebar of this screen and select the Menu template; this will make sure the appropriate styling is applied to your page.
Next up, we'll need to set up the parallax header. Thankfully, all of the hard work is done behind the scenes thanks to some clever programming from our devs, so we only need to set the text title and subtitle that appears in the header, and define the parallax background image.
The title and subtitle text used in the header is actually taken from the Title field of the menu page, using the following format:
Title--Subtitle
Text to the left of the double-hyphen is used for the title, and text to the right of it is used for the subtitle. So in the demo content, whose title is:
Restaurant Menu--Traditional American dishes
Restaurant Menu is the title, and Traditional American dishes is the subtitle:
Next up, we'll add the parallax background image for the header. This is taken from the Featured Image of the post, which you can choose by clicking the Set Featured Image text at the bottom of the right sidebar. This will bring up your media library screen, where you can choose to upload a new image or pick something from your existing uploads. Once you've selected an image you don't need to do anything else; the image will automatically be added as the header background and the parallax effect set.
Now for the mainbody content. Copy and paste the following text into the mainbody of your page:
<div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Main dishes"></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-dinner"></i> <h3>Main Dishes</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp </dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div> </div> </div> <div class="gk-cols" data-cols="2"> <div class="gk-menu col-width-60"> <i class="gkicon-lollipop-alt"></i><i class="gkicon-tea-cup"></i> <h3>Desserts</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 66.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 66.00</dd> <dt>Lemon Chicken </dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div> </div> <div class="col-width-40"> <span class="gk-image-border gk-right gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu-desserts.jpg" alt="Desserts"></span> </div> </div> <div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu-drinks.jpg" alt="Drinks"></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-bottle-glass"></i> <h3>Drinks</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div> </div> </div>
It's a lot of of content! This is the same content contained in the demo layout; if you use this content in the page, you can then modify it easily rather than manually writing each bit of HTML in yourself. Once done save your changes and your menu page is ready to customize with your own content.
HTML Breakdown
So you've created a menu page as per the above guide, or you've installed the quickstart or demo content so you've got a preprepared one ready to go. Now we can get get a look at the HTML used in the page mainbody and figure out how it works. Though at first glance there may seem to be a lot of content, it can actually be easily split into three sections, representing the three blocks of the menu page. Each block consists of a two columns, one column containing an image, and the other is split into another two columns with each one containing a list of menu items.
Let's look at how each block is built. First, the overall two column structure of the block is created using a <div> with the gk-cols class attached, and the data-cols (number of columns) attribute set to two:
<div class="gk-cols" data-cols="2">
This class will split the next two <div> blocks into two columns; refer back to the Common CSS Classes section of this guide for a breakdown on how this works. After this opening line is another <div> with the gk-col-w-40 class, which creates the first (left) column sets the width of the column to 40% of the total page width:
<div class="col-width-40">
Now the content of the first column is created; this is an image with an offset color border that animates into place like with the frontpage images, so a plain <img> tag is used, but wrapped in a <span> tag with the gk-image-border, gk-left and gk-border-anim classes attached to provide the styling, followed by the closing </div> to end the first column:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu_image.jpg" alt="Main dishes"></span> </div>
So now the first column is done with, the second column needs to be created with a new <div>, this time with a gk-col-w-60 class to set the column width at 60% of the total available width, and a gk-menu class to target the CSS rules:
<div class="gk-menu col-width-60">
Then comes the content that appears at the very top of the column; an empty <i> tag that creates the dinnerplate icon (the class of the tag decides which icon is used), and the title for the section is added in <h3> tags:
<i class="gkicon-dinner"></i> <h3>Main Dishes</h3>
The content of the right column after the icon and title is split into two columns, each one containing a single column of menu items. To achieve this layout, a new <div> with the gk-cols class is created split the column into further columns:
<div class="gk-cols" data-cols="2">
If you've been following along, we now have a left column that's set at 40% of the total available width; this contains an image. Then, we have a second column which is set at 60% of the total available width, which has an icon and title added before splitting the rest of the column into two more columns that are automatically set at 30% of the total width each.
Now the column has been split into two, the content for each column needs to be added. This is done first by adding another plain <div> tag which will contain the first column's content.
Following this comes the meat of the menu section; the menu item list. This consists of a description list, created by a <dl> tag. Inside the description list are a total of seven items, each one made up of two tags; a <dt> title tag for the item name, and a <dd> description tag for the price. After all seven items and their prices have been added, the description list is ended with a closing </dl> tag, and the entire column is ended with a closing </div> tag:
<div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div>
Now the second column of menu items must be created; this is very simple, since it uses the exactly the same layout as the first column; <div> to surround the column content, <dl> to create the list, <dt> for the item title, and <dd> for the price:
<div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp </dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl>
At the end of this list are four closing </div> tags that close the right column, the two-column block, the right column, and the original two-column block respectively:
</div> </div> </div> </div>
Now comes the second set of menu items. This uses virtually the same format as the previous set, save for a few minor differences. In this instance, the image is in the right-hand column instead of the left; this means that the first column's code in this section will follow the icon/title/2-column split/first menu list/second menu list format, whilst the second column will have the span/image format. One other minor difference; in the <span> tag that a surrounds the image in the right column the gk-right class is used to align the image to the right side of the element; this is in contrast to the gk-left class used when the image is in the left column:
<div class="gk-cols" data-cols="2"> <div class="gk-menu col-width-60"> <i class="gkicon-lollipop-alt"></i><i class="gkicon-tea-cup"></i> <h3>Desserts</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 66.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 66.00</dd> <dt>Lemon Chicken </dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div> </div> <div class="col-width-40"> <span class="gk-image-border gk-right gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu-desserts.jpg" alt="Desserts"></span> </div> </div>
The final menu goes back to the original layout of image in the left column, menu items in the right column, and as such uses exactly the same HTML structure:
<div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu-drinks.jpg" alt="Drinks"></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-bottle-glass"></i> <h3>Drinks</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div> </div> </div>
Changing the Header Background Image
The header background image is taken from the Featured Image of the page; to replace it, on the Edit Page screen click on the Remove featured image text in the right sidebar; this removes the current image. Then, click on the Set featured image text that has now appeared to be taken to your media library where you can pick a new image to use as the background.
Modifying the Header Text
The header text is taken from the title of the page, using the format:
title--subtitle
So, just modify the text so that your preferred title is to the left of the double-hyphen, and the subtitle is to the right of the double-hyphen.
Changing the Menu Items
The menu items for each block are contained in the <dl> description lists, with <dt> tags creating the titles, and <dd> tags for the price:
<dt>First Menu Item</dt> <dd>First Price</dd> <dt>Second Menu Item</dt> <dd>Second Price</dd>
Add your own content between these tags as needed to match your own menu and pricing. In the demo content there are a total of seven items in each list, but it's entirely possible to add or reduce this number as needed by duplicating or removing the <dt> and <dd> tag combinations. For example, you can have just a couple of items in the entire column:
<div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> </dl> </div>
Bear in mind that your columns will look better if they match in size, so if you have only two items in one column make sure you do the same for the other! If you add extra menu items the section will expand itself automatically to fit, but if you've got a lot of items then adding an additional block (that is, an image and two menu columns) is a more effective solution; simply add another full block starting from the <div> with the gk-cols class to the closing set of <div>s:
<div class="gk-cols" data-cols="2"> <div class="col-width-40"> <span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="http://localhost/WordPress/Quickstarts/Quark/Restaurant/wp-content/uploads/2015/03/menu-drinks.jpg" alt="Drinks"></span> </div> <div class="gk-menu col-width-60"> <i class="gkicon-bottle-glass"></i> <h3>Drinks</h3> <div class="gk-cols" data-cols="2"> <div> <dl> <dt>Lemon Chicken (Gluten-Free)</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 25.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Basil Shrimp <sup><i class="gkicon-star"></i></sup></dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> <div> <dl> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> <dt>Lemon Chicken</dt> <dd>$ 30.00</dd> <dt>Sweet & Sour Chicken</dt> <dd>$ 25.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Stir Fried Teriyaki Chicken</dt> <dd>$ 80.00</dd> <dt>Basil Shrimp</dt> <dd>$ 45.00</dd> <dt>Yu Shange Scallop</dt> <dd>$ 66.00</dd> </dl> </div> </div>
There's no limit to the number of blocks you can add, so feel free to experiment with the number of blocks and menu items till you find the overall layout that works for you.
Changing the Images
Changing the images is extremely simple as they are contained in standard <img> tags; all you need to do is amend the src attribute in the opening tag point to your own image:
<img src="/Image URL Here" alt="Drinks">
Make sure not to modify the <span> tags surrounding the image, as the CSS responsible for adding the animated border is targeted via the <span> classes.
You can get the URL to an image in your library by opening the Media Library in your WordPress backend and clicking on the image you want to use; in the overlay that opens you'll see a URL field in the top-right that contains the image URL, just copy and paste into the src attribute.
If you're adding a lot of menu items you might want to add another image below the first; this helps keep your menu item columns and image columns the same height. To do so, you only need to repeat an <img> tag between the <span> tags:
<span class="gk-image-border gk-left gk-border-anim" data-sr="enter bottom and move 50px and wait 0.01s"><img src="/First Image URL" alt="Drinks"><img src="/Second Image URL" alt="Title"></span>
The second image will appear directly below the first. There's no limit to the number of images you may add, but like with the menu items we suggest that you avoid overfilling the page for aesthetic reasons and to reduce page weight.
The Contact Page
The Quark Contact page uses the same parallax header background as the other pages, but this time adds extra information beyond the plain overlaid text, with social media icons and links and a Google Maps link to help customers locate your establishment. In the mainbody of the page is an easy-to-use contact form along with other contact information. It also includes the Newsletter and Contact Information blocks above the footer menu just like the frontpage, using the same HTML code but added via widgets instead of pages.
Creating a Contact Page
The Restaurant demo content includes an example contact page ready to be modified, but if you're looking to create a new one from scratch it's a fairly standard process. As with the other pages, click on Pages → Add New in your admin area to add a new page. On the edit screen, add the page title that you want to be displayed in the header to the Title field; text entered here will appear as the title in the header.
Now copy the following HTML content into the mainbody of the page; this will get your contact page extra information matching our demo layout, ready for you to customize: :
<h3>Contact us</h3>
<p>We are here to answer any questions you may have about our combadi experiences. Reach out to us and we'll respond as soon as we can.</p>
<p>Even if there is something you have always wanted to experience and can't find it on combadi, let us know and we promise we'll do our best to find it for you and send you there.</p>
<h3>Address</h3>
<p>6368 Rustic Berry Vista<br />
Goodwater, HI, 96728-6372, US</p>
<big>+1 808 132 05 80</big><small>Open Monday to Saturday, 9.15am - 5.15pm</small>
Now have a look at the Page Attributes section in the right sidebar; find the option called Template, click on the drop-down list for this option and select the Contact Page template; this will ensure the right formatting and CSS rules are applied to the page, and will also allow you to change several contact-page related options when viewing the page in the Theme Customizer.
Next up is the parallax background image; Click on the Set Featured Image text in the right sidebar and select an image from your media library; this image will be used as the parallax background image. Finally, click on Publish at the top of the right sidebar to publish the page and the main part of your page is set. However, the Newsletter and Contact information blocks at the bottom of the page are both set via widgets, so you'll need to set those up too.
Adding Existing Widgets to the Contact Page
The newsletter and contact information section at the bottom of the contact page are similar to those found on the frontpage, but since the contact page does not use a page-based layout these sections are instead created with text widgets with the same code as the frontpage sections.
If you installed Quark via the quickstart package or followed the installation guide you will already have these widgets ready to go, but you will need to assign them to your new contact page via the Widget Rules. More information on the Widget Rules plugin and how to use it to display widgets on specified pages only may be found in the Features → Widget Settings section of this guide.
Creating a New Newsletter Widget
If you did not install the quickstart or follow the installation guide and need to create the Newsletter section for your contact page, follow these steps:
- Log-in to your WordPress dashboard and click on Appearance → Customize to open the Theme Customizer.
- In the left menu of the Theme Customizer you will see an option labelled Widgets; click on this option. The left-menu will switch to the widget area list:
- Click on the Bottom IV widget area to expand it, then click on the Add a Widget button.
- A list of available widgets will now be listed; select the Text widget. A new instance of this widget will be created in the position, and the options expanded.
- Copy and paste the following text into the mainbody of the text widget:
<div class="site"><form action="#"><small>Stay up-to-date with latest product</small> <input class="dark btn-border" type="submit" value="Subscribe" /> <input name="email" required="required" type="email" placeholder="Enter your e-mail..." /></form></div>
- Click on the Widget Rules button to expand the options. Change the Visible At option to No pages except:; a new select page to add drop-down list will appear.
- In the Select page to add drop-down list, choose Page. A new option, Page ID/Title/Slug will appear. Add your new contact page's ID/Title/Slug to this field and click Add page.
- In the Custom CSS class field, add the following text:
newsletter dark-bg
- Click on Save & Publish to save the widget.
Creating a New Contact Information Widget
As with the Newsletter, if you do not already have a contact information widget created then you can do so very easily; just click on Appearance → Customize to open the Theme Customizer in your WordPress backend to open up the list of options. Then, in the left menu of the Theme Customizer you will see an option labelled Widgets; click on this option. The left-menu will switch to the widget area list.
Click on the Bottom V widget area to expand it, then click on the Add a Widget button. A list of available widgets will now be listed; select the Text widget. A new instance of this widget will be created in the position, and the options expanded.
Copy and paste the following text into the mainbody of the text widget:
<div class="gk-cols site" data-cols="4"> <div class="col-width-40 col-t-width-50"> <strong>Hours</strong> <div class="gk-cols" data-cols="2"> <div> <p>Monday - Friday <br>10.00am - 5.30am</p> </div> <div> <p>Saturday - Sunday <br>12.00am - 10pm</p> </div> </div> </div> <div class="col-width-25 col-t-width-50"> <strong>Location</strong> <p>Quaking Row, Kensington, <br> IN, 47699-9366, US</p> </div> <div class="col-width-20 col-t-width-50"> <strong>Phone</strong> <p>tel. 123.456.7890<br> fax: 098.654,3211</p> </div> <div class="col-width-15 col-t-width-50"> <strong>Connect with us</strong> <p> <a href="#" class="gk-social-link"><i class="gkicon-twitter"></i> Twitter</a><br> <a href="#" class="gk-social-link"><i class="gkicon-fb"></i> Facebook</a> </p> </div> </div>
Now click on the Widget Rules button to expand the options. Change the Visible At option to No pages except:; a new select page to add drop-down list will appear. In this drop-down list, choose Page. Yet another new option, Page ID/Title/Slug, will appear. Add your new contact page's ID/Title/Slug to this field and click Add page.
Finally, in the Custom CSS class field, add the following text:
box small-spaces small-text
And click on Save & Publish to save the widget.
Changing the Contact Page Header
The contact page's header is modified via a combination of page content and theme settings; specifically, the large title text is taken from the title of your contact page, whereas the subtitle text and social media/Google Map icons and links are controlled via the theme options.
Changing the Title Text
To change the title text, modify the text in the title field of your contact page; click on Pages → All Pages in the WordPress left menu and select your contact page, then make your changes. The title text will automatically be used as the large text on the frontpage:
Changing the Background Image
The background image is taken from the Featured Image of your contact page. By changing the featured image you can set a new background. On the Edit Page screen click on the Set Featured Image text on the right of the screen.
If a featured image is already assigned that you wish to replace, then first click on Remove featured image to delete the image, and then you can click on the Set featured image text.
After clicking you will see your media library; select your preferred background image here and click on the Set Featured Image button in the bottom-right of the screen to set the image, then click on Update to save changes to your page, and your background image is ready.
Changing the Social Media and Map Links
The social media icons and links, along with the Google Maps link at the bottom of the header, are all controlled with the Theme Customizer. In your WordPress backend, click on Appearance → Customise in the left menu to open the customizer. You will see a set of options on the left, and a view of the frontpage on the right.
In the frontpage preview, open your contact page via the menu. Once on a page with the Contact Page template assigned, a new set of options specifically for this page's social icons and links will appear.
Click on the section to expand the options, and make your changes. More information on the settings and how to change them may be found in the Theme Settings section at the start of this guide.
Changing the Contact Mainbody Content
The mainbody content is created via simple HTML code added to the page mainbody field. The basic code looks like this:
<h3>Contact us</h3>
<p>We are here to answer any questions you may have about our combadi experiences. Reach out to us and we'll respond as soon as we can.</p>
<p>Even if there is something you have always wanted to experience and can't find it on combadi, let us know and we promise we'll do our best to find it for you and send you there.</p>
<h3>Address</h3>
<p>6368 Rustic Berry Vista<br />
Goodwater, HI, 96728-6372, US</p>
<big>+1 808 132 05 80</big><small>Open Monday to Saturday, 9.15am - 5.15pm</small>
If we simplify the code by replacing the demo text with placeholder labels, you can see clearly where each piece of information should go:
<h3>Right column title here</h3>
<p>Right column first paragraph here</p>
<p>Right column second paragraph here</p>
<h3>Second right column title here</h3>
<p>Address Line 1<br />
Address line 2</p>
<big>Phone Number Here</big><small>Opening days/times here</small>
The first <h3> tag creates the first title of the right-column's text, next to the contact form. This is followed by two plain text paragraphs in the two sets of <p> tags.
Next, a second <h3> heading highlights the second section, with a <p> tag containing address information; a <br /> line break separates the two lines of the address.
Finally, a <big> tag provides the large text for highlighting a phone number, and final <small> tag contains opening times and days.
Since none of these tags use any special classes or attributes, you may simply change the text between each tag to your liking. It does not necessarily need to list address and telephone numbers; you can add emails or alternative contact means as you see fit. If desired, you may also expand the content by adding more <h3>, <p>, <big> and <small> tags; the section will automatically expand to fit, but do bear in mind that the contact form is a set height, so it's recommended to keep the amount of content roughly similar to our demo to keep things in line. Also, you may remove any lines that you feel are unnecessary; this will not affect the aesthetics of the page as it will adjust itself to fit.
Modifying the Newsletter and Contact Info Sections
The two sections at the bottom provided by the widget are functionally similar to their frontpage counterparts, and the modifications and functionality covered in the frontpage section of this guide will apply to the widgets also. The code for both these widgets is the same as the frontpage versions with one minor difference; an opening <div> element with the site class has been added surrounding the entirety of the widget code. This should be ignored as it is essential to the widget displaying properly, but all other areas can be modified as per the frontpage guide.
The Gallery Page
The Gallery page allows the creation of touch-friendly image galleries that are a great way to show off your photos or portfolio:
Images are displayed in a masonry-style layout; click or touching an image will zoom in. Users can then zoom further, share or view images in fullscreen, and swipe to move between each image in sequence.
Gallery Page Structure
The Gallery page is the same as any other page with no special template added; just a specific HTML structure. The page can be split into two sections; the header, and the image gallery itself.
Like with the other basic pages, the header title text is taken from the title field of the page, with the date of publication automatically added underneath.
For the gallery content, HTML code is used. The base code used in the demo is as follows:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> <div> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image1.jpg" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb1.jpg" height="334" width="334" alt="Thumbnail I" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image2.jpg" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb2.jpg" height="224" width="335" alt="Thumbnail II" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image3.jpg" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb3.jpg" height="251" width="335" alt="Thumbnail III" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image4.jpg" data-size="1280x853" data-title="Wooden doors" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb4.jpg" height="224" width="335" alt="Thumbnail IV" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image5.jpg" data-size="852x1280" data-title="Japanese dinner" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb5.jpg" height="504" width="335" alt="Thumbnail V" /></a> </div> <div> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image6.jpg" data-size="853x1280" data-title="Photography art" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb6.jpg" height="457" width="305" alt="Thumbnail VI" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image7.jpg" data-size="1280x853" data-title="Sailing in the fog" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb7.jpg" height="203" width="305" alt="Thumbnail VII" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image8.jpg" data-size="1280x853" data-title="Travel time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb8.jpg" height="204" width="305" alt="Thumbnail VIII" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image9.jpg" data-size="960x1280" data-title="For ged" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb9.jpg" height="406" width="305" alt="Thumbnail IX" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image10.jpg" data-size="1280x853" data-title="Summer time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb10.jpg" height="203" width="305" alt="Thumbnail X" /></a> </div> <div> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image11.jpg" data-size="1280x853" data-title="Mobile music" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb11.jpg" height="198" width="297" alt="Thumbnail XI" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image12.jpg" data-size="1155x1280" data-title="Guitar artist" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb12.jpg" height="329" width="297" alt="Thumbnail XII" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image13.jpg" data-size="873x1280" data-title="Typewriter" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb13.jpg" height="436" width="297" alt="Thumbnail XIII" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image14.jpg" data-size="1280x853" data-title="Morning coffee" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb14.jpg" height="199" width="297" alt="Thumbnail XIV" /></a> <a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image15.jpg" data-size="1280x848" data-title="Fitness time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb15.jpg" height="196" width="297" alt="Thumbnail XV" /></a> </div> </div> </div>
The first two <div> elements of this code are essential, as they define that the gallery style and effects are to be used, and also define the number of columns for the content.
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3">
The site class is used for CSS targeting, while the gk-cols class in the second <div> declares that the section will be split into columns. The gk-gallery class sets that the page will be displaying a gallery, and ensure the correct CSS style and effects are added. Finally, the data-cols attribute declares the number of columns that will be used and adjusts the block layout accordingly.
Following this is the gallery content. A new <div> element is added, which will contain a single column's images. Inside this <div> are the images; each image is made up of an <a> tag that includes a link to the image in the href attribute (the gallery code will use this to provide the zoom) and three additional attributes; data-size, which sets the size of the image when zoomed, data-title, which sets the title displayed when the image is zoomed, and data-desc, which provides the description that appears to the right of the title in the zoomed image:
Following the opening <a> tag is an <img> tag, which will provide the image details. The src attribute includes the link URL to the image in your media library (this will be the same as it was in the href attribute of the <a> tag), and the other two attributes, height and width, define the size of the image when it is displayed in the plain gallery page without zoom:
The full code for a single image in the gallery looks like this:
<a href="/Image URL Here" data-size="Zoomed Image Size Here" data-title="Zoomed Image Title Here" data-desc="Zoom Image Description Here"><img src="/Image URL Here" height="Height on Gallery Page here" width="Width on Gallery Page here" alt="Alt Image Title Here" /></a>
This layout is then repeated for however many images are in the column; in the demo content there are five. Then, the <div> for the column is closed, and a new <div> created to contain the second column's images, and so on until the set number of columns and images is complete.
Let's look at building an Gallery Page from scratch to better understand how it works.
Creating a Gallery Page
To create a gallery page requires only some specific HTML code to be added to a page; no special templates or other elements need to be taken. To create a Gallery page ready for you to add images to, navigate to your WordPress backend and click on Pages → Add New to open the Add New Page screen. Enter your page title in the Title field; this title will be displayed automatically in the header with the date of publication added underneath.
Now we can start creating the gallery. Start by adding the first <div> element with the site class attached:
<div class="site">
Next, you'll need to decide how many columns of images you want to use. In the demo there are 3 columns, but you can use more or less as you see fit. Just remember that the images will be shifted underneath each other on a smaller screen, so try to avoid overloading.
Let's say we want to use three columns of images, just like in the demo. We will need to add a second <div> element with the gk-gallery and gk-cols classes attached, to declare that the page is for a gallery and will split the page into columns. Then, we can add the data-cols attribute and set its value to the number of columns we want:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3">
Better add the closing </div> tags too, to be safe:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> </div> </div>
Now we have the basic structure for the gallery page ready. Next, we will need to define the columns, and then add the images as necessary. In this example we're going to have three columns of content. Each column will be contained in a separate <div>, so let's add three sets of opening and closing <div> tags to our existing code:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> <div> First Column Content Here </div> <div> Second Column Content Here </div> <div> Third Column Content Here </div> </div> </div>
Now all that's left is for us to add each column's images, using <a> and <img> tags, to their respective <div> blocks.
Adding Images to a Column
So we have the basic HTML structure; the opening <div> elements define the number of columns and type of content, and then three sets of <div> tags define the three columns. Let's look at how to add an image to a column next.
Usually, adding an image consists of just using an <img> tag with a link to the image you wish to use from your media library, but since this gallery page includes special options, including zoom, swipe and sharing functionality, the image code is a little more complex.
First, we need to know the URL for the image we wish to use. This can be found by clicking on the image in your media library (Media → Library in your WordPress backend) and copying the URL from the URL field in the top-right of the screen:
Once you have the image URL, we need to define two different properties of the image; how it will look on the base gallery page, and how it will look when zoomed in (i.e. when a user clicks or taps on the image).
The code for how the image looks when zoomed in is contained in an <a> tag. When adding this tag, you'll need to define an href attribute, which will be the image URL we just grabbed:
<div> <a href="/Image URL Here"></a> </div>
Then we'll need to add three very important attributes that will define the title displayed on the left under the zoomed image, the description that will appear on the right under the zoomed image, and the total size of the zoomed image. The attributes used for this are:
- data-size - Defines the size of the zoomed image in pixels using the format WidthxHeight (e.g. 800x600), just like when defining screen resolution.
- data-title - Sets the title text.
- data-desc - Sets the description text.
Once we've added these elements to our code it should look something like this:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> <div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="An image taken with my camera"></a> </div> <div> Second Column Content Here </div> <div> Third Column Content Here </div> </div> </div>
Now we've got the code for our first image's looks when zoomed, we also need to define how it looks on the basic page. To do this, we'll use an <img> tag with the standard attributes; that is, src with the image URL, and Alt for the alternate title. This should be added between the opening and closing <a> tag:
<div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="An image taken with my camera"><img src="/Image URL Here" Alt="Alt Title Here" /></a> </div>
When this is added to the code, we'll have the first image in the first column ready. Now we can repeat the process of adding <a> and <img> tags to the <div> to define the other images in the column; for this example let's add four images. Once done, the code should look like this:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> <div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="First Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Second Image" data-desc="Second Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Third Image" data-desc="Third Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Fourth Image" data-desc="Fourth Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> </div> <div> Second Column Content Here </div> <div> Third Column Content Here </div> </div> </div>
So now we have one full column of four images. We can now repeat the image-adding process to create the next two columns of content, with four images each:
<div class="site"> <div class="gk-cols gk-gallery" data-cols="3"> <div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="First Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Second Image" data-desc="Second Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Third Image" data-desc="Third Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Fourth Image" data-desc="Fourth Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> </div> <div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="First Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Second Image" data-desc="Second Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Third Image" data-desc="Third Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Fourth Image" data-desc="Fourth Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> </div> <div> <a href="/Image URL Here" data-size="800x600" data-title="My First Image" data-desc="First Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Second Image" data-desc="Second Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Third Image" data-desc="Third Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> <a href="/Image URL Here" data-size="800x600" data-title="My Fourth Image" data-desc="Fourth Image Desc"><img src="/Image URL Here" Alt="Alt Title Here" /></a> </div> </div> </div>
And this is how the complete code should look, with two opening <div> elements to set the classes, then each column contained within a <div>, and each image made up of an <a> and <img> tag.
Your gallery page is now ready, so play around and see how things work for you!
The Reservation Page
The reservation page provides a quick way for visitors to your site to book a table at your restaurant, providing all the pertinent details you'll need to get your seating and waiting and kitchen staff prepared.
Creating a Reservation Page
As with the Menu page, a ready-made reservation page is available in the demo content, under the title Restaurant reservations--Make a reservation and enjoy a table at the best place. If you want to create a new one then the process is very simple; click on Pages → Add New in the main menu of your WordPress admin area to open an Add New Page screen. Once there, click on the drop-down list for the Template option in the right sidebar and select the Reservation template.
Next, click the Set Featured Image text in the right sidebar and select an image from your Media Library that you'd like to use for the parallax background in the header; the image will be automatically taken from the featured image and added to the background by the theme.
Now in the title field of the page add the title and subtitle using the following format:
Title--Subtitle
The text to the left of the double-hyphen will be taken as the title in the header area, and the text to the right will be used as the header subtitle.
Next, scroll down to the Custom Fields area below the main text area of the edit screen. If you can see this field, then click on the Screen Options tab at the top right of the screen to open the options and add a checkmark next to Custom Fields to display the field:
In the Custom Fields area, click on the Name drop-down list and select the quark-reservation-info custom field, then in the Value field add the text you would like to add as small text to the bottom of the header; in the demo content it reads:
Make an online reservations for parties up to 19. <br> For more, please contact us at (00) 123-456-789
Now click the Add Custom Field button to add it to the page.
Finally, enter the following text into the text mainbody of the page:
[GK_Reservation]
This is the basic shortcode for the reservation plugin with all default settings; we'll look at configuring this in the next section. Save your changes, and you're good to go!
The GK Reservation Plugin
GK Reservation Quark is the plugin used to create the reservation form that appears on the reservation page.
The form uses the basic shortcode:
[GK_Reservation]
Which is added to the text of the page and creates the reservation form with all default options set; all fields are enabled, no additional info is displayed and the default site administrator email will receive any sent reservation requests.
However, you can fine-tune your options by adding attributes into the shortcode, a bit like with our News Show Pro widget shortcode that is used in the Events section of the frontpage. The available attributes are:
- fields - Let's you specify which fields are displayed from the following: date, time, size, email, name, phone, special. All fields are enabled by default, but this attribute may be used to remove unwanted fields. For example, if you do not wish to use the phone field, you'd add the following attribute to the shortcode:
**fields="date,time,size,email,name,special"
- recaptcha - Sets whether recaptcha is used in the plugin or not. When turned on users must complete the recaptcha before they'll be able to send the message. The default is set to off. To turn this option on, add the following attribute to the shortcode (you will also need to set the recaptcha public and private keys in the plugin settings):
recaptcha="on"
- info - Specifies a small message that will be added under the reservation form. In the demo content, this notes that parties larger than twenty should make the reservation via phone.
info="For parties larger than 20, please contact us at (00) 123-456-789"
- email - Specifies the email address that the message should be sent to. The default is the site administrator email. The format for the attribute is:
email="Your Email Address"
- email_title - Specifies the subject title that emails sent via this form will have. Attribute format is:
email_title="Your Title"
The shortcode with all attributes added looks like this:
[GK_Reservation fields="date,time,size,email,name,phone,special" recaptcha="off" info="Your Text" email="Your Email" email_title="Reservation Form"]
Changing the Parallax Background Image
The parallax background image on this page is taken from the Featured Image. To change it, first remove the existing image by clicking the Remove featured image text; it will remove the image and the text will change to Set featured image. Click the text again to open your media library, and select the image you want to use as the parallax background as needed.
Once set, the featured image will be automatically added to the background and the parallax effect applied, so there's no need for any further action.
Changing the Header Title & Subtitle
The title and subtitle in the header is taken from the title field, separated by a double-hyphen:
Title--Subtitle
So change the text before the double-hyphen to change the title, and change the text to the right of the hyphens to change the subtitle.
Changing the Header Small Text
The small text at the bottom of the header is created using a custom field. To change it, open the Edit Page screen and make sure Custom Fields are set to visible by clicking on the Screen Options button at the top-right of the screen and ensuring there's a checkmark next to Custom Fields; if there isn't, add one.
Underneath the main text area of the edit page screen is a space for custom fields; there should only be one visible called quark-reservation-info. Modify the value of this custom field to change the text at the bottom of the header.
Removing the Calendar Icon From the Header
In the header area of the contact page is a calendar icon provided by Pixel Love. This is a standard element that is included in all reservation pages, but if you want to remove it from your reservation page we can do so using some custom CSS. If you're not familiar with adding CSS to our themes, you can find out about the multiple options available and how to use them in this Blog Post and this Documentation Article; we recommend using the override.css file included with the theme as this is easy to backup and allows you to separate your additional rules from the main CSS code.
All set? Then this part's very simple. Connect to your server via FTP and open your override.css file, then add the following line of code to the file:
.gk-reservation .gkicon-calendar {
display: none;
}
This specifically targets the calendar icon and removes it from the reservation pages. Save the changes to the file and reupload it back to its original location for the changes to be applied automatically.
Changing the Icon
Alternatively, you may want to modify the calendar icon to another icon from the Pixel Love or Font Awesome sets.
Warning:Changing the icon requires modification of a core PHP files in the theme, so we recommend that you only do this if you are comfortable modifying such files.
To do so; connect to your server via your FTP program of choice. Now you will need to find the template.reservation.php file in your Restaurant theme folder; if you used the Restaurant quickstart to install the theme then you will find it in the wp-content/themes/Quark folder, whereas if you installed using the Restaurant child-theme package then you will find the file in the wp-content/themes/quark-restaurant-child folder.
Once you find the file, open it with your editor of choice; we recommend Sublime Text 2 as a simple yet effective free code editor. Once open, you will need to navigate to line 23 of the code, where the icon is set:
<i class="gkicon-calendar big-icon" style="visibility: visible; "></i>
In this line you can modify the class of the <i> tag to your chosen icon, whether from Font Awesome or Pixel Love:
<i class="Icon Class Here big-icon" style="visibility: visible; "></i>
Note:A full list of available icons in this theme and how to add them into the <i> tag may be found in the **Theme Icons** section of this guide.
Once the changes have been made, save the amended file and reupload it to its original location on the server; the icon on the reservation page will be replaced with your new icon.
Theme Icons
Thanks to the amazing work of Pixel Love we've been able to include a selection of awesome stylized icons for you to choose from in this theme, as well as the complete Font Awesome set. A full list of the available icons and their respective classes may be found on Quark's Typography page from our demo content.
Pixel Love Icons
Once you've chosen the icon you wish to add to your content, we need to make the necessary changes to the class. As an example, let's add the cheeseburger icon from the Pixel Love set. If we check the typography page we can see that the icon's class-name is gkicon-cheeseburger, so we'll replace the placeholder text in the class attribute of the opening <i> tag with the new icon name:
Before:
<i class="Icon-Class-Here big-icon" data-sr="enter bottom and move 50px"></i>
After:
<i class="gkicon-cheeseburger big-icon" data-sr="enter bottom and move 50px"></i>
Notice that the big-icon class is left untouched; we just add the new icon class and separate it from any others with a space.
Font Awesome Icons
The Font Awesome iconset can be added into your content in much the same way as the Pixel Love icons included with the theme can; that is, by modifying the class attribute of the opening <i> tag. However, there is one small difference; with the Pixel Love icons you need only add the class name to the code:
class="gkicon-cheeseburger big-icon"
But with Font Awesome, you must declare the Font Awesome class as well as the icon class. This is done by adding fa before the icon class name, which will also start with fa. For example, if I wanted to add the Font Awesome coffee icon, whose class name is fa-coffee, I would need to change my class attribute to:
class="fa fa-coffee big-icon"
Notice that fa is written twice; once as a class of its own, and again as part of the class name of the selected icon. Absolutely any icons from the set may be added in this manner; just make sure to use the big-icon class, otherwise you'll be left with a tiny hard-to-see icon!
Reveal Animations
The reveal animations that are often used in Quark are provided by the powerful ScrollReveal JavaScript Library. This library allows animations to be added to nearly every HTML element in your code via the use of a data-sr attribute; you may have noticed when modifying the code for the frontpage elements or additional pages that they often had this data-sr attribute attached to control the animation.
When this attribute is added to an HTML tag, that element will be animated into place using a default reveal animation:
<h2 data-sr>My Title</h2>
However, ScrollReveal also includes multiple keywords that you can use to define the reveal animation using simple, understandable language. For example, the keyword "over Xs", where "X" is a time in seconds, will control the speed of the animation so that it take the value of "x" to complete. So, a value of:
<h2 data-sr="over 2s">My Title</h2>
Will cause the default animation to take two seconds to complete. Similarly, there are many keywords for controlling the type of animation. using the enter keyword will let you define the direction from which the animation will start (top, left, right, and bottom), while move can define the distance (in pixels) the animated element should move. Combine them together with the over keyword, and you will have something like this:
<h2 data-sr="Enter left move 24px over 2s">My Title</h2>
So with this setting, the title will appear 24px to the left of its final position, and will move right 24px to the final position over two seconds.
There are many more keywords that let you delay the animation, flip, spin, rotate and scale the element, and control attributes like starting opacity. A full list of the available keywords and their respective functions may be found on the ScrollReveal GitHub page.
Page-Load Animations
Quark includes the ability to display animations as pages load, to avoid users from seeing the page before it is ready to view.
This animation is provided via a gif file called default.gif stored in the wp-content/Quark/images/preloaders folder of your WordPress installation. This default animation is designed to suit the aesthetics of the theme, but if you're interested using your own animation it's very easy to replace.
- First, create your animation and save as a gif file; there are many programs online to help you with this.
- Name your new file default.gif, as this is the name used by Quark to target the preloader file.
- Connect to your server via FTP (more details on how to do this may be found in this blog article on the basics of FTP, and navigate to the wp-content/Quark/images/preloaders folder.
- Once at this folder, upload your new default.gif file and overwrite the existing file. Once done, your new page preloader animation will automatically be used.
Menu Widgets
Quark offers two menu types, definable in the Theme Customizer. The classic menu works as you would expect; each main menu item appears at the top of the page, and highlighting an option reveals its submenus if applicable:
However, the second menu type is off-canvas; that is, it scrolls into view from the right of the screen when a menu button is clicked.
Because this menu type offers a large amount of space, we have included widget areas in the off-canvas menu to help you to diversify your content. There are two widget areas available; one above the menu, and one below. You may attach any widgets you like to these areas, but in this section we will discuss the example used in the demo content; displaying social media icons and links.
The Menu Social Media Icons
In the demo layout, the Menu Bottom widget area features a Text widget with the following code to produce the social icon links:
<div class="gk-social-icons"> <a href="#"><i class="gkicon-fb"></i></a> <a href="#"><i class="gkicon-twitter"></i></a> <a href="#"><i class="gkicon-gplus"></i></a> <a href="#"><i class="gkicon-pinterest"></i></a> <a href="#"><i class="gkicon-behance"></i></a> <a href="#"><i class="gkicon-dribbble"></i></a> <a href="#"><i class="gkicon-instagram"></i></a> <a href="#"><i class="gkicon-rss"></i></a> <a href="#"><i class="gkicon-youtube"></i></a> <a href="#"><i class="gkicon-vimeo"></i></a> <a href="#"><i class="gkicon-linkedin"></i></a> </div>
The code here is very easy to understand; a <div> element is created with the gk-social-icons class attached to take care of styling. Then, each social icon is created using a mixture of an <a> tag, for the link, and a set of <i> tags for the icon:
<a href="#"><i class="gkicon-fb"></i></a>
Just like when adding Font Awesome icons, the class of the opening <i> tag defines which icon is displayed. You can pick from the following selection of classes/icons:
- gkicon-fb - Facebook
- gkicon-twitter - Twitter
- gkicon-gplus - Google+
- gkicon-pinterest - Pinterest
- gkicon-behance - Behance
- gkicon-dribbble - Dribbble
- gkicon-instagram - Instagram
- gkicon-rss - RSS Feed Icon
- gkicon-youtube - Youtube
- gkicon-vimeo - Vimeo
- gkicon-linkedin - LinkedIn
Changing an Icon
To change the icon of a given entry, you will need to modify the class attribute of the <i> tag in question. For example, to change the first icon from a Facebook icon to a Twitter icon, you would change the second line of the code from:
<a href="#"><i class="gkicon-fb"></i></a>
To:
<a href="#"><i class="gkicon-twitter"></i></a>
If you do not need a particular icon, simply delete its code starting from the opening <a> tag and finishing at the closing </a> tag (delete the <a> tags too!).
Adding a Link
By default these icons do not link anywhere, so you will need to add a link to your corresponding social media profile into the href attribute of the opening <a> tag:
<a href="/Link URL Goes Here!"><i class="gkicon-fb"></i></a>
Repeat this step for each icon so that they all link to their appropriate social media profiles.
Advanced Typography
Quark includes some complex typography options to help style your post content the way you want it; in this section, we'll cover how to use these special options.
How It Works
The typography options in Quark may be applied in the Text mode of the TinyMCE editor, where you enter raw HTML code alongside basic text. Here, you can manually add the classes required to achieve each effect to the relevant HTML tags. To use the Text mode, click on the Text tab at the top-right of the editor window:
When writing in HTML code in the text editor, you will need to manually attach the classes to the HTML tag, so that the correct CSS rules are applied.
To attach a class to an HTML tag, a new attribute, "class", followed by an equals sign and the class name in quotes, must be added to the opening tag of the element after the tag but before the closing bracket. This assigns a class to that element. For example, to add a class called "special" to an HTML <p> tag, you would write:
<p class="special">Your Text</p>
The following sections will provide information on the classes available, and their functions.
Warnings
Warnings are highlighted text segments that are meant to draw attention to important information, such as rules, advice or guidelines. There are three types of warning available, each with a different purpose. To use them, simply add the class name to a <p> element:
<p class="classname">
- gk-info - This attribute adds a blue border to the text and prefaces it with a chat icon to highlight information.
- gk-success - This attribute adds a green border to the text and prefaces it with a lightbulb icon. It is useful for adding advice or hints to your content.
- gk-notice - This attribute adds a yellow border and prefaces the text with a exclamation mark. It is used for warnings.
- gk-error - This attribute adds a red border and prefaces the text with a cross icon. It is used for errors and negative statements.
Highlights
Highlights are a way to make a particular part of a paragraph stand out. Unlike the warnings, highlights can be applied in the middle of a paragraph without damaging the text layout.
To use highlights, you will need to add a set of <span> tags in your <p> tags to separate the phrase, and add the highlight class to the <span> element. For example, if you wish to add a highlight to the word "highlight" in the following <p> tag:
<p>This is a highlight phrase</p>
You would need to add the opening <span> tag with the highlight class before the word "highlight", and the closing </span> tag after, like this:
<p>This is a <span class="className">highlight</span> phrase</p>
There is one available highlight class in Quark, which is:
- gk-highlight - This highlight adds a yellow background to the text.
Progress Bar
The progress bar is a white bar with a label underneath that can be set to fill with black to a certain point (represented by a percentage) on reveal, with a text percentage amount appearing at the point where the bar is filled to.
This is probably the most complex typography element to create in Quark, requiring multiple tags and classes to get the full functionality. First, a <div> class is created with a progress class attached. Then, a second <div> is added with a bar gk-loaded class and a style attribute that defines the length that the bar should fill to as a percentage using the following format: "width: XX%; visibility: visible;". Following this is a set of plain <span> tags that contain the label that should appear at the end of the progress bar. At this point the second <div> is closed, and a new paragraph <p> tag is opened containing a <span> tag, which in turn contains the label of the progress bar (that is, the label that appears on the left underneath the bar itself). Let's look at this code in action:
<div class="progress"> <div class="bar gk-loaded" style="width: 60%; visibility: visible; "><span>60%</span></div> <p><span>Label one</span></p></div>
You can repeat this layout multiple times to stack a group of progress bars together; great for highlighting progress towards set goals or other measurable targets.
Code
The code typography element seperates text into an indented color block with a dark margin, great for separating code to make it easier for users to read and copy & paste.
Creating code is easy; you only need to wrap your code in <pre> tags. For example:
<p>This is plain text.</p> <pre>This is code.</pre>
Unordered Lists
Unordered lists are just that; lists with no particular ordering i.e. no numbered or otherwise ordered entries. This is a good way to list points or minutes in an easily-readable format.
The classes for styling the unordered lists should be added in the opening <ul> tag that begins with list, with the <li> list item tags left as they are:
<ul class="className"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
There are four available unordered list classes, as follows:
- gk-bullet1 - This class uses solid black blocks as the delimiter between each point.
- gk-bullet2 - This class uses black outline blocks as the delimiter to each point.
- gk-bullet3 - This class uses solid orange blocks as the delimiter to each point.
- gk-bullet4 - This class uses orange outline blocks as the delimiter to each point.
Number Blocks
Number blocks create large blocks that contain a block with a character inside, such as a number, followed by a two-line item. They are useful for highlighting larger points or available options.
The complexity of the number blocks means that they require some more complex HTML tags. Each block contains a <p> tag, which also has the class assigned to it, a <span> tag that contains the character to appear in the block, an <em> tag for the first line of the item, and plain text for the second line. The basic structure looks like this:
<p class="className"> <span>Character (i.e. "1", "A")</span> <em>First Line</em> Second Line </p>
There is one available number block class in Quark, which is:
- numblocks num-1 - This creates a black colored block and text.
Blocks
Blocks are boxes that surround a paragraph of text, whether with solid color backgrounds or outlines.
Blocks are created by adding a particular class to the <p> tag that you wish to apply the block to. The basic format is very simple:
<p class="Classname">Paragraph text here.</p>
There are two simple blocks to choose from in Quark:
- block-1 - This class adds a green background block to your paragraph.
- block-2 - This class adds a yellow background block to your paragraph.
There's also a third block type that's a little more complex. Instead of adding a color background to a paragraph block, this third block type adds a black outline around the paragraph, with a title in the top-left of the outline:
This third type is created with three elements; an opening <div> tag with the special legend class applied, containing an <h4> tag that contains the title, and a <p> tag containing the paragraph text. The basic code looks like this:
<div class="legend"> <h4>Block Title Here</h4> <p>Paragraph Text Here</p> </div>
Blockquotes
Blockquotes allow you to elegantly highlight quotations in your article, to show that they are not from your pen, as it were.
The blockquotes format consists of a <blockquote> tag with class attached that contains the quoted text, and a <strong> tag before the closing </blockquote> that provides the attribution.
<blockquote class="className">Your Quote Here <strong>Attribution Name</strong> </blockquote>
This will separate the text in the blockquote tags from your other content with a grey margin on the left side.
Floated Blocks
Floated blocks are some of the most visually-appealing typography options available in Quark. They allow you to highlight particular phrases or quotes from the text by adding them in colored text on the left, right, or centre of your main content, much like a newspaper.
The layout of the HTML tags for floated blocks depends on the type of floated block you are using, and where you want the block to appear. The text to appear in the floating block is defined in a <span> tag within your content. Content added before the <span> tag will appear above it, and content added after will be added alongside it. A standard piece of HTML using these blocks may look something like this:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend. <span class="gk-block-text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.</p>
with the following result:
Something to note here is that there is no set position for the <span> tag to be added; it should be placed organically at the end of a paragraph or line in the text to highlight a particular phrase. Use the preview option in WordPress as you write the content to see how it looks and make your decision from there, and experiment with the <span> tag placement; you will get the feel for your preference very quickly!
There are a total of three classes for floated blocks:
- gk-block-text-left - This class aligns the text in the <span> tag to the left, with text following the tag appearing to the right.
- gk-block-text-right - The same as the above class, except this time the <span> tag text is on the right, and the main content after the closing tag floating left.
- gk-block-text-center - This tag creates a centrally-placed text block. Text before the <span> tag will appear above it, and text after the tag will appear below it.
Widget Settings
Quark includes the GK Widget Rules plugin from GavickPro, which allows you to control exactly where a given widget will appear. Usually, you are limited to defining only the location where a widget appears, but with Widget Rules, you can set different widgets to appear on different pages, or limit particular widgets to a category etc...
It's a great way to diversify and target your widgets depending on the content.
Using Widget Rules
Once the plugin is activated, a Widget Rules button will appear at the bottom of every widget instance in the Widgets page, reachable by navigating to Appearance>Widgets in your WordPress dashboard. Clicking this button will expand the options accordingly, and you can start configuring where a widget appears.
The options available are:
- Visible At - This option is used to micro-manage a widgets appearance by exception or the rule. For example, you can use No Pages Except to p
- revent a widget from being displayed anywhere except areas you explicitly tell it to appear; great if you want the widget to appear on one or two static pages only. In contrast, the All Pages Except option applies the widget to the same place in all areas except the ones you tell it to avoid. Finally, All Pages simply displays the widget everywhere; this is the default behaviour.
-
Select Page to Add - After selecting whether you wish to automatically include or exclude pages, you need to add the content that should be ignored/included. With this option, you can select any particular page or post, all posts in a category, plus some additional pages such as 404 pages and the like.
When necessary, an additional box will appear to allow you to enter category or post slugs; we will cover this process in the next section.
- Selected Pages - This section shows any pages that have already been included/excluded.
- Custom CSS Class - This option allows you to add a special CSS class to the widget; great if you want to target it for additional CSS styling.
- Visible On - This option lets you decide which devices should see the widget in question. For example, you can set a widget to appear only on desktop browsers, or only on mobiles. This allows you to have a different instance of a widget depending on the device to ensure they get the best experience if a given widget isn't responsive.
- Visible For - This option allows you to hide a widget from particular users; useful if you only want registered users to access the resource, for example.
Adding a Page/Post to the Selected Pages List
This short guide will show you how to add a specific page or post to the selected pages list, so they can be included or excluded from displaying a widget depending on your Visible At settings.
- Set your preferred option in the Visible At section, depending on whether you want to exclude pages from displaying the widget (All Pages Except) or include them (No Pages Except).
- In the Select Page to Add drop-down list, select Page or Post, depending on which one you wish to add.
- A new field will appear called Page ID/Title/slug. Enter the slug for the post or page you wish to include/exclude in this field, then click Add Page to add the page to the Selected Pages list.
- Click Save to save changes.
You may also set a widget to appear on all pages or all posts; after selecting Page or Post in the Select Page to Add drop-down list, instead of entering a slug in the provided field, just click Add Page, and this will add all pages or posts to the include/exclude list.
To get the post slug for a particular post, navigate to the Post List in your WordPress backend by clicking Posts>All Posts in the dashboard, then highlight the post you wish to display to bring up the options related to that post and click on Quick Edit. This will open a new set of options, including a field that contains the current post's slug, and also allows you to change it if necessary.
The same steps may be used to find the page slug; simply open the Page List from your dashboard by clicking Pages>All Pages in the left menu of your dashboard, then highlight the page you wish to add and click Quick Edit to see the page slug; copy this into the appropriate field in the Widget Rules settings.