Mbah Bedjo Theme - Documentation
Created: 06/08/2015
By: Rudhi Sasmito
Email: rudhisasmito@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

A) HTML Structure

Mbah Bedjo is a minimal resume, CV or portfolio template for creatives. It is built with Bootstrap, using HTML5, CSS3, JS and jQuery.

In general, there are many section of HTML structure

  1. BANNER ROTATOR SECTION
  2. NAVBAR SECTION
  3. ABOUT SECTION
  4. WORK SECTION
  5. CONTACT SECTION
  6. CONNECT SECTION
  7. FOOTER SECTION

Banner Rotator Structure

You can change text rotator by edited the "<div>" tags section

<h1>Mbah <span>Bedjo</span></h1>
  <div class="roles">
    <div>...</div>
    <div>...</div>
  </div>
</div>

You can change/add a image rotator by edited the "<img >" tags section

<div id="slides">
  <div class="slides-container">
    <img src="..." alt="">
    <img src="..." alt="">
  </div>
</div>


NAVBAR SECTION

You can change/add navbar by edited the "<li>" tags section


<ul class="nav navbar-nav navbar-right">
  <li data-slide="1"><a href="#" >...</a></li>
  <li data-slide="2"><a href="#" >...</a></li>
</ul>


ABOUT SECTION

This section layout with 2 columns. First coloumn is within a div with an class of "box-resume". Second coloumn is within a div with an class of "we-do".



WORK SECTION

You can change/add work item by edited the class of "r-item".


<div class="r-item wow fadeInDown">
  <a href="....." title="" data-toggle="modal" data-target="#.....">
	<img src="....." alt="">
	<div class="project-info">
		<div class="project-icon">
			<span class="fa fa-search"></span>
		</div>
		<div class="separator_wrapper bounce_fade">
			<div class="separator_first_circle">
				<div class="separator_second_circle_grey"></div>
			</div>
		</div>
		<div class="details">
			.....
		</div>
	</div>
  </a>
</div>



CONTACT SECTION

You can change coordinate google map by edited the atribute "data-lat" for latitute and "data-lng" for langitude


<div class="maps-wraper wow fadeInDown">
	<div id="cd-zoom-in"></div>
	<div id="cd-zoom-out"></div>
	<div id="maps" class="maps" data-lat="...." data-lng="....." >
		<!-- maps -->
	</div>
</div>



CONNECT SECTION

You can change/add work item by edited the class of "fa ....". You can see fontawesome cheet sheet.


<a href="#" title="">
   <div class="item">
   <div class="fa fa-facebook"></div>
   </div>
 </a>

 <a href="#" title="">
    <div class="item">
    <div class="fa fa-twitter"></div>
    </div>
 </a>

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

#primaryContent a { color: #someColor; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

#wrap #primaryContent a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure

I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

/* ==========================
RESET
============================= */
some code

/* ==========================
GENERAL LAYOUT
============================= */
some code

/* ==========================
BANNER ROTATOR
============================= */
some code
	
/* ==========================
NAVBAR
============================= */
some code
	
/* ==========================
ABOUT
============================= */
some code	

/* ==========================
SKILL
============================= */
some code

/* ==========================
SKILL
============================= */
some code
	
etc, etc.

Change color skill

<div class="circular-bar wow fadeInDown" data-wow-delay="300ms">
<input type="text" class="dial" data-fgColor="......" data-width="100"
 data-height="100" data-linecap=round  value="....." >
	<div class="circular-label-content">
		<label></label>
	</div>
	<div class="circular-bar-content">
		Creative Design
	</div>
</div> 	
You can change color skill by edited the atribute "data-fgColor" like "#cccccc"


C) JavaScript

This theme imports many Javascript files.

  1. jQuery
  2. jquery.superslides
  3. wow.js
  4. maps.google
  5. Waypoints.js
  6. jquery knob
  7. My custom scripts (script.js)
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
    $(document).ready(function() {
    	$('#slides').superslides({
    	  animation: "fade",
    	  play: 10000,
    	  slide_easing: 'easeInOutCubic',
    	  slide_speed: 800,
    	  pagination: true,
    	  hashchange: false,
    	  scrollable: true
    	});
    });
    
  3. In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. For example:
    $(document).ready(function() {
    	var current = 1; 
    	var height = $('.roles').height(); 
    	var numberDivs = $('.roles').children().length; 
    	var first = $('.roles div:nth-child(1)'); 
    	setInterval(function() {
    		var number = current * -height;
    		first.css('margin-top', number + 'px');
    		if (current === numberDivs) {
    			first.css('margin-top', '0px');
    			current = 1;
    		} else current++;
    	}, 2000);
    });
    

    D) Sources and Credits

    I've used the following images, icons or other files as listed.

    • pexels (http://www.pexels.com/)
    • Font Awesome (http://fortawesome.github.io/Font-Awesome/)
    • Google Fonts (https://www.google.com/fonts)
    • jQuery (http://jquery.com/)
    • Bootstrap v3.3.2 (http://getbootstrap.com)
    • Superslides (https://github.com/nicinabox/superslides)
    • Waypoints (https://github.com/imakewebthings/jquery-waypoints)
    • Animate CSS (http://daneden.github.io/animate.css/)
    • WOW (http://mynameismatthieu.com/WOW/)
    • Maps google (https://maps.google.com/maps/api/js?sensor=false&ver=4.1.5)

    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    Rudhi Sasmito

    Back to Top