Help needed moving social media icons in the Tagg theme

phayz · 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?

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>.

Riyan17 · Wed Feb 28, 2024 5:35 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

niladri11 · Mon Apr 01, 2024 10:18 am

When seeking assistance to relocate social media icons in the Tagg theme, individuals may feel frustrated or overwhelmed by technical challenges. They might hope for clear instructions or guidance to achieve their desired layout, aiming to enhance their website's aesthetic and functionality. Seeking help signifies a commitment to improving user experience and engagement on their platform. gb whatsapp Pro

pipiolo · Fri Jun 21, 2024 12:15 pm

Thanks for your answer, the code is correct.

benjamin11 · Wed Jun 26, 2024 9:10 pm

In the Tagg theme, adjusting social media icons involves accessing the theme customization options or editing the theme's code. Users may seek guidance on CSS positioning or plugin integration to achieve the desired layout and functionality, ensuring seamless integration with their website's design.

Daisy98 · Sat Jul 27, 2024 4:55 pm

It sounds like you want to relocate social media icons in the Tagg theme. Could you kindly clarify the platform you're working on (e.g., WordPress, HTML/CSS)? Furthermore, sharing information about your present configuration will help us provide more specific advice.
Fm Whatsapp

Qianca · Fri Jan 24, 2025 11:24 am

I did something similar on my site using the WordPress Customizer. To move the social icons, you can add a "Custom HTML" widget to the sidebar and paste the code for the icons there—that worked for me when I wanted them out of the footer. For the About page link, just go to the "Menus" section in the Customizer and add it to your main menu. It’s pretty straightforward once you poke around a bit!

Zarina99 · Thu Jan 30, 2025 6:52 pm

If you're using the Tagg theme and need to move social media icons, check your theme's customization settings or edit the relevant section in the theme's CSS/HTML. You may need to adjust the positioning using CSS (e.g., margin or flexbox). Let me know if you need a code!
Pikashow