typebig does not currently provide support for this item.

126 comments found.


I bought your template which is so fantastic! Now I am quite new to web design and development. I can design websites on Photoshop and it stops here… How do I upload this HTML template on my site? I installed Joomla, is it good or should I do it differently?

Thank you for your help!

Hi, we can only help if you log in with the account you purchased the template with.

Hi Typebig,

I just bought the template and I must say it’s just a work of art, I want to add a music player to the template just like the wordpress theme (Portrait) is there a way I can make it that it matches the template theme?

Thx a lot!

Hi, that will take a bit of effort. It’s something that will take a bit of time for me to customize but I can help you get started. First, you need to insert the audio player function in global.js. Add the following at the end of the file.

function initAudio(wrapper) {

    var supportsAudio = !!document.createElement('audio').canPlayType,
            loaded = false,
            manualSeek = false;

    if (supportsAudio) {
        var mp3src = wrapper.find('.mp3').attr('href');
        var oggsrc = wrapper.find('.ogg').attr('href');        

        var player =   '<span class="playtoggle" />\
                        <p class="player">\
                        <span class="gutter">\
                        <span class="loading" />\
                        <span class="handle ui-slider-handle" />\
                        <span class="played" />\
                        <span class="timeleft" />\
                        <audio preload="metadata">\
                            <source src="'+oggsrc+'" type="audio/ogg"></source>\
                            <source src="'+mp3src+'" type="audio/mpeg"></source>\

        audio = $('.player audio').get(0);
        loadingIndicator = $('.player .loading');
        positionIndicator = $('.player .handle');
        gutterPlayed = $('.player .played');
        timeleft = $('.player .timeleft');

        if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
            $(audio).bind('progress', function() {
                var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
                loadingIndicator.css({width: loaded + '%'});
        else {

        $(audio).bind('timeupdate', function() {

            var rem = parseInt(audio.duration - audio.currentTime, 10),
                    pos = (audio.currentTime / audio.duration) * 100,
                    mins = Math.floor(rem/60,10),
                    secs = rem - mins*60;

            timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs));
            if (!manualSeek) { 
                positionIndicator.css({left: pos + '%'}); 
                gutterPlayed.css({width: pos + '%'}); 
            if (!loaded) {
                loaded = true;

                        value: 0,
                        step: 0.01,
                        orientation: "horizontal",
                        range: "min",
                        max: audio.duration,
                        animate: true,                    
                        slide: function(){                            
                            manualSeek = true;
                            manualSeek = false;                    
                            audio.currentTime = ui.value;

        }).bind('pause ended', function() {

        $(".playtoggle").click(function() {            
            if (audio.paused) {    audio.play();    } 
            else { audio.pause(); }            



Next, you will need to initialize the function. Add the following inside $().ready(function() {
    if ($('.audio-wrapper').length > 0) {
        $('.audio-wrapper').each(function() {
            wrapper = $(this);
Then, you will need to add the HTML in your main HTML file, something like
                    <div class="audio-wrapper">
                        <a href="http://dl.dropbox.com/u/13549316/portrait/handel.mp3" class="mp3">mp3</a>
                        <a href="http://dl.dropbox.com/u/13549316/portrait/handel.ogg" class="ogg">ogg</a>
Finally, you need to style the audio elements in style.css. Add the following and edit to your preference

.audio-wrapper .ogg, .post-audio-wrapper .mp3 {display:none}
.audio-wrapper {margin:0 0 -15px 0}
.audio-wrapper a {display:none}
.player {display: block; height:62px; padding:15px 0 10px 0; width: 100%; position: relative; background:url(img/audio-bg.png) repeat-x; cursor: default}
.playtoggle {opacity:0.4; display:block; margin:0 auto 30px auto; text-align:center; width:41px; height:41px; background: url(img/audio-play.png) no-repeat; cursor: pointer}
.playtoggle:hover {opacity:0.7}
.playtoggle.playing {background: url(img/audio-play.png) no-repeat -41px 0}
.timeleft {position: absolute; text-align:right; right:0; padding:5px 0 5px 5px; font-size:11px; color:#777; background:#eee}
.gutter {position: absolute; z-index:0; top: 30px; left:0; height: 1px; width:auto; width:96%; background:#ddd; border-bottom:solid 1px #fff}
.loading {background: #fff; height:10px; width:10px}
.played {position:absolute; left:0; width:0; height:1px; z-index:1; background:#222}
.handle {opacity:0.8; position: absolute; z-index:2; top:-9px; left:0; width:22px; height:23px; background:url(img/audio-handle.png) no-repeat; cursor:pointer}
.handle:hover {opacity:1}


Thank you 4 the quick explanation I followed your instructions carefully but it gets all messed up. Audio player its to big and I unable to put it in the right place. Can you help??

Thank you!

Hi, sorry you will have to adjust the CSS on your own since the audio player did not originally come with the theme. I hope you understand.


Sorry now is the correct account. I bought your template which is so fantastic! Now I am quite new to web design and development. I can design websites on Photoshop and it stops here… How do I upload this HTML template on my site? I installed Joomla, is it good or should I do it differently?

Thank you for your help!

Hi, it’s not a Joomla template so you can’t just install it on Joomla. If you have a webhost like Dreamhost or GoDaddy, you will have a ftp account where you can upload your files to your server. Then, you will need to have your domain name point to the ip address of wherever your hosting the site. If you get a web host, they should have support and documentation on how to set up your website. All the best!


I’m helping out a friend with replacing information on your template. She really likes the circle version for the biography, but in chrome it doesn’t show properly. The background disappears and instead you see the top page. How do you fix that?

Thanks in advance!

Hi, please post questions using the account you purchased with. Try changing the #services to the following

#services {-webkit-transform:none; width:100%; background:url(img/your_background_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; padding:160px 0 100px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box}

Oh okay, thank you so much!

He Typebig,

I’m trying to post backgrounds on each page, but the hierarchy seems to be messed up when i do, is there a fix for this?

I want to add seperate backgrounds for portfolio and the services page. I saw a above post, but that code dind’t work for me.


Hi, which version are you using? In the latest version, you should be able to add the background images without it messing up. Maybe try just updating the global.js file with the new one if you have made significant changes already. If you have a link to the site, I can give you a more detailed answer. Thanks.

Hello Typebig, Great template, interactivity and structure. I will buy it sooner or later. But I have been waiting for your wordpress version that you had mention earlier. Is it going to be released anytime soon? And is it going to have the same neat interactivity and responsiveness? Thanks!

Yes, we are working on it but we want to take our time to maximize the usability and features. My best estimate is that it will be ready by the end of the month. Thanks for your patience.

Hi there,

Where can I download the updated files?

You should be able to download the latest with your account.

My twitter feed is not working.

Please let me know how we can fix this. http://ericmichaelmoran.com

Also, forgot to mention that my fonts are aliasing in Chrome.

Hi, I’m not sure what to tell you about the Twitter feed. Is your server PHP enabled? Maybe your settings in get-tweets.php is invalid. What is your Twitter handle? I can try with my keys. Did you fix the aliasing issue? It seems fine to me.

<!—1. Logo (Prologue) ====================================—> Typebig <!- // .inner-wrapper -> <!- // #prologue ->

/* 5. Logo ======================================================================================= */

prologue {margin-top:-200px}

prologue #logo {float:right; width:25%; opacity:}

prologue #logo a {display:block; margin-left:70px; background:#; text-indent:100%; white-space: nowrap; overflow:hidden}

prologue #logo a span {display:block; height:200px; background:url(img/200×200.png) no-repeat center center}

_ I want to raise the hight where the logo sits…. but cant seem to be able to do so?

Please advise…


Unfortunately that keeps given an error message…

Could you send me a link to your page so I can test it at typebig[@]gmail.com?

Hi, I am not sure if I received your email.

Do you have a mail address you can give me… there are lots of bugs when testing on mobile… (I have updated the media quires) Still having issues!


I need to send screen shots….


Hi Great Theme!

Just finished customising it, and have now realised that you are realising Wordpress Version…. Anyways, I am having an issue with the viewing the website on my iPhone and iPad… The portfolio images seem to be squashed and stretched… can someone please help, as i wish to launch the website very soon. thank you!

Hi, I would need to see the page to debug it. Thanks.

Hi, guys. I am a total fan of your work. I am setting this template for my Art Direction page (ad.luanav.com). The first picture of the biography section (in which one pic goes up and another down) always duplicates the first picture, as you can see in the link I’ve sent. Do you know how could I fix this?

Thanks & keep up. I can’t wait to buy more themes from you.

Guys, I’ve decided to change the pics, so the double pic is no longer an issue.

I have another 3 questions, if I may:

1. How can I update the page in dreaweaver (all bugs corrections from your latest updates) without losing what I have already customized?

2. In some of my portfolio sections I need to put a LOT of pictures (they are like miscellaneous). Is it possible or will it affect the page having to many small thumbnails with the numbers (you know, the numbers that stay under the pictures)?

3. How can I change my favicon? I know it’s quite a silly question, but I’ve generated a favicon, placed in my root and still is the favicon of my host on the display.



1) Unfortunately, I don’t have a good answer for you. I would just make a back up of your current files and try to work on it with the newest version.

2) The numbers should return to next line if they don’t fit in one line.

3) Hmm, did you try putting the following in your head tag?
<link rel="shortcut icon" href="favicon.ico" />

Hello, I am thinking about purchasing the template, but can i put video on it to show my work? I am a videographer. i was thinking youtube or Vimeo.

Hello, I am thinking about purchasing the template, but can i put video on it to show my work? I am a videographer. i was thinking youtube or Vimeo.

My apologies i see that you can… sorry to waste time!

Hy Typebig, very nice theme, I just bought it but I can’t install it because wp tells me that style.css. is missing…. what can i do? Thanks a lot! G

Hi, it’s not a Wordpress theme. It’s just an HTML template.

Are you making this for wordpress? I am going to buy it but if a wordpress release is coming I would rather have that and not put a lot of work into this. Either way, I want this. So pretty. You’re very talented and I want to throw monies at you.


Few days ago i bougth this template. I wonder how i can put the ‘main nav’ on top of my website (fixed), i want it to disapear when entering the website. And not after the intro.

Thank you in advance.


Can you also tell me why all 4 intro headings are visible at the same time? i would like to keep it as on the original template. And if you look closely when scrolling pass the introbanner (picture) the page jumps a bit up :(

Hey tarsal. Your page looks great. You have customized the CSS and it’s a bit tedious on me to tell you what to do. The logo and menu customization is something that is beyond the scope of support. It wouldn’t be fair on others for me to help customize it for you. For, the 4 headings you changed display to block…

#intro #heading h1 {display:block;...

. It should be display:none.

Hello again

Thank you. I understand that is no problem i’ll work with it and see what i can do.

Thank you for the support with the intro heading :)) have a nice day.

Hi, guys. Is there a way I can control the intensity of this animation in the header? http://ad.luanav.com/

I’ve also tried to include the div nomove to test the look, but the effect of this tag is that it stops me from reaching anything other than the header. Should I also do something on the stylesheet?

Thanks in advance.

If you add class nomove such as

<div class="nomove" id="intro">

, it will stop the animation. To adjust the animation you’ll have to play with the following in global.js
        // move intro image from mouse on mouseover

            /* Work out mouse position */
            var offset = $(this).offset();
            var xPos = e.pageX - offset.left;
            var yPos = e.pageY - offset.top;

            /* Get percentage positions */
            var mouseXPercent = Math.round(xPos / $(this).width() * 100);
            var mouseYPercent = Math.round(yPos / $(this).height() * 100);
            var diffX = $(this).width();
            var diffY = $(this).height();

            var myX = diffX * (mouseXPercent / 2000);
            var myY = diffY * (mouseYPercent / 2000);

            $(this).find('#intro-banner img').animate({right: '-' + myX + 'px', marginTop: '-' + myY + 'px', opacity:'0.8'},{duration: 100, queue: false, easing: 'linear'});
            $(this).find('#intro-banner').css({'background-position': 'right -' + myY + 'px'});

Dear, typebig. I very much enjoy this template and in general, your esthetics and way of structuring information. I have already seen a couple of questions regarding the release of a Wordpress version for this template and I must do the same. So please, can you estimate a date for its release, has it already happened? Best, A.

Hi Typebig!

My team purchased the template under the username CawaLimon (company is socialvilla/mydream). I have a few questions:

1. How can I replace ”#intro” (#intro-banner) image with 100% width image with no animation?

2. In section ”#about”, I have modified 4 .text-block classes at 25% to become only 2 at 50% each.  When adding div class to the first area, it floats to appear on second area (please see images linked below for details):

http://screencast.com/t/vyarBZLCt1 http://screencast.com/t/zCNdCK8a http://screencast.com/t/mTLlxL2DTE

3. Used an iframe to add YouTube video on page.  I made it responsive, also used a transparent image and set w and h to both 100%.  h2 tag is hidden behind video, not sure how to resolve this.

http://screencast.com/t/bcxUSBffuI http://screencast.com/t/pPVOAF6hcEg

4. Created new section beneath footer, and moved .copy to this section.  Coded a similar class but text is an unordered list (display inline and text-align right).  The text is not displaying inline, and each ul li for this class is showing padding that I did not declare.

http://screencast.com/t/ipMBQaI7 http://screencast.com/t/jlNvXRE2k http://screencast.com/t/hZk0sGYM

Thank you!