Two issues related to the frontpage

Hi! I want to know 2 things:

1. The first is how can I put text into the homepage image like in the demo

2. How can I reduce the distance between two pages in the frontpage.

Thx:)

Hi,

Regarding your issues:
1. Please add the following code into your "Frontpage" page (used as a frontpage template)

Code: Select all

<div class="gk-page">
<h1 data-sr="enter bottom and move 50px">Product Landing Page theme</h1>
<h2 data-sr="enter bottom and move 50px and wait .2s">Advanced, unique and powerful premium theme</h2>
<a class="dark btn-border" href="#" data-sr="enter bottom and move 50px and wait .3s">Learn more</a>
</div>


2. Which two pages exactly? Could you provide your website URL?

Sorry, I didn't write it correctly, I mean the two subpages in the frontpage.

www.keelsunglasses.com

Thx:)

You have empty subpage (under "Diseños exclusivos..." text). That's the reason of the big space there.
It's a kind of woocommerce shortcode with products, but maybe you don't have woocommerce plugin activated and it's empty.

Yes it's right but look at the front page now, there are two parallax images, I want that the distance between these two parallax be 0.

Thx:)

Try to add this custom css code:

Code: Select all

#frontpage-wrap .gk-clearfix:nth-child(3) > .box,
#frontpage-wrap .gk-clearfix:nth-child(4) > .box {
  padding: 0;
}


Thanks:) It works. But I have more doubts about the homepage.

1. Can I make a slideshow in the principal image in the homepage?

2. How I can make the page with a photo and a orange background that is in the demo?

3. In my frontpage (keelsunglasses.com), I have in the header, where there is the title Sun eyewear, under this there is a button that has the text "Visita la tienda", and I want it default in black, how can I put this?

Thx:)

Regarding your issues:

1. No, it's not possible on the first subpage.

2. This is the HTML structure for the subpage of "intelligent shoes" section:

Code: Select all

<div class="big-photo box-clear">
<div class="big-photo-img"><img src="https://demo.gavick.com/demo-content/quark_ecommerce/uploads/2015/05/shoes_bg.jpg" alt="" /><span class="big-photo-button gk-overlay-button" style="top: 20%; right: 30%;" data-sr="scale up 30% over .75s and wait .5s">

<span class="big-photo-button-popup">
<img src="https://demo.gavick.com/demo-content/quark_ecommerce/uploads/2015/05/popup_img1.jpg" alt="" /></span></span>

<strong>Free Powerliners</strong>
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small>
<span class="big-photo-button gk-overlay-button" style="top: 70%; right: 10%;" data-sr="scale up 30% over .75s and wait .8s">

<span class="big-photo-button-popup">
<img src="https://demo.gavick.com/demo-content/quark_ecommerce/uploads/2015/05/popup_img2.jpg" alt="" />
<strong>Round Shoelaces</strong>
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small>
</span>
</span>

</div>
<div class="big-photo-desc">
<h2>Intelligent Shoe</h2>
What really makes us stand out from the crowd is our commitment to our community. We develop powerful plugins that add a ton of features and control to your site, all open-source and free to use as you please.

Purchase a theme with us and you'll get to use it on as many websites as you like, with access to any updates we release and technical support whenever you need it; no artificial limits here. Go further with our All Theme package, which get you access to everything we've released and will ever release for a fraction of the cost. Enjoy creative freedom with GavickPro!

&nbsp;

<span class="big-photo-button" data-sr="scale up 30% over .75s and wait 1.1s">

<span class="big-photo-button-popup">
<img src="https://demo.gavick.com/demo-content/quark_ecommerce/uploads/2015/05/popup_img3.jpg" alt="" />
<strong>Eco Cowhide</strong>
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small>
</span>
</span>

</div>
</div>


It's enought to change the img urls and texts, positions of additional sections may be changed using inline styles: "style="top: 70%; right: 10%;""

3. Add this custom css code:

Code: Select all

#gk-header-mod .dark.btn-border {
  border-color: #000 !important;
  color: #000 !important;
}
#gk-header-mod .dark.btn-border:active,
#gk-header-mod .dark.btn-border:focus,
#gk-header-mod .dark.btn-border:hover {
  border-color: #eba034 !important;
  color: #eba034 !important;
}


Thanks it works:)

But I have another doubt by the way. When I open the webpage in a mobile i can't see correctly the header image and all the frontpage (keelsunglasses.com). How can I make to adapt the web to have a good view in mobile devices.

Thx a lot:)

With responsive design is really a lot of work - you are not using the default structure (like on the demo), so you have to adjust the mobile/tablet view a little (unfortunately this kind of modifications are beyond our technical support).

Regarding the header image - try to add this code:

Code: Select all

@media (max-width: 840px) {
#gk-header-mod img {
  height: auto!important;
}
}


Hi, I'm not using the default structure because I don't find the xml for quark in the ecommerce theme.

Do you know where i can download it?

