Edit Future-Imperfect Theme HTML?

ndumanov
Jr. Bludit
Posts: 6
Joined: Mon Nov 30, 2015 6:19 am

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.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

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.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
ndumanov
Jr. Bludit
Posts: 6
Joined: Mon Nov 30, 2015 6:19 am

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>
How do I find this code in my theme directory so that I can make changes to it?

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.
kaaleth
Master Bludit
Posts: 117
Joined: Sun Jun 14, 2015 9:55 am

What would you like to change?
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

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>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
ndumanov
Jr. Bludit
Posts: 6
Joined: Mon Nov 30, 2015 6:19 am

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/
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

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.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
kaaleth
Master Bludit
Posts: 117
Joined: Sun Jun 14, 2015 9:55 am

The best way is create new template. It's easy and you can check docs for more info.
ndumanov
Jr. Bludit
Posts: 6
Joined: Mon Nov 30, 2015 6:19 am

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.
kaaleth
Master Bludit
Posts: 117
Joined: Sun Jun 14, 2015 9:55 am

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