123 comments found

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.

sisqo611 Purchased

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
sisqo611 Purchased

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.

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!

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!

kladwerk Purchased

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.

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.

Hi there,

Where can I download the updated files?

typebig

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

eric_pos Purchased

My twitter feed is not working.

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

eric_pos
eric_pos Purchased

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.

<!—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…

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.

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

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.

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" />

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.

Default-user

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

typebig

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.

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

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.

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'});
        });    

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!

by
by
by
by
by
by