Archtek - Responsive Modern HTML Template
Themeforest Archtek - Responsive Modern HTML Template HTML Template
Please be informed in this early announcement that we are going to discontinue the HTML templates (NOT WordPress themes) selling and support in the marketplace at the end of January 2018 (about 1 year from when this is written). We have made a full year span to make sure that we can cover the support for recent customers in this period. So, if you just recently purchased the template around January 2017, please don’t worry, we still have got you covered.
Thank you for loving the template and we really do appreciate all your support.
===============================================
===============================================
OFFICIAL ANNOUNCEMENT (written on January 4, 2017)
Please be informed in this early announcement that we are going to discontinue the HTML templates (NOT WordPress themes) selling and support in the marketplace at the end of January 2018 (about 1 year from when this is written). We have made a full year span to make sure that we can cover the support for recent customers in this period. So, if you just recently purchased the template around January 2017, please don’t worry, we still have got you covered.
Thank you for loving the template and we really do appreciate all your support.
===============================================
Really like this theme. Have just one question though.
ReplyDeleteIt regarding the slider, when viewed on mobile screens, the slider-caption text disappears! Please let me know if this can be fixed?
Hi,
ReplyDeletePlease open ”/css/archtek.css” file and find this CSS:
.slider-caption {
display: none;
}
Just remove it out to make it displayed on mobile. Anyway, you may also need to adjust the additional CSS for its styling.
Thanks for the quick response. Yes the above solution works. And Yes, I need to optimize the slider caption text for the smaller screens.
ReplyDeleteCould you please point me to the CSS where I need to make changes for the same?
Thanks again, really appreciate the great work you’re doing and providing timely support.
You would need to use with CSS media queries. Please try something like this:
ReplyDelete@media only screen and (max-width: 479px) {
.slider-caption h2 {
font-size: 16px;
}
.slider-caption p {
font-size: 12px;
}
}
It will specifically use these font sizes when the screen resolution is belower than 479px.
In case you would like to use custom CSS for other elements, I would recommend “Developer Tools” on Chrome or “Firebug” on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Perfect! Thats all I need. Thanks so much Paul. I’m a big fan of your work. Cheers!
ReplyDeleteYou’re welcome and thank you so much!
ReplyDeleteHello hello ok.. I’m just gonna request anyway.. I bought the HTML version of Archtek, really love the clean and crisp design. Unfortunately I never used it on any of my projects till now. Now I have a new client for whom I would like to use it. Was wondering is it possible for me to get an upgrade to WP version? (i.e. in case if you’re feeling generous haha!)
ReplyDeleteHi there!
ReplyDeleteUnfortunately, due to the terms, I could not provide that. Each item would need to be purchased separately.
I understand, was just trying my luck Will buy the WP version once the client approves the design. Cheers!
ReplyDeleteCheers!
ReplyDeletehow would you change the size of the header?
ReplyDeleteHi,
ReplyDeleteYou would need to manually edit the CSS for that.
In case you would like to check the CSS of the elements, I would recommend “Developer Tools” on Chrome or “Firebug” on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Hi,
ReplyDeleteI’ve made my site but have noticed a responsive issue that isn’t evident on the wordpress version and was hoping you could help.
On the home page the three boxes (left one full length, right two half length)
when going into mobile view the images don’t scale to fit the screen,
http://awesomescreenshot.com/0453ldx9e7
any chance you can advice me on the HTML to fix this? occurs on your demo too.
Thanks so much
Aaron
Hi Aaron,
ReplyDeletePlease try this:
1. Open ”/js/archtek.js” file and search for this code:
if(width <= 479 || (width >= 768 && width <= 959)) {
2. Change it to:
if(width <= 767 || (width >= 768 && width <= 959)) {
This should help!
Hi. sorry its taken so long to reply. This hasn’t worked, if you resize the browser to almost phone size, you can see the images on the homepage fail to resize to fill their containers. This is still evident on your demo also.
ReplyDeletemany thanks
Aaron
OK. In addition to the previous fix, add below code into the “archtek.js” file:
ReplyDelete$(window).resize(function() {
var width = parseInt($('.content-width').css('width').replace('px', ''));
if(width <= 767 || (width >= 768 && width <= 959)) {
if($('.stretch-image').length > 0) {
$('.stretch-image').each(function() {
var originalImg = $(this);
var parentTag = $(this).parent();
parentTag.backstretch(originalImg.attr('src'));
parentTag.find('div.backstretch').find('img').attr('alt', originalImg.attr('alt'));
originalImg.remove();
});
}
}
});
This should make it work when resizing the browser.
Please also clear all the web and browser caches after the update.
Beautiful design. Would this be easy to update to Foundation 5? Many thanks
ReplyDeleteHi,
ReplyDeleteThanks for your interest.
I have never tried updating the framework but I think there might be some code or CSS to adjust after updating.
You can also find the guideline from here: http://foundation.zurb.com/docs/upgrading.html
Hello,
ReplyDeletei just bought your template and realized an responsive issue right away and i hope you can help fix it. You can reproduce it also in your live preview. Load the website in 740px width:
http://cl.ly/image/0o2W2A1E2O3I
..and resize the browser window to >1200px. The home-slider image is not resized accordingly/properly:
http://cl.ly/image/2f3f1h082z0t
Can you please help fix this?
Best regards.
Imig
Hi Imig,
ReplyDeletePlease try this:
1. Download the updated “archtek.js” from this link: https://www.dropbox.com/s/v2a521gd0l45apn/archtek.js?dl=0 and put it into the ”/js” folder of your site.
2. Add this CSS into the ”/css/archtek.css” :
#home-slider .home-slider-item {
background-size: cover;
background-position: center;
}
This should fix it.
Unfortunately it didn’t fix it:
ReplyDeletehttp://cl.ly/image/3n0A3T0R3c3e
vs.
http://cl.ly/image/1M3o1i0t132c
Hmm. I just checked it on my end and it worked… Did you already clear all web and browser caches after updating the file and code? Also what is your site URL so I could have a look on that?
ReplyDeleteYes, i did clear all web and browser caches. Bug is still there.
ReplyDeleteHere is the URL:
http://archtek.chalupas.de
but like i said, the issue can be reproduced also on your preview:
http://themes.uxbarn.com/?theme=archtek_html
Load the website in <740px width and resize browserwindow to >1200px width.
Please try adding one more CSS into the ”/css/archtek.css” file:
ReplyDelete#home-slider-container .caroufredsel_wrapper {
height: 100% !important;
}
I just updated and cleared the CDN caches of the demo site. It should be fine this time.
Anyway, I could not see your site. I only see a default page. (screenshot: http://cl.ly/image/151J2t0e052e ).
Now it works. Good job. Thank you!
ReplyDeleteYou are welcome!
ReplyDeleteI’ve obviously manages to tweak something silly here, but for some reason the menu no longer highlights the active page. It just stays on Home, no matter what page I’m on.
ReplyDeleteany ideas?
Many thanks in advance
Aaron
Hi Aaron!
ReplyDeleteIf you are using HTML version, just be sure to include the “active” CSS class on the menu item. For example:
<a href="about-us.html" class="active">Home</a>
But if you are using PHP version, make sure that at the top of the PHP file, you have this code (the code below is for About Us page):
<?php
$page = 'about';
$title = 'About Us | Archtek.';
?>
And in the “template-header.php” file, put the code like this into the menu item to echo the “active” class when the $page variable value is “about”
<?php if($page == 'about') { echo 'class="active"'; } ?>
You can also see all of these examples in the purchased package.
Hi, brilliant theme,
ReplyDeletetrying to get fancybox to work on the portfolio. how do I do this, please?
Thank you
Hi there!
ReplyDeleteSo you have purchased the HTML version and I could see the badge now.
Did you mean you want to use fancybox on the portfolio items (portfolio thumbnails)? If so, unfortunately there is no code for that out of the box. You would need to manually customize the code to implement that.
For the guideline, please open ”/js/archtek.js” and you will see that the fancybox initialization will call the element with ”.image-box” class. Just apply this class to the anchor tag that wraps around the image.
You can find the obvious example in “gallery-1.html” and “gallery-2.html” files about how to use fancybox on images.
I’ll give that a go, thanks for your help. I really do think your templates are great – especially with the php option.
ReplyDeleteHello,
ReplyDeleteGreat theme package!
Wondering as to how your change the background color behind the logo on mobile device? I manage to change the background color from black to white as it appears on the desktop and tablet but mobile still shows black. Can’t seem to find the CSS code for it.
Any help will be greatly appreciated.
Thanks.
Hi there!
ReplyDeletePlease try using this CSS:
@media only screen and (max-width: 767px) {
#header-container {
background: #777;
}
}
It will use ”#777” for the header background if the current viewport is equal or lower than 767px.
I would recommend the tool from this site: http://responsivepx.com/ . It can help you simulate the viewport size then you can use Developer Tools on Chrome or Firebug on Firefox to inspect the CSS.
Sorry for the late reply. Thank-you!
ReplyDeleteYou’re welcome!
ReplyDelete