117 comments found

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

Hello!

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!

typebig

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

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years
  • Netherlands

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!

typebig

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,
            audio,
            loadingIndicator,
            positionIndicator,
            timeleft,
            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>\
                        <span class="timeleft" />\
                        <audio preload="metadata">\
                            <source src="'+oggsrc+'" type="audio/ogg"></source>\
                            <source src="'+mp3src+'" type="audio/mpeg"></source>\
                        </audio>\
                      </p>';                                    

        wrapper.html(player);
        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 {
            loadingIndicator.remove();
        }

        $(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;

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

        }).bind('play',function(){
            $(".playtoggle").addClass('playing');        
        }).bind('pause ended', function() {
            $(".playtoggle").removeClass('playing');        
        });        

        $(".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);
            initAudio(wrapper);
        });
    }
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>
                    </div>
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}
sisqo611

Hi,

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!

typebig

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.

  • United Kingdom
  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hello!

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!

typebig

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!

  • Has been a member for 0-1 years

Hello!

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!

typebig

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}

Default-user

Oh okay, thank you so much!

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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.

Cheers.

typebig

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.

  • Has been a member for 0-1 years

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!

typebig

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.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi there,

Where can I download the updated files?

typebig

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

  • Bought between 50 and 99 items
  • Canada
  • Has been a member for 1-2 years

My twitter feed is not working.

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

eric_city

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

typebig

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.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
<!—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…

Cheers…

typebig

Hi, you should be editing

#prologue {margin-top:-187px}
#prologue #logo {float:right; width:25%; opacity:0.8}
#prologue #logo a {display:block; margin-left:45px; background:#222; text-indent:100%; white-space: nowrap; overflow:hidden}
#prologue #logo a span {display:block; height:187px; background:url(img/logo.png) no-repeat center center}

Try matching the -187px in #prologue and 187px in #prologue #logo a span. For example, -200px, 200px. If you can provide a screenshot of how you want it, I can be more precise in explaining.
Default-user

Hi there, I have done that but to no avail! I will forward a screen shot soon! cheers! BTW – I keep getting an error (sorry, you inquire was not sent??) any advice to set it up correctly ?

Default-user

Do i also need to edit the HTML file?

<?php //set variables $name = trim($_POST[‘name’]); $emailTo = trim($_POST[‘myemail’]); $email = trim($_POST[‘email’]); $phone = trim($_POST[‘phone’]); $comments = trim($_POST[‘comments’]); $selectedItems = trim($_POST[‘selectedItems’]); ?>

//Check to make sure sure that a valid email address is submitted
if($email == 'PUT MY EMAIL ONLY HERE?')  {
    echo "f";
} else if (!eregi("^[A-Z0-9. ]@[A-Z0-9. ]\.[A-Z]{2,4}$", $email)) {
    echo "f";
} else {
}
//Send mail
$body = "Customer Name: $name \n\nCustomer Email: $email \n\nPhone:\n$phone \n\nSelected Items: $selectedItems \n\nComments:\n$comments";
$subject = "Customer Inquiry";
$headers = "MIME-Version: 1.0\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\n";
$headers .= "From: website\n";
$headers .= "Reply-To: ".$email."\n";
$headers .= "X-Mailer: PHP's mail() Function\n";
if (mail($emailTo, $subject, $body, $headers)) {
    echo "s";
}
else {
    echo "f";
}
typebig

Just copy the following code in inquire.php

<?php 
    //set variables
    $name = trim($_POST['name']);
    $emailTo = trim($_POST['myemail']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $comments = trim($_POST['comments']);
    $selectedItems = trim($_POST['selectedItems']);

    //Check to make sure sure that a valid email address is submitted
    if($email == '')  {
        echo "f";
    } 
    else if (!preg_match("/^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$/i", $email)) {
        echo "f";
    } 
    else {

        //Send mail
        $body = "Customer Name: $name \n\nCustomer Email: $email \n\nPhone:\n$phone \n\nSelected Items: $selectedItems \n\nComments:\n$comments";
        $subject = "Customer Inquiry";
        $headers = "MIME-Version: 1.0\n";
        $headers .= "Content-type: text/plain; charset=iso-8859-1\n";
        $headers .= "From: website\n";
        $headers .= "Reply-To: ".$email."\n";
        $headers .= "X-Mailer: PHP's mail() Function\n";
        if (mail($emailTo, $subject, $body, $headers)) {
            echo "s";
        }
        else {
            echo "f";
        }
    }
?>

Default-user

Unfortunately that keeps given an error message…

typebig

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

typebig

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

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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!

Claire.

Default-user

I need to send screen shots….

typebig

typebig[at]gmail.com

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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!

typebig

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

  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 1-2 years
lvscns Purchased

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.

lvscns
lvscns Purchased

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.

Thanks.

typebig

Hello,

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" />
  • Has been a member for 0-1 years

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.

  • Has been a member for 0-1 years

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.

Default-user

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

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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

typebig

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

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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.

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
tarsal Purchased

Hello

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.

Tarik

Default-user
tarsal Purchased

Now i am not able to see the whole page of the projects site :( see http://www.genber.dk

typebig

Hi, can you clarify more about your navigation issue? You said you want the navigation at the top but you want it to disappear when entering the website. So you want it to disappear after a few seconds or something like that? I am assuming you fixed the issue with the project site.

Default-user
tarsal Purchased

Hi again. There no issue with the navigation i just want it to be on top of the page all the time and not only be visible when scrolling down to the portfolio site etc. However i have a issue with the project sites i am not able to scroll down and see the full content of the project page when entering a project

Default-user
tarsal Purchased

In my first comment i ment that i DON’T want the main nav to be invisble when entering the website. My mistake

typebig

For the fixed top nav, look for the following:

#main-nav {width:100%; position:fixed; z-index:9; top:-80px; background:#fff; opacity:0; border-bottom:solid 1px #e9e9e9; filter:none !important} 

and change to
#main-nav {width:100%; position:fixed; z-index:9; top:0 !important; background:#fff; opacity:1 !important; border-bottom:solid 1px #e9e9e9; filter:none !important} 
For the unscrollable project page issue, you changed the position attribute of #project-wrapper to fixed. It should be absolute so it’ll be
#project-wrapper {display:none; position:absolute; background:#fff; width:100%; height:105%; min-height:105%; z-index:99}
Default-user
tarsal Purchased

Hi again. That worked great thank you. Can you also please tell me how i can put a logo on the main nav and let the menu float on the right side?

Default-user
tarsal Purchased

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 :(

typebig

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.
Default-user
tarsal Purchased

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.

  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 1-2 years
lvscns Purchased

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.

typebig

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
        $('#intro:not(.nomove)').mousemove(function(e){

            /* 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'});
        });    
  • Has been a member for 0-1 years

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.

  • Has been a member for 0-1 years

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!

by
by
by
by
by
by