Get Access to All Templates € 49.- Join Today!

Arrow up
Arrow down

Need More Help?

We Are Here To Help You

Account
Please wait, authorizing ...
×
×
Forum Access (04 Jul 2019)

These forums are READ-ONLY for Guests, and only WebKomp club members can post. If you are not a member, please look at joining one of our clubs to get access to this forum.

question-circle Social Icons/Buttons missing after quickinstall

More
5 years 2 months ago #260 by Lukas
First of all very nice Theme. This is my first try at making a site with joomla and I want to gradually change the quickstart to my "final" Version.

I installed the Quickstart package and did not change anything, but the social buttons on the bottom right are missing.
I would like to create similar buttons, but cannot find the example code for them

Also the TYPOGRAPHY (UIkit) entry in the shortcode Menu is missing. Did I do something wrong or do I have to install something in addition?
Thanks for helping
Attachments:

Please Log in to join the conversation.

More
5 years 2 months ago - 5 years 2 months ago #262 by __Mike__
Hello,

Please add this code: go to Options/Prepare Content and select YES

Social icons: (Custom HTML)
<div>
<p><strong>Connet With Us</strong></p>
<p><span style="line-height: 1.3em;">[button type="link social facebook" link="http://www.facebook.com/pages/Web-Komp/470013196355968"][icon name="facebook" /][/button] [button type="link social twitter" link="http://twitter.com/webkomp"][icon name="twitter" /][/button] [button type="link social pinterest" link="http://pinterest.com/"][icon name="pinterest" /][/button] [button type="link social gplus" link="https://plus.google.com/"][icon name="google-plus" /][/button]</span></p>
</div>

Important! If you would like to use source code view use “CodeMirror” Editor

