Home › Forums › Themes Support › Gecko › Support
- This topic has 5 replies, 2 voices, and was last updated 5 years, 1 month ago by Harry.
-
AuthorPosts
-
-
March 20, 2019 at 3:40 pm #29782
Hi,
I need some help but not sure if it is within the support. But I hope you can help me up π
I am trying to customise my own design using the theme Gecko.
- As can be seen from the attached image #1, I have used woocommerce cart count and cart subtotal codings I found on the internet, trying to position them fitting into the background cash register, however, I was not able to do it quite well due to my lack of coding knowledge and hence they are way out of the position. Would like to ask if you are able to help me up with this minor positioning issue? How can I position them using CSS?
- Another thing is, I think the above mentioned woocommerce cart count and cart subtotal that I found on internet does not update any cart changes automatically. May I ask where can I find the code you have used for the shopping cart count in the theme Gecko? Is it some AJAX issue that my own codings cannot automatically update without refreshing the page?
- With reference to attached image #2, there is a white blank portion on the SHOP page, but the white blank portion does not appears on other web pages. How can I remove (eg. display: none) the white blank portion on the SHOP page?
- As seen in attached image #3 mobile version, I believe the design got cut off due to the background images I have added to the header and container. May I ask how can I code it in css to have the mobile version reflects the entire design exactly from the web version?
Thank you so much and your help is appreciated! <3
Really love the theme Gecko but would just like to add a little something (cute design) to it π
Let me know if you need the admin account and admin password for the website.
Attachments:
You must be logged in to view attached files. -
March 20, 2019 at 6:52 pm #29788
Hi,
1. Please edit your code to
.tlccarttotal { padding-left: 496px; color: #fff; margin-top: -20px; display: block; } .tlcitemcount { padding-left: 492px; color: #000; font-size: 12px; font-weight: bold; font-family: 'Poppins'; }
and remove a br tag above cart amount.
2. The code for cart update is
function jas_gecko_wc_render_mini_cart() { $output = ''; wc_clear_notices(); ob_start(); $args['list_class'] = ''; wc_get_template( 'cart/mini-cart.php' ); $output = ob_get_clean(); $result = array( 'cart_total' => WC()->cart->cart_contents_count, 'cart_html' => $output, 'cart_subtotal' => WC()->cart->get_cart_total() ); echo json_encode( $result ); exit; } add_action( 'wp_ajax_load_mini_cart', 'jas_gecko_wc_render_mini_cart' ); add_action( 'wp_ajax_nopriv_load_mini_cart', 'jas_gecko_wc_render_mini_cart' );
on line 407 in gecko > core > libraries > vendors > woocommerce > init.php
3. Please add below code
.woocommerce .jas-container .products {margin-bottom: 0;}
4. Please use below code
@media only screen and (max-width: 800px) { .top-bar-below {background-size: contain;} div.header__mid.pl__30.pr__30 { max-width: 100%; background-size: contain; } .boxed #jas-content { max-width: 100%; background-size: contain; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
March 26, 2019 at 11:26 am #29932
Hi,
- According to Picture #1 as attached, there is still white portion at the bottom of the product pages on web version, how can I remove the white portion?
- According to Picture #2 as attached, how can I remove (eg. display:none;) the Gecko header on mobile version.
- According to Picture #2 as well, there is also a white portion at the top in the header area on mobile version, how can I remove this white portion as well?
- According to Picture #3, I noticed that for the checkout page on web version, the YOUR ORDER table overflow out of the ombre border that I have. How can I make the YOUR ORDER table content fit well within the ombre borders on the right side? Just like how the BILLING & SHIPPING fits well on the left side.
- According to Picture #4 as attached, the content on theΒ checkout page on mobile version, overflow a little out of the ombre border on both left and right sides. How can I make it to have the checkout page content fit well within the ombre borders on the mobile version?
As always, thank you so much for your help!
Attachments:
You must be logged in to view attached files. -
March 26, 2019 at 7:04 pm #29944
Hi,
1. Please add below code to JanStudio > Theme Option > General Layout > Custom CSS
.jas-wc-single.wc-single-1.mb__60 { margin-bottom: 0; }
2,3,4,5. Please change prev code in 4 step to
select#shipping_method_0.shipping_method { width: 200px; } @media only screen and (max-width: 800px) { .top-bar-below {background-size: contain;} div.header__mid.pl__30.pr__30 { max-width: 100%; background-size: contain; height: auto; background-position: center; } .boxed #jas-content { max-width: 100%; background-size: contain; } .retina-logo { display: none !important; } select#shipping_method_0.shipping_method { width: 100%; } .checkout > div { padding: 0 10px; }} @media only screen and (max-width: 736px) { .jas-row.jas-page { padding: 0 15px; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
March 27, 2019 at 2:29 pm #29963
Hi,Β thank you so much for the help!!! really appreciated! ^^
All the codings worked well, except for:
- The header area when viewed under mobile version. As seen from the attached ‘Picture mobile’ image, the header becomes positioned as a ‘logo’ instead of as a ‘background’. How can I make the header in the mobile version same to what seen in the web version (refer to attached ‘Picture web’ image)?
Attachments:
You must be logged in to view attached files. -
March 27, 2019 at 5:49 pm #29972
Hi,
Please change prev code to
select#shipping_method_0.shipping_method { width: 200px; } @media only screen and (max-width: 800px) { .top-bar-below {background-size: contain;} div.header__mid.pl__30.pr__30 { max-width: 100%; background-size: cover; height: 170px; background-position: center; } .boxed #jas-content { max-width: 100%; background-size: cover; } .retina-logo { display: none !important; } select#shipping_method_0.shipping_method { width: 100%; } .checkout > div { padding: 0 10px; }} @media only screen and (max-width: 736px) { .jas-row.jas-page { padding: 0 15px; } div.header__mid.pl__30.pr__30 { background-size: contain; height: 114px; } .boxed #jas-content { max-width: 100%; background-size: contain; padding: 0 15px; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
-
-
AuthorPosts
You must be logged in to reply to this topic.