How To Customize The Footer
Topics related to Realistic theme goes here.

TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

How To Customize The Footer

linkPost by TahMiD » Thu Dec 14, 2017 4:31 am

I wanna Custom this theme footer like this screenshot. Is that possible to do?
Screenshot_1.jpg
Screenshot_1.jpg (82.76 KiB) Viewed 1589 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How To Customize The Footer

linkPost by admin » Thu Dec 14, 2017 7:50 pm

Sure it is possible. Here is a quick and easy solution;
In your footer.php, add this HTML code between <footer id="colophon" class="site-footer mdl-mega-footer" role="contentinfo"> and <div class="site-info mdl-mega-footer--bottom-section">:
<div class="fatfooter">
	<div class="site-content">
		<div class="mdl-grid">
			<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
				<div class="widget footer-widget">
					<div class="widget-title">
						<h3>Features</h3>
					</div>
					<ul>
						<li><a href="#">About</a></li>
						<li><a href="#">Terms</a></li>
						<li><a href="#">Partners</a></li>
						<li><a href="#">Updates</a></li>
					</ul>
				</div>
			</div>

			<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
				<div class="widget footer-widget">
					<div class="widget-title">
						<h3>Details</h3>
					</div>
					<ul>
						<li><a href="#">Spec</a></li>
						<li><a href="#">Tools</a></li>
						<li><a href="#">Resources</a></li>
					</ul>
				</div>
			</div>

			<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
				<div class="widget footer-widget">
					<div class="widget-title">
						<h3>Technology</h3>
					</div>
					<ul>
						<li><a href="#">How it works</a></li>
						<li><a href="#">Patterns</a></li>
						<li><a href="#">Usage</a></li>
						<li><a href="#">Products</a></li>
						<li><a href="#">Contracts</a></li>
					</ul>
				</div>
			</div>

			<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone">
				<div class="widget footer-widget">
					<div class="widget-title">
						<h3>FAQ</h3>
					</div>
					<ul>
						<li><a href="#">Questions</a></li>
						<li><a href="#">Answers</a></li>
						<li><a href="#">Contact us</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
Then change the text to anything you want and add your links (replace the # with your hyperlinks).

Then, a little of styling:
.footer-widget h3 {
    color: #e0e0e0;
    font-size: 14px;
    padding: 0;
}
.footer-widget ul {
    margin: 0;
    padding: 0;
}
.footer-widget li {
    list-style-type: none;
}
.footer-widget a {
    color: #959593;
}
The above code goes to your Additional CSS (Appearance => Customize) or directly into your style.css file.

If you want to align the copyright text with the footer widgets, then change this code:
<div id="copyright-note">
	<div class="left">
		<?php echo do_shortcode( get_theme_mod( 'footer_left', REALISTIC_FOOTER_TEXT ) ); ?>
	</div>
	<div class="right">
		<?php echo REALISTIC_AUTHOR; ?>
	</div>
</div>
To this code:
<div class="site-content">
	<div id="copyright-note">
		<div class="left">
			<?php echo do_shortcode( get_theme_mod( 'footer_left', REALISTIC_FOOTER_TEXT ) ); ?>
		</div>
		<div class="right">
			<?php echo REALISTIC_AUTHOR; ?>
		</div>
	</div>
</div>
Basically, you need to wrap the copyright div with the "site-content" div.

If you are planning to translate your website, you will need to replace all the visible text like "Terms", "Technology" with this PHP code:
<?php esc_html_e( 'Put your text here', 'realistic' ); ?>
And of course you need to replace "Put your text here" with the text you want to show.

Final result should be like this:
Image
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

Re: How To Customize The Footer

linkPost by TahMiD » Fri Dec 15, 2017 2:50 pm

Thanks, I will Try.
TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

Re: How To Customize The Footer

linkPost by TahMiD » Sat Dec 16, 2017 8:23 am

The Result was awesome, but one more thing, how to display the footer on mobile like this? Is that possible here?
received_1903347943308982.png
received_1903347943308982.png (102.89 KiB) Viewed 1553 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How To Customize The Footer

linkPost by admin » Sun Dec 17, 2017 9:57 pm

This will require some jQuery coding. This is a very busy month for me so I will help you with this in January. I promise you :D
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

Re: How To Customize The Footer

linkPost by TahMiD » Sun Dec 17, 2017 10:05 pm

Ok, no problem at all, I will wait... Thanks for the reply at least. :)
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How To Customize The Footer

linkPost by admin » Sun Dec 17, 2017 10:08 pm

You're welcome!
Please remind me about this topic in case I forget.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

Re: How To Customize The Footer

linkPost by TahMiD » Sun Dec 17, 2017 10:10 pm

Sure, I will!

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Fri Apr 19, 2019 1:10 pm