Page 1 of 2
Edit Future-Imperfect Theme HTML?
Posted: Mon Nov 30, 2015 6:32 am
by ndumanov
Hello!
I've recently installed Bludit on my website and I'm loving it so far!
I've been tinkering with the CSS and have managed to integrate it fairly cohesively into my website (I'm using the Future Imperfect theme). One thing I want to do however, is edit the HTML on the index pages and post pages so that it can have the links I want in the navbar and have them be the same as the rest of the website, as well as removing the company logo section and a couple of other minor things like that.
Where do I access this HTML code? I can clearly see these sections in developer tools when I view the page source, but I can't find the page to edit in my theme and bludit directory.
Any help from you guys would be greatly appreciated.
Re: Edit Future-Imperfect Theme HTML?
Posted: Mon Nov 30, 2015 1:35 pm
by Edi
An explanation of the theme structure can be found in the theme section of the documentation:
http://docs.bludit.com
The index template for example is
/themes/future-imperfect/index.php
The post template is
/themes/future-imperfect/php/post.php
Everything can be modified. But please respect the license:
http://html5up.net/license
Hope this helps. Otherwise, please ask.
Re: Edit Future-Imperfect Theme HTML?
Posted: Tue Dec 01, 2015 4:23 am
by ndumanov
Edi wrote:An explanation of the theme structure can be found in the theme section of the documentation:
http://docs.bludit.com
The index template for example is
/themes/future-imperfect/index.php
The post template is
/themes/future-imperfect/php/post.php
Everything can be modified. But please respect the license:
http://html5up.net/license
Hope this helps. Otherwise, please ask.
Hello and thank you for the response. I'll be sure to the respect the license when I'm making changes to the template.
The code I want to view is the code I get when I "view page source" in my internet browser. It looks like this:
Code: Select all
<!--
Future Imperfect by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Bludit CMS
bludit.com | @bludit
MIT license
-->
<html>
<head>
<!-- Include HTML meta tags -->
<base href="/bludit/themes/future-imperfect/">
<title>Impressify.co</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css">
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="stylesheet" href="assets/css/bludit.css">
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1><a href="http://impressify.co/bludit/">Impressify.co</a></h1>
<nav class="links">
<ul>
<li><a href="/bludit/http-impressifyco-abouthtml">About</a></li> </ul>
</nav>
<nav class="main">
<ul>
<li class="menu"><a class="fa-bars" href="#menu">Menu</a></li>
</ul>
</nav>
</header>
<!-- Menu -->
<section id="menu">
<!-- Links -->
<section>
<ul class="links">
<li><a href="/bludit/http-impressifyco-abouthtml">
<h3>About</h3>
<p>About your site or yourself</p>
</a></li> </ul>
</section>
<!-- Actions -->
<section>
<ul class="actions vertical">
<li><a href="http://impressify.co/bludit/admin/" class="button big fit">Log in</a></li>
</ul>
</section>
</section>
<!-- Main -->
<div id="main">
<article class="post">
<!-- Plugins Post Begin -->
<!-- Post's header -->
<header>
<div class="title">
<h2><a href="/bludit/post/this-is-a-test">This is a test</a></h2>
<p></p>
</div>
<div class="meta">
<time class="published" datetime="2015-11-01">November 24, 2015</time>
<a href="#" class="author"><span class="name">Administrator </span><img src="/bludit/content/uploads/profiles/admin.jpg" alt=""></a>
</div>
</header>
<!-- Post's content, the first part if has pagebrake -->
<p>test</p>
<!-- Post's footer -->
<footer>
<!-- Read more button -->
<!-- Post's tags -->
<ul class="stats">
</ul>
</footer>
<!-- Plugins Post End -->
</article>
<article class="post">
<!-- Plugins Post Begin -->
<!-- Post's header -->
<header>
<div class="title">
<h2><a href="/bludit/post/dssfdsdfsdf">dssfdsdfsdf</a></h2>
<p></p>
</div>
<div class="meta">
<time class="published" datetime="2015-11-01">November 24, 2015</time>
<a href="#" class="author"><span class="name">Administrator </span><img src="/bludit/content/uploads/profiles/admin.jpg" alt=""></a>
</div>
</header>
<!-- Post's content, the first part if has pagebrake -->
<p>sdfsdfsdfsdfsdfsdfsdf</p>
<!-- Post's footer -->
<footer>
<!-- Read more button -->
<!-- Post's tags -->
<ul class="stats">
</ul>
</footer>
<!-- Plugins Post End -->
</article>
<article class="post">
<!-- Plugins Post Begin -->
<!-- Post's header -->
<header>
<div class="title">
<h2><a href="/bludit/post/first-post">First post</a></h2>
<p>Welcome to Bludit</p>
</div>
<div class="meta">
<time class="published" datetime="2015-11-01">November 24, 2015</time>
<a href="#" class="author"><span class="name">Administrator </span><img src="/bludit/content/uploads/profiles/admin.jpg" alt=""></a>
</div>
</header>
<!-- Post's content, the first part if has pagebrake -->
<h2>What's Next</h2>
<ul>
<li>Manage your Bludit from the <a href="./admin/">admin area</a></li>
<li>Follow Bludit on <a href="https://twitter.com/bludit">Twitter</a> / <a href="https://www.facebook.com/bluditcms">Facebook</a> / <a href="https://plus.google.com/+Bluditcms">Google+</a></li>
<li>Chat with developers and users on <a href="https://gitter.im/dignajar/bludit">Gitter</a></li>
<li>Visit the <a href="http://forum.bludit.com">forum</a> for support</li>
<li>Read the <a href="http://docs.bludit.com">documentation</a> for more information</li>
<li>Share with your friends and enjoy</li>
</ul>
<!-- Post's footer -->
<footer>
<!-- Read more button -->
<!-- Post's tags -->
<ul class="stats">
<li><a href="/bludit/tag/bludit">Bludit</a></li><li><a href="/bludit/tag/cms">CMS</a></li><li><a href="/bludit/tag/flat-files">Flat files</a></li> </ul>
</footer>
<!-- Plugins Post End -->
</article>
<!-- Pagination -->
<ul class="actions pagination">
</ul>
</div>
<!-- Sidebar -->
<section id="sidebar">
<!-- Intro -->
<section id="intro">
<a href="http://impressify.co/bludit/" class="logo"><img src="images/logo.jpg" alt=""></a>
<header>
<h2>Impressify.co</h2>
<p></p>
</header>
</section>
<div class="plugin plugin-pages"><h2>Pages</h2><div class="plugin-content"><ul><li><a class="parent active" href="/bludit/">Home</a></li><li><a class="parent " href="/bludit/http-impressifyco-abouthtml">About</a></li></ul></div></div><div class="plugin plugin-tags"><h2>Tags</h2><div class="plugin-content"><ul><li><a href="/bludit/tag/bludit">Bludit (1)</a></li><li><a href="/bludit/tag/cms">CMS (1)</a></li><li><a href="/bludit/tag/flat-files">Flat files (1)</a></li></ul></div></div>
<!-- Footer -->
<section id="footer">
<p class="copyright">Impressify Copyright © 2015 | Design: <a href="http://html5up.net">HTML5 UP</a></p>
</section> </section>
</div>
<!-- Scripts -->
<script src="/bludit/kernel/admin/themes/default/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
When I go to themes/future-imperfect/php/post.php the code I get is this:
Code: Select all
<article class="post">
<!-- Plugins Post Begin -->
<?php Theme::plugins('postBegin') ?>
<!-- Post's header -->
<header>
<div class="title">
<h2><a href="<?php echo $Post->permalink() ?>"><?php echo $Post->title() ?></a></h2>
<p><?php echo $Post->description() ?></p>
</div>
<div class="meta">
<?php
// Author
$author = $Post->username();
if( Text::isNotEmpty($Post->authorFirstName()) || Text::isNotEmpty($Post->authorLastName()) ) {
$author = $Post->authorFirstName().' '.$Post->authorLastName();
}
?>
<time class="published" datetime="2015-11-01"><?php echo $Post->date() ?></time>
<a href="#" class="author"><span class="name"><?php echo $author ?></span><img src="<?php echo $Post->profilePicture() ?>" alt=""></a>
</div>
</header>
<!-- Post's content, the first part if has pagebrake -->
<?php echo $Post->content() ?>
<!-- Post's footer -->
<footer>
<!-- Post's tags -->
<ul class="stats">
<?php
$tags = $Post->tags(true);
foreach($tags as $tagKey=>$tagName) {
echo '<li><a href="'.HTML_PATH_ROOT.$Url->filters('tag').'/'.$tagKey.'">'.$tagName.'</a></li>';
}
?>
</ul>
</footer>
<!-- Plugins Post End -->
<?php Theme::plugins('postEnd') ?>
</article>
None of the HTML is there for me to edit in the post.php file.
Thanks again for your help, any answer is greatly appreciated.
Re: Edit Future-Imperfect Theme HTML?
Posted: Tue Dec 01, 2015 8:36 pm
by kaaleth
What would you like to change?
Re: Edit Future-Imperfect Theme HTML?
Posted: Tue Dec 01, 2015 10:08 pm
by Edi
ndumanov wrote:
None of the HTML is there for me to edit in the post.php file.
The file post.php is the template with HTML and variables to show posts.
For example:
Code: Select all
<time class="published" datetime="2015-11-01"><?php echo $Post->date() ?></time>
will become
Code: Select all
<time class="published" datetime="2015-11-01">November 24, 2015</time>
Re: Edit Future-Imperfect Theme HTML?
Posted: Thu Dec 03, 2015 5:56 pm
by ndumanov
kaaleth wrote:What would you like to change?
Hello,
I would like to change the navigation bar to have exactly the same links as the rest of my website (impressify.co) and I would like to remove the left hand menu (logo, pages, tags) entirely. That's pretty much it.
The link to my blog is
http://impressify.co/bludit/
Re: Edit Future-Imperfect Theme HTML?
Posted: Thu Dec 03, 2015 7:23 pm
by Edi
ndumanov wrote:
I would like to change the navigation bar to have exactly the same links as the rest of my website (impressify.co) [...]
I do not really understand what you mean... The navigation at "Pages" in the left sidebar? If you publish a page also a navigation link is created.
Or can you please give an example.
Re: Edit Future-Imperfect Theme HTML?
Posted: Thu Dec 03, 2015 7:48 pm
by kaaleth
The best way is create new template. It's easy and you can check docs for more info.
Re: Edit Future-Imperfect Theme HTML?
Posted: Thu Dec 03, 2015 8:52 pm
by ndumanov
Edi wrote:ndumanov wrote:
I would like to change the navigation bar to have exactly the same links as the rest of my website (impressify.co) [...]
I do not really understand what you mean... The navigation at "Pages" in the left sidebar? If you publish a page also a navigation link is created.
Or can you please give an example.
The navigation bar at the very top of the blog (
http://www.impressify.co/bludit) is what I want to change to match my website (
http://www.impressify.co). It's easier to understand if you visit the links, you'll see exactly what I'm talking about. The fixed navbar at the top.
I want to eliminate the left sidebar altogether.
Re: Edit Future-Imperfect Theme HTML?
Posted: Sat Dec 05, 2015 9:44 pm
by kaaleth
So... Are you going to integrate Bludit with your website, right?
Try this simple version that I made as a port for Bludit:
https://onedrive.live.com/redir?resid=C ... file%2czip
Download and upload Alpha folder to your bludit/themes.
And remember: this is early version. Some things were missed.