TYPOGRAPHY (UIkit) Article:
<div class="uk-grid">
			<div class="uk-width-1-1">

				<div class="uk-button-group">
					<button class="uk-button">Button</button>
					<div data-uk-dropdown="{mode:'click'}">
						<button class="uk-button"><i class="uk-icon-caret-down"></i></button>
						<div class="uk-dropdown uk-dropdown-width-2">

							<div class="uk-grid">

								<div class="uk-width-1-2">
									<ul class="uk-nav uk-nav-dropdown uk-panel">
										<li class="uk-nav-header">Header</li>
										<li><a href="#">Item</a></li>
										<li><a href="#">Item</a></li>
										<li class="uk-nav-divider"></li>
										<li><a href="#">Separated item</a></li>
										<li class="uk-parent">
											<a href="#">Parent</a>
											<ul class="uk-nav-sub">
												<li><a href="#">Sub item</a>
													<ul>
														<li><a href="#">Sub item</a></li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</div>

								<div class="uk-width-1-2">
									<ul class="uk-nav uk-nav-dropdown uk-panel">
										<li class="uk-nav-header">Header</li>
										<li><a href="#">Item</a></li>
										<li><a href="#">Item</a></li>
										<li class="uk-nav-divider"></li>
										<li><a href="#">Separated item</a></li>
										<li class="uk-parent">
											<a href="#">Parent</a>
											<ul class="uk-nav-sub">
												<li><a href="#">Sub item</a>
													<ul>
														<li><a href="#">Sub item</a></li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</div>

							</div>

						</div>
					</div>
				</div>

				<div class="uk-button-group">
					<button class="uk-button uk-button-primary">Primary</button>
					<div data-uk-dropdown="{mode:'click'}">
						<button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
						<div class="uk-dropdown uk-dropdown-small">
							<ul class="uk-nav uk-nav-dropdown">
								<li class="uk-nav-header">Header</li>
								<li><a href="#">Item</a></li>
								<li><a href="#">Item</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="#">Separated item</a></li>
								<li class="uk-parent">
									<a href="#">Parent</a>
									<ul class="uk-nav-sub">
										<li><a href="#">Sub item</a>
											<ul>
												<li><a href="#">Sub item</a></li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="uk-button-group">
					<button class="uk-button uk-button-success">Success</button>
					<div data-uk-dropdown="{mode:'click'}">
						<button class="uk-button uk-button-success"><i class="uk-icon-caret-down"></i></button>
						<div class="uk-dropdown">
							<ul class="uk-nav uk-nav-dropdown">
								<li class="uk-nav-header">Header</li>
								<li><a href="#">Item</a></li>
								<li><a href="#">Item</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="#">Separated item</a></li>
								<li class="uk-parent">
									<a href="#">Parent</a>
									<ul class="uk-nav-sub">
										<li><a href="#">Sub item</a>
											<ul>
												<li><a href="#">Sub item</a></li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="uk-button-group">
					<button class="uk-button uk-button-danger">Danger</button>
					<div data-uk-dropdown="{mode:'click'}">
						<button class="uk-button uk-button-danger"><i class="uk-icon-caret-down"></i></button>
						<div class="uk-dropdown">
							<ul class="uk-nav uk-nav-dropdown">
								<li class="uk-nav-header">Header</li>
								<li><a href="#">Item</a></li>
								<li><a href="#">Item</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="#">Separated item</a></li>
								<li class="uk-parent">
									<a href="#">Parent</a>
									<ul class="uk-nav-sub">
										<li><a href="#">Sub item</a>
											<ul>
												<li><a href="#">Sub item</a></li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<button class="uk-button" disabled>Disabled</button>
				<button class="uk-button" data-uk-tooltip title="Bazinga!">Tooltip</button>

				<button class="uk-button" data-uk-modal="{target:'#modal-1'}">Modal</button>
				<div id="modal-1" class="uk-modal">
					<div class="uk-modal-dialog">
						<button type="button" class="uk-modal-close uk-close"></button>
						<h1>Headline</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</div>

				<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-3'}">Off-canvas</button>
				<button class="uk-button-link">Button link</button>

				<div id="offcanvas-3" class="uk-offcanvas">

					<div class="uk-offcanvas-bar">

						<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
							<li><a href="#">Item</a></li>
							<li class="uk-active"><a href="#">Active</a></li>

							<li class="uk-parent">
								<a href="#">Parent</a>
								<ul class="uk-nav-sub">
									<li><a href="#">Sub item</a></li>
									<li><a href="#">Sub item</a>
										<ul>
											<li><a href="#">Sub item</a></li>
											<li><a href="#">Sub item</a></li>
										</ul>
									</li>
								</ul>
							</li>

							<li class="uk-parent">
								<a href="#">Parent</a>
								<ul class="uk-nav-sub">
									<li><a href="#">Sub item</a></li>
									<li><a href="#">Sub item</a></li>
								</ul>
							</li>

							<li><a href="#">Item</a></li>

							<li class="uk-nav-header">Header</li>
							<li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
							<li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
							<li class="uk-nav-divider"></li>
							<li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
						</ul>

						<form class="uk-search">
							<input class="uk-search-field" type="search" placeholder="search...">
							<button class="uk-search-close" type="reset"></button>
						</form>

						<div class="uk-panel">
							<h3 class="uk-panel-title">Title</h3>
							Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.
						</div>

						<div class="uk-panel">
							<h3 class="uk-panel-title">Title</h3>
							Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.
						</div>

					</div>

				</div>

				<a href="#" class="uk-close"></a>
				<a href="#" class="uk-close uk-close-alt"></a>

			</div>
		</div>

		<hr class="uk-grid-divider">

		<div class="uk-grid" data-uk-grid-margin>

			<div class="uk-width-medium-1-2">

				<div class="uk-grid" data-uk-grid-margin>

					<div class="uk-width-1-1">
						<ul class="uk-breadcrumb">
							<li><a href="#">Home</a></li>
							<li><a href="#">Blog</a></li>
							<li><span>Category</span></li>
							<li class="uk-active"><span>Post</span></li>
						</ul>
					</div>

					<div class="uk-width-1-1">

						<article class="uk-article">

							<h1 class="uk-article-title">Article title</h1>

							<p class="uk-article-meta">Written by Super User on 12 April. Posted in Blog</p>

							<div class="uk-grid" data-uk-grid-margin>
								<div class="uk-width-medium-1-2">
									<a class="uk-thumbnail uk-overlay-toggle" href="#">
										<div class="uk-overlay">
											<img src="http://placekitten.com/300/90" alt="">
											<div class="uk-overlay-area"></div>
										</div>
										<div class="uk-thumbnail-caption">Caption</div>
									</a>
								</div>

								<div class="uk-width-medium-1-2">
									<a class="uk-thumbnail uk-overlay-toggle" href="#">
										<div class="uk-overlay">
											<img src="http://placekitten.com/300/91" alt="">
											<div class="uk-overlay-caption">Caption</div>
										</div>
									<div class="uk-thumbnail-caption">Caption</div>
									</a>
								</div>
							</div>

							<p class="uk-article-lead">Lorem ipsum dolor sit amet.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<pre><code>&lt;div class="myclass"&gt;...&lt;/div&gt;</code></pre>
							<hr class="uk-article-divider">
							<div class="uk-grid" data-uk-grid-margin>

								<div class="uk-width-medium-1-5">
									<span class="uk-text-muted">text-muted</span><br>
									<span class="uk-text-info">text-info</span><br>
									<span class="uk-text-success">text-success</span><br>
									<span class="uk-text-warning">text-warning</span><br>
									<span class="uk-text-danger">text-danger</span>
								</div>

								<div class="uk-width-medium-3-10">
									<a href="#">a element</a><br>
									<em>em element</em><br>
									<strong>strong</strong><br>
									<code>code element</code><br>
									<del>del element</del>
								</div>

								<div class="uk-width-medium-2-5">
									<ins>ins element</ins><br>
									<mark>mark element</mark><br>
									<q>q <q>inside</q> a q element </q><br>
									<abbr title="Abbreviation Element">abbr element</abbr><br>
									<dfn title="Defines a definition term">dfn element</dfn>
								</div>

								<div class="uk-width-1-1">
									<p class="uk-text-center">
										<span class="uk-badge">Badge</span>
										<span class="uk-badge uk-badge-notification">1</span>
										<span class="uk-badge uk-badge-success">Success</span>
										<span class="uk-badge uk-badge-success uk-badge-notification">4</span>
										<span class="uk-badge uk-badge-warning">Warning</span>
										<span class="uk-badge uk-badge-warning uk-badge-notification">3</span>
										<span class="uk-badge uk-badge-danger">Danger</span>
										<span class="uk-badge uk-badge-danger uk-badge-notification">4</span>
									</p>
								</div>

								<div class="uk-width-medium-1-2">
									<h1 class="uk-display-inline">h1</h1>
									<h2 class="uk-display-inline">h2</h2>
									<h3 class="uk-display-inline">h3</h3>
									<h4 class="uk-display-inline">h4</h4>
									<h5 class="uk-display-inline">h5</h5>
									<h6 class="uk-display-inline">h6</h6>
								</div>

								<div class="uk-width-medium-1-2">
									<blockquote>
										<p> Lorem ipsum dolor.</p>
										<small>Someone famous</small>
									</blockquote>
								</div>

							</div>

						</article>

					</div>

					<div class="uk-width-1-1">
						<ul class="uk-comment-list">
							<li>
								<article class="uk-comment">
									<header class="uk-comment-header">
										<img class="uk-comment-avatar" src="http://placekitten.com/50/50" alt="">
										<h4 class="uk-comment-title">Author</h4>
										<p class="uk-comment-meta">May 2, 2090 at 1:55 pm</p>
									</header>
									<div class="uk-comment-body">
										<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
									</div>
								</article>
							</li>
						</ul>
					</div>

					<div class="uk-width-1-1">
						<ul class="uk-pagination">
							<li class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
							<li class="uk-active"><span>1</span></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><span>...</span></li>
							<li><a href="#">20</a></li>
							<li><a href="#"><i class="uk-icon-angle-double-right"></i></a></li>
						</ul>
					</div>

				</div>

			</div>

			<div class="uk-width-medium-1-2">

				<div class="uk-grid" data-uk-grid-margin>

					<div class="uk-width-medium-1-2">

						<div class="uk-panel">
							<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav>
								<li class="uk-nav-header">Header</li>
								<li class="uk-nav-divider"></li>
								<li class="uk-active"><a href="#">Active</a></li>
								<li class="uk-parent">
									<a href="#">Parent</a>
									<ul class="uk-nav-sub">
										<li><a href="#">Sub item</a></li>
										<li><a href="#">Sub item</a>
											<ul>
												<li><a href="#">Sub item</a></li>
												<li><a href="#">Sub item</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#">Item</a></li>
							</ul>
						</div>

						<div class="uk-panel uk-panel-divider">
							<h3 class="uk-panel-title">Divider</h3>
							Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
						</div>

						<div class="uk-panel uk-panel-header">
							<h3 class="uk-panel-title">Header</h3>
							Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
						</div>

					</div>

					<div class="uk-width-medium-1-2">

						<div class="uk-panel uk-panel-box">
							<h3 class="uk-panel-title">Box</h3>
							Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
						</div>

						<div class="uk-panel uk-panel-box uk-panel-box-primary">
							<h3 class="uk-panel-title">Box primary</h3>
							Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
						</div>

						<div class="uk-panel uk-panel-box uk-panel-box-secondary">
							<h3 class="uk-panel-title">Box secondary</h3>
							Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
						</div>

					</div>

				</div>

				<div class="uk-grid" data-uk-grid-margin>

					<div class="uk-width-1-2">
						<div class="uk-alert" data-uk-alert>
							<a class="uk-alert-close uk-close"></a>
							<p>Info message</p>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-alert uk-alert-success" data-uk-alert>
							<a class="uk-alert-close uk-close"></a>
							<p>Success message</p>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-alert uk-alert-warning" data-uk-alert>
							<a class="uk-alert-close uk-close"></a>
							<p>Warning message</p>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-alert uk-alert-danger" data-uk-alert>
							<a class="uk-alert-close uk-close"></a>
							<p>Danger message</p>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-progress">
							<div class="uk-progress-bar" style="width: 55%;">55%</div>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-progress uk-progress-success">
							<div class="uk-progress-bar" style="width: 55%;">55%</div>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-progress uk-progress-warning">
							<div class="uk-progress-bar" style="width: 55%;">55%</div>
						</div>
					</div>

					<div class="uk-width-1-2">
						<div class="uk-progress uk-progress-danger">
							<div class="uk-progress-bar" style="width: 55%;">55%</div>
						</div>
					</div>

					<div class="uk-width-1-2">
						<fieldset class="uk-form">
							<legend>Form states</legend>
							<div class="uk-form-row">
								<input type="text" placeholder="Text Input" class="uk-width-1-1">
							</div>
							<div class="uk-form-row">
								<input type="text" placeholder="form-success" value="form-success" class="uk-width-1-1 uk-form-success">
							</div>
							<div class="uk-form-row">
								<input type="text" placeholder="form-danger" value="form-danger" class="uk-width-1-1 uk-form-danger">
							</div>
							<div class="uk-form-row">
								<input type="text" placeholder="form disabled" class="uk-width-1-1" disabled>
							</div>
						</fieldset>
					</div>

					<div class="uk-width-1-2">
						<fieldset class="uk-form">
							<legend>Form styles</legend>
							<div class="uk-form-row">
								<input type="text" placeholder="form-large" class="uk-form-large uk-form-width-small">
								<button class="uk-button uk-button-large" type="reset">Large</button>
							</div>
							<div class="uk-form-row">
								<input type="text" placeholder="form-small" class="uk-form-small uk-form-width-small">
								<button class="uk-button uk-button-small" type="reset">Small</button>
							</div>
							<div class="uk-form-row">
								<input type="text" placeholder="form-blank" class="uk-form-width-small uk-form-blank">
								<button class="uk-button uk-button-mini" type="reset">Mini</button>
							</div>
						</fieldset>
					</div>

				</div>

			</div>

		</div>

		<hr class="uk-grid-divider">

		<div class="uk-grid" data-uk-grid-margin>

			<div class="uk-width-medium-1-4">

				<ul class="uk-subnav uk-subnav-line">
					<li class="uk-active"><a href="#">Active</a></li>
					<li><a href="#">Item</a></li>
					<li><span>Disabled</span></li>
				</ul>

			</div>
			<div class="uk-width-medium-1-4">

				<ul class="uk-subnav uk-subnav-pill">
					<li class="uk-active"><a href="#">Active</a></li>
					<li><a href="#">Item</a></li>
					<li><span>Disabled</span></li>
				</ul>

			</div>
			<div class="uk-width-medium-1-4">

				<ul class="uk-tab" data-uk-tab>
					<li class="uk-active"><a href="#">Active</a></li>
					<li><a href="#">Item</a></li>
					<li class="uk-disabled"><a href="#">Disabled</a></li>
				</ul>

			</div>
			<div class="uk-width-medium-1-4">

				<a href="#" class="uk-icon-button uk-icon-github"></a>
				<a href="#" class="uk-icon-button uk-icon-twitter"></a>
				<a href="#" class="uk-icon-button uk-icon-dribbble"></a>
				<a href="#" class="uk-icon-button uk-icon-html5"></a>

			</div>
		</div>

		<hr class="uk-grid-divider">

		<div class="uk-grid uk-grid-divider" data-uk-grid-margin>
			<div class="uk-width-medium-1-4">

				<ul class="uk-list uk-list-line">
					<li>List item 1</li>
					<li>List item 2</li>
					<li>List item 3</li>
				</ul>

			</div>

			<div class="uk-width-medium-1-4">

				<ul class="uk-list uk-list-striped">
					<li>List item 1</li>
					<li>List item 2</li>
					<li>List item 3</li>
				</ul>

			</div>
			<div class="uk-width-medium-1-4">

				<table class="uk-table uk-table-striped uk-table-condensed uk-table-hover">
					<caption>Table caption</caption>
					<thead>
						<tr>
							<th>Table</th>
							<th>Heading</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Table</td>
							<td>Data</td>
						</tr>
						<tr>
							<td>Table</td>
							<td>Data</td>
						</tr>
					</tbody>
				</table>

			</div>
			<div class="uk-width-medium-1-4">

				<dl class="uk-description-list uk-description-list-line">
					<dt>Description lists</dt>
					<dd>Description text.</dd>
					<dt>Description lists</dt>
					<dd>Description text.</dd>
				</dl>

			</div>
		</div>









