Homepage - 'Everything you need to know' section

Hello,

I was just wondering how I could go about introducing a scrolling mechanism instead of new rows being added when there are more than 3 items added to this section?

Many Thanks!

Hi,

I'm not sure what do you want to achieve, give me more details, please. You want more than 3 items in this section and what next?

Thank you for the reply! I am looking to recreate the functionality found within the 'Beautiful featured products' section where there are arrows allowing you to scroll left and right like a carousel. I will be adding 3 more items to the 'everything you need to know section'. Currently if you add 3 new items they create another row underneath the existing 3 items.

Any tips you have to help me achieve this would be greatly appreciated!

Ok, I understand now, but Everything you need to know is a simple text widget with icons animated by CSS rules, while Beautiful featured products is a GK News Gallery widget (more advanced).

The easiest way is to use GK News Gallery widget instead of Text Widget(Everytghing you need to know), then in GK News Gallery configuration set columns to e.g. 6, then edit Simplicity/css/extensions.css file around line 371, and change this selector to:

Code: Select all

.gk-news-gallery .gk-images-wrapper.gk-images-cols6 > a {
margin-bottom: 40px;
width: 32.66%;
}

If you set another amount of columns, use another CSS selector (.gk-news-gallery .gk-images-wrapper.gk-images-cols5 - for five columns), margin-bottom property is used to achieve space between 2 rows.

Thank you for the reply! That is a huge help. I am currently trying to create something similar to the image attached so I will be needing to add a new widget area that divides the page area in half. I have gone through lots of the theme files but cant seem to find where you register the new widget areas. Do you know which file I will need to edit and is it possible to edit the functionality of the news pro widget to list the 3 latest news items like it is shown in the attached image?

Thank you for your prompt replies, really liking the theme!

footer.jpg

Regarding to new widget area, Simplicity/gavern/options/widgets.json – This file contains a list of all widget positions. New widget positions added to this file must be matched by new PHP code in the theme. (Simplicity/layouts - before,after,header or footer.php)

Of course GK NSP could look like it is shown in the attachment, You have to edit GK NSP Setting, then change style using CSS. (I attached example options and final effect without styling).

Thank you so much or the prompt reply and great advice!

I dont seem to have the widgets.json file? Am i missing a file?

Thanks

widgets.jpg

I'm sorry, I gave you wrong path. This is the correct file:

Code: Select all

Simplicity/gavern/config/widgets.json

Thanks for the info, all working now, excellent!

When adding in custom post types are there any considerations I need to take into account based on how the theme works? or can I just add what I need into the functions.php?

Thanks

You can add what you need to functions.php file or gavern/helpers/helpers.features.php.
Check Fest theme, where Speaker - custom post type was added. (check files: helpers.features.php where is the code used to implement custom post type for speakers:

Code: Select all

function gavern_create_post_type()

and Fest/single-speaker.php, category-speakers.php, content-speaker..)

Thanks again for the reply! I am currently trying to understand how to get the menu to have the white background as soon as the page loads rather than having to scroll for it to appear. The reason for this is some images make it very difficult to see the logo and menu items.

Is there a setting I can change for this?

Thank you so much!

Regards my earlier answers, instead of functions.php, use user.functions.php file, then you will have no problems with future Theme update.

Regards white menu background, go to Simplicity/js/gk.scripts.js file and change this fragment:

Code: Select all

jQuery(window).scroll(function() {
   // menu animation
   if(page_loaded && jQuery('body').hasClass('imageBg')) {
      // if menu is not displayed now
      if(jQuery(window).scrollTop() > headerHeight && !jQuery('#gk-menu-wrap').hasClass('active')) {
         //document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');
         jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));
         jQuery('#gk-head').attr('class', 'gk-no-menu');
         // hide
         jQuery('#gk-menu-wrap').attr('class', 'active');
      }
      //
      if(jQuery(window).scrollTop() <= headerHeight && jQuery('#gk-menu-wrap').hasClass('active')) {
         jQuery('#gk-head').first('div').css('display', 'block');
         jQuery('#gk-head').first('div').prepend(jQuery('#gk-header-nav'));
         jQuery('#gk-head').attr('class', '');
         jQuery('#gk-menu-wrap').attr('class', '');
      }
   }

