Page 1 of 1
Help needed moving social media icons in the Tagg theme
Posted: Mon Dec 23, 2019 10:27 pm
by phayz
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?
Re: Help needed moving social media icons in the Tagg theme
Posted: Fri Dec 27, 2019 8:31 pm
by Edi
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
instead of
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>.
Re: Help needed moving social media icons in the Tagg theme
Posted: Wed Feb 28, 2024 5:35 am
by Riyan17
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