WebKomp, Support

- Please search forums before posting.
- Chrome DevTools is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions.
- If a thread is solved please edit your original / first post and place "[SOLVED]".

Last edit: 5 years 2 months ago by __Mike__.

Please Log in to join the conversation.

Why Choose WebKomp?

With all the Joomla template providers out there, why choose us?  Here are many reasons why a WebKomp template would be a good fit for your website:

  • 42+ Templates
  • We offer a 14-day money-back guarantee
  • Nice Designs - We take pride in our work and we always looking ways to improve the next template release.
  • Affordable - Our prices are low.
  • Free Support - Need help? Just contact us
  • No Backlink Required - You can shut it off in the template's admin panel.
  • Nice Framework - WebKomp templates are powered by Warp, Helix, T3, Gantry5 intuitive, wonderful  fast, lightweight, and feature-packed frameworks.
  • Easy to Customize - The admin panel provides many useful options that can be easily tweaked from the backend, easily, change fonts, colors, presets and more.
  • Our templates are based on the open Warp 7 , Helix, T3 and Gantry 5 Framework - Refer to the official Warp documentation, T3 Framework , Helix3/Ultimate, Gantry 5 for comprehensive info about how to use and expand the frameworks.
  • Sample Data Available - Quickstart Package allow you install in few clicks Joomla template, Joomla extensions and Demo data, in final you get full Joomla website exactly the same like on demo.
  • Mobile Friendly - All templates on this site are now responsive, meaning they automatically adjust to any screen resolution.  
  • The Single Template(12 Months Membership) is dedicated to all customer that need only one Template for their business or private project.