Help needed moving social media icons in the Tagg theme
- Edi
- Site Admin
- Posts: 3121
- Joined: Sun Aug 09, 2015 5:01 pm
- Location: Zurich
- Has thanked: 54 times
- Been thanked: 78 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):
You can move the snippet to the following section:
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:
You can add also the HTML link to the page "About" in the section <aside>.
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; ?>
Code: Select all
<aside class="doc__nav">
[...]
</aside>
Code: Select all
<li class="js-btn">
Code: Select all
<li class="menu__item">
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>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
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