to

Code: Select all

jQuery(window).load(function() {
   // menu animation
   jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));
   jQuery('#gk-head').attr('class', 'gk-no-menu');
   // hide
   jQuery('#gk-menu-wrap').attr('class', 'active');
   

Try something like this, and do tests.

Thank you so much for the reply, but I cannot seem to get this to work at all. Its fine across every other page apart from the homepage. I want to keep the sticky menu but would like to have a white background to the menu as soon as you land on the homepage and for the life of me I cant figure this out.

Any extra help you can provide would be greatly appreciated!

Thank you!

After mentioned modification it looks ok, see an attachment, as soon as the page is loaded menu has a white background (on homepage and others page too).

Do i need to change the background homepage image on the css only , or can i uploaded and change it from the template settings ?

I found the widget for the homepage but there is no upload button.

thanks

Hi shulny,

You can change background only on css (.imageBg #gk-head selector), but it's also different tablet and mobile version of the background, so the easiest way is to replace images: header.jpg, header_tablet.jpg, header_mobile.jpg from Simplicity/images directory.

Thanks Piotr, it would be very nice to add some upload button for the next releases !keep up the good work!

Hi there seems to be a bug when you link a youtube video on the homepage to play on mobile? In your example when you click the 'view introduction' it loads the overlay but on mobile there is no way to get back to the site without reloading the page. Is there a fix for this?

Thanks

Hi slunked2ero,

Do you mean that video is too big on mobile devices? Try to add this code to css/mobile.css file and let me know if that help..

Code: Select all

body #TB_window {
   margin-left: -157px!important;
   margin-top: -190px!important;
   width: 320px!important;
}

#TB_iframeContent {
   width: 320px!important;
}

@slunked2ero I found a better solution for that. ( This one will be added to the nearest Theme update ).

Edit SImplicity/js/gk.scripts.js file and add this code (before the last "});" mark.

Code: Select all

   //
   // some touch devices hacks
   //
   
   var links_container = jQuery('body').find('.gk-video-link');
   // register start event
   var links_time_start = 0;
   var links_swipe = false;
   
   // here
   links_container.bind('touchstart', function(e) {
      links_swipe = true;
      var touches = e.originalEvent.changedTouches || e.originalEvent.touches;

      if(touches.length > 0) {
         links_time_start = new Date().getTime();
      }
   });
   // and then
   links_container.bind('touchend', function(e) {
      var touches = e.originalEvent.changedTouches || e.originalEvent.touches;

      if(touches.length > 0 && links_swipe) {                           
         if(new Date().getTime() - links_time_start <= 500) {               
            window.location = links_container.attr('href');
         }
      }
   });

BTW Thanks for your report.

Thanks for your reply, I posted the code you provided into the section you suggested but the video still seems to load the overlay window from the desktop version of the site until you press play again, then it loads into the correct size.

There is however still one problem, when the video finishes playing and you select 'done' on iphone to exit the video and return to the website the video overlay takes over the screen and the only way to return to the website is by refreshing the actual page. Is there a fix for this?

Also one other bug i've found is when you are logged into facebook and select 'like' at the bottom of one of the pages the panel that appears allowing you to edit a comment when posting the link appears to be cut off and does not display correctly?

Really I thank you a lot for all of your help so far!

Hi,
Did you follow my second solution? it's weird, because I tested this video on real devices (Iphone and Android) and seems to be ok. The overlay shouldn't display on mobile devices at all, try to remove your mobile browser cache and check again please.

Regards second issue, could you provide an URL to your website (here or via PM) or screenshot with this panel which is not displaying correctly?

regards..

Thanks for the reply, yeah I did follow your instruction, this is what my code looks like

Code: Select all

      //
   // some touch devices hacks
   //
   
   var links_container = jQuery('body').find('.gk-video-link');
   // register start event
   var links_time_start = 0;
   var links_swipe = false;
   
   // here
   links_container.bind('touchstart', function(e) {
      links_swipe = true;
      var touches = e.originalEvent.changedTouches || e.originalEvent.touches;

      if(touches.length > 0) {
         links_time_start = new Date().getTime();
      }
   });
   // and then
   links_container.bind('touchend', function(e) {
      var touches = e.originalEvent.changedTouches || e.originalEvent.touches;

      if(touches.length > 0 && links_swipe) {                           
         if(new Date().getTime() - links_time_start <= 500) {               
            window.location = links_container.attr('href');
         }
      }
   });
});