And now with the code that your give me for the distance between parallax, the borders from the sides also increases if i increase the value. Why?

#frontpage-wrap .gk-clearfix:nth-child(3) > .box,
#frontpage-wrap .gk-clearfix:nth-child(4) > .box {
padding: 0;
}

Thx:)

I have more doubts.

1) Where can I add the social icons in the footer?

2) How can I move up a little the logo in the frontpage?

3) How can I put a little image into the front page because when I add the foto automatically it puts in a big size.

Thx a lot for the reponses:))

Hi,

All xml files may be found here:
https://www.gavick.com/documentation/wo ... /wxr-files

Please import the file, use the default syntaxt and most of your issues should be fixed.
(Let me know if you need further help)

Yes it works:)

Only three more questions that i can't make with the template.

1)How can i move up the logo a little?

2)How can I change the background colour of the text-box in the "intelligent shoes" page.

3) Add social icons in the footer.

Sorry for all the questions that I ask you during these days:)

Thx a lot:)

Regarding your issues:

1) Try to add this code:

Code: Select all

.gk-logo {
  margin-top: 40px;
}


2) I can't see "intelligent shoes" page on your frontapge, but you can change it using this code:

Code: Select all

.big-photo .big-photo-desc,
.big-photo .big-photo-img {
  background-color: #ddd;
}


3) Add this code to your copyright text field (Appearance -> Customize -> Features section):

Code: Select all

<div class="gk-footer-social-icons">
<a href="#"><i class="gkicon-fb"></i></a>
<a href="#"><i class="gkicon-twitter"></i></a>
<a href="#"><i class="gkicon-gplus"></i></a>
<a href="#"><i class="gkicon-instagram"></i></a>
</div>
 © 2007-2015, GavickPro<br> is an authorized retailer for goods provided by Quark Store


with your own links and copyright text.

Hi! In a page if I want to delete these two things how can i make it?

http://keelsunglasses.com/frontpage-source/new/random/

It is in this page.

Thx:)

Please add this custom css code:

Code: Select all

.post-1655 .entry-header time,
.post-1655 .mouse-icon {
  display: none;
}


Hi! I want to know how can i make the same form of login to make a register page!

Thx:)

Hi,

You have to inspect these elements on the login form and use the same css classess/ids for the register form.
This article may be helpful:
https://www.gavick.com/documentation/jo ... ss-changes

Hi! two more things:

1) CSS code for adapt the header image http://keelsunglasses.com/porque-keel/ to mobile devices

2) Why this button of the cart don't work?

Thanks:)

Hi, try to add this code:

Code: Select all

@media (max-width: 840px) {
.entry-header > img,
#gk-header-mod img {
  height: auto !important;
}
}


Regarding the cart button, did you add WooCommerce Cart widget to "Cart" widget area?

Hi! how can i delete the categories and the author in my posts?

Thx a lot:)

Try to add this custom css code:

Code: Select all

.item-info li,
.item-info .comments-link:before {
  display: none;
}
.item-info .comments-link {
  display: inline-block;
}


Thx it works:)

1.Do you know how to delete the title from a page?http://keelsunglasses.com/featured/

2. Why in my front page i put that in the store of the frontpage a 4 column products layout but ti makes 2 columns.

3.You know some tips for reduce the charge time in this theme?

Thx a lot:)

Hi,

1. Try with this code:

Code: Select all

.page-id-1641 .entry-title {
  display: none;
}


2. Add also this code:

Code: Select all

.frontpage ul.products li.product {
  width: 25%;
}


3. It's really many ways to optimize the loading speed, please check i.e. this article:
http://www.smashingmagazine.com/2014/06 ... s-website/

Hi, it works. I think these are the 2 last questions:

1) How can I resize the product pictures in the cart

2)How can I make the same that i made in the frontpage store but in the store from the web.

Thx a lot:)

Hi,
Try to add this code:

Code: Select all

#gk-popup-cart .cart_list li img {
  height: auto;
}


but unfortunately I don't understand your second question.

Sorry, I mean how can i put in the store page (http://keelsunglasses.com/tienda-2/), the same distribution of the products like in the store of the frontpage.

Thanks:)

Try with this code:

Code: Select all

.frontpage ul.products li.product {
  width: 33%;
}


And please change this filter from Quark/functions.php file:

Code: Select all

// Change number or products per row to 2
add_filter('loop_shop_columns', 'quark_loop_columns');
   if (!function_exists('quark_loop_columns')) {
      function quark_loop_columns() {
      return 2; // 2 products per row
      }
   }


change "return 2;" to "return 3;" to display products in 3 column view.

Hi! Do you know how can i make for put for example in the homepage the negative menu and the negative logo?

Thx a lot:)

You have "image logo" and "dark image logo" options in the Customizer, please upload your images and disable " Dark image background on frontpage" option from Features section in Customizer, then on the frontpage you should see another logo than on other pages.

For future issues, please create new thread.