Help needed moving social media icons in the Tagg theme

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

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: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

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>.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Riyan17
Jr. Bludit
Posts: 1
Joined: Tue Feb 13, 2024 10:23 am

Sure! To move the social media icons in the Tagg theme, you'll likely need to edit the theme's CSS or customize the layout through the theme editor. Look for the section related to social media icons in the theme's code, which typically involves HTML and CSS. You can adjust their positioning using CSS properties like "float," "margin," or "position." If you're uncomfortable with coding, consider reaching out to the theme's support or hiring a developer for assistance. story saver
Post Reply