Help needed moving social media icons in the Tagg theme

Post Reply
phayz
Jr. Bludit
Posts: 7
Joined: Fri Jul 14, 2017 12:34 am

Mon Dec 23, 2019 10:27 pm

I like the Tagg theme because it looks very clean and simple. However, I would like to move the social media icons to the sidebar, and add a link to an About page. What's the best way of doing that?
User avatar
Edi
Site Admin
Posts: 1718
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Fri Dec 27, 2019 8:31 pm

For this you have to dive a little bit in the code of the theme.

The social icons are displayed by the following part in the file index.php in the directory /bl-themes/tagg-1.1/ (line 31):

Code: Select all

			<!-- Social Networks -->
			<?php foreach (Theme::socialNetworks() as $key=>$label): ?>
			<li class="menu__item">
				<a class="link link--dark" href="<?php echo $site->{$key}(); ?>" target="_blank">
				<i class="fa fa-<?php echo $key ?>"></i> <?php echo $label ?>
				</a>
			</li>
			<?php endforeach; ?>
You can move the snippet to the following section:

Code: Select all

<aside  class="doc__nav">

[...]

</aside>
To display the links in vertical order you can "borrow" the class "js-btn" of the tags and use

Code: Select all

<li class="js-btn">
instead of

Code: Select all

<li class="menu__item">
The whole template can be like this:

Code: Select all

<?php defined('BLUDIT') or die('Bludit CMS.'); ?>
<!DOCTYPE html>
<html lang="<?php echo Theme::lang() ?>">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="generator" content="Bludit">
	<?php
		echo Theme::metaTags('title');
		echo Theme::metaTags('description');
		echo Theme::favicon('vendors/bludit/favicon.png');
		echo Theme::css('vendors/google-fonts/fonts/nunito.css');
		echo Theme::css('vendors/line-awesome/css/line-awesome-font-awesome.min.css');
		echo Theme::css('vendors/scribbler/scribbler-global.css');
		echo Theme::css('vendors/scribbler/scribbler-doc.css');
		echo Theme::css('vendors/bludit/style.css');
	?>
	<?php
		Theme::plugins('siteHead');
	?>
</head>
<body>
	<?php Theme::plugins('siteBodyBegin') ?>

	<div class="doc__bg"></div>
	<nav class="header">
		<h1 class="logo"><a href="<?php echo $site->url() ?>"><?php echo $site->title() ?></a></h1>
		<ul class="menu">
			<div class="menu__item toggle"><span></span></div>
		</ul>
	</nav>

	<div class="wrapper">
		<aside class="doc__nav">
			<ul>
			<?php
				foreach ($tags->db as $key=>$fields) {
					$active = '';
					if ($WHERE_AM_I=='page') {
						foreach ($page->tags(true) as $tagKey) {
							$active = ($key==$tagKey)?'active':'';
							if ($active) {
								break;
							}
						}
					} elseif ($WHERE_AM_I=='tag') {
						$active = ($url->slug()==$key)?'active':'';
					}

					$html  = '<li class="tags js-btn">';
					$html .= '<a class="tag '.$active.'" href="'.DOMAIN_TAGS.$key.'">';
					$html .= '<i class="fa fa-tag"></i> '.$fields['name'];
					$html .= '</a>';
					$html .= '</li>';
					echo $html;
				}
			?>
			</ul>

            <ul>
			<!-- Social Networks -->
			<?php foreach (Theme::socialNetworks() as $key=>$label): ?>
			<li class="js-btn">
				<a class="link link--dark" href="<?php echo $site->{$key}(); ?>" target="_blank">
				<i class="fa fa-<?php echo $key ?>"></i> <?php echo $label ?>
				</a>
			</li>
			<?php endforeach; ?>
			</ul>

		</aside>

		<?php
			if ($WHERE_AM_I=='page') {
				include(__DIR__.'/page.php');
			} else {
				include(__DIR__.'/home.php');
			}
		?>
	</div>

	<footer class="footer"><?php echo $site->footer() ?>. Powered by <a href="https://www.bludit.com" target="_blank" class="link link--light">Bludit</a></footer>

	<!-- JavaScript -->
	<?php
		echo Theme::js('vendors/highlight/highlight.min.js');
		echo Theme::js('vendors/scribbler/scribbler.js');
	?>
	<script>hljs.initHighlightingOnLoad();</script>

	<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>
You can add also the HTML link to the page "About" in the section <aside>.
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
Post Reply