I will DM you a link to the site. Regarding the facebook problem please see the attached image.

Thanks

Hello,

I am playing around with the Simplicity theme and have the following question - I am using a header image with white background, which makes the main menu invisible. I used the code you gave above in order to make the menu background white with black letters. It worked but the following happens - the homepage loads quite slowly (first the default menu appears and in some seconds is covered by the new one) and all the animations do not work (the sliding laptop, the price lists and so on do not even appear).

I returned to the default version and it all works fine again. Is there another way to make the menu text over the header image black? if it matters I am testing on a local server with MAMP.

Thanks in advance.

Hi @glech1,

You're right, I made a mistake, try to replace js/gk.scripts.js with the attached file. ( firstly do a backup

It works now Thank you!

don't know if this is the correct section but in Fest I do not have the ability to post as a speaker, as stated here http://www.gavick.com/demo/wordpress/fest/?p=928

Hi,
It's not a correct section, you should write your topic in the Fest section, you didn't install the quickstart, right? If you installed only theme files, you should install the GK Speakers plugin from this repository:
https://github.com/GavickPro/GK-Speakers
(unzip first)
or from the quickstart package (wp-content/plugins/gk-speakers).

Regards white menu background, go to Simplicity/js/gk.scripts.js file and change this fragment:

Code: Select all

jQuery(window).scroll(function() {
   // menu animation
   if(page_loaded && jQuery('body').hasClass('imageBg')) {
      // if menu is not displayed now
      if(jQuery(window).scrollTop() > headerHeight && !jQuery('#gk-menu-wrap').hasClass('active')) {
         //document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');
         jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));
         jQuery('#gk-head').attr('class', 'gk-no-menu');
         // hide
         jQuery('#gk-menu-wrap').attr('class', 'active');
      }
      //
      if(jQuery(window).scrollTop() <= headerHeight && jQuery('#gk-menu-wrap').hasClass('active')) {
         jQuery('#gk-head').first('div').css('display', 'block');
         jQuery('#gk-head').first('div').prepend(jQuery('#gk-header-nav'));
         jQuery('#gk-head').attr('class', '');
         jQuery('#gk-menu-wrap').attr('class', '');
      }
   }

to

Code: Select all

jQuery(window).load(function() {
   // menu animation
   jQuery('#gk-menu-wrap').append(jQuery('#gk-header-nav'));
   jQuery('#gk-head').attr('class', 'gk-no-menu');
   // hide
   jQuery('#gk-menu-wrap').attr('class', 'active');
   

Try something like this, and do tests.

Tried this but the menu animation is still there and I can see the other, first top menu on page load. It's like the white menu is on top of the old one. Any fix for this?

Tried this but the menu animation is still there and I can see the other, first top menu on page load. It's like the white menu is on top of the old one. Any fix for this?

Sorry for double post.

But it seems like the rest of the animations on the page were disabled as well with that snippet of code.

Hi @killroy10,

Did you try to replace this fragment with gk.scripts.js file from my attachment? (few posts above).

Hi @killroy10,

Did you try to replace this fragment with gk.scripts.js file from my attachment? (few posts above).

The attachment doesn't exist anymore, if you could upload it again it would be nice.

Try with this attachment (changes made on latest version of Simplicity - 1.5.1)

Hi i have a problem with the template also i would like to use the menu in the beginning as partly transparent everything works OK the menu scrolls with the page and turns into white when needed, but when i scroll back up some of the menu is gone what I've tracked it seems that the div layout changes when u scroll the page back up again. here's a picture attached what happens when i scroll back to the top with opacity menu background.there is the fresh page load and after scrolling situation

Hi @nerdfuel,
Could you please provide your website URL? (here or via PM).