ENQUIRIES

Hi, please help me with the below

1) for homepage header and footer, can you provide me the CSS codes to bold and inncrease the text by 1px?
link: http://www.cafekg.com

2) for Contact us, how can I change the icons on the right? for e.g. the clock and rocket…
http://www.cafekg.com/contact-us/

3) How can l include “add to wish list” on my individual product pages?

Mobile version

1) for mobile version, can the homepage be full coloured instead of black and white hover effect?

2) on left navigation bar, can I tap on the “ABOUT text” then the drop down appear? or can l move the arrow closer to the “ABOUT text”? because the arrow is too far on the right side

Thank you!

Hi,

1. You can use this custom CSS

.home .main-nav .menu>li>a {
	font-weight:bold;
	font-size:15px;
}

.home .min-footer {
	font-weight: bold;
	font-size: 16px;
}

2. You can choose an icon from this list and change the icon CSS class http://simplelineicons.com/

3. Turn on this option in YITH Plugins -> Compare.

MOBILE

1. Just put the code you use for black/white images for desktop devices only.

2. Sorry, but there is no such feature in the theme.

Regards

MOBILE

1. Just put the code you use for black/white images for desktop devices only.
can you please type out for me? 🙂

1 more query, can you advise when am l unable to upload a jpeg image to the contact form?

Attachments:

You must be logged in to view attached files.

Hi,

1. We don’t have this code at the moment. You should be able to find it in the Custom CSS where you placed it earlier 🙂

2. Sorry, but we don’t know why this happens since it doesn’t depend on our theme.

Regards

i use this code, but only footer is bold.. the top header is still not bold.

kindly advise, thanks!

.home .main-nav .menu>li>a {
font-weight:bold;
font-size:15px;
}

.home .min-footer {
font-weight: bold;
font-size: 16px;
}

You have put a wrong code there https://gyazo.com/af080a599fb89eb916850e3d2259f654
Please, check it.

do i type in the code in your screenshot?

You need to use this code

.home .main-nav .menu>li>a {
font-weight:bold;
font-size:15px;
}

But you are using this

.home .main-nav .menu gt;li gt;a {
font-weight:bold;
font-size:15px;
}

solved, thanks!

Mobile version

1) for mobile version, can the homepage be full coloured instead of black and white hover effect? the codes i used in Homepage are below, how can i add for desktop only?

.promo-banner .banner-image,
.product-grid-item .product-element-top img {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.promo-banner:hover .banner-image,
.product-grid-item:hover .product-element-top img {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}
.wpb_revslider_element .tp-bgimg {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element:hover .tp-bgimg {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}
.wpb_revslider_element .tp-caption img {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element .tp-caption:hover img {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}

You can add it for desktop only in Theme Settings -> Custom CSS.

1) okay,i have put in Desktop only. could you please check for me if it works?
it is still black and white on my mobile…

2) could you guide me how to remove the password lock? i am unable to do it

3) how can i fit my homepage slider nicely on Mobile?

thank you

1. Did you remove the code from global and mobile custom CSS fields? Are you sure that it is added for desktop only?

2. What do you call the password lock?

3. Here is a video tutorial that will help you create a responsive slider https://www.youtube.com/watch?v=iyuxFo-WBiU

Regards

1. could you please help me see the codes?

all codes in Global below

.site-content {
margin-bottom: 0px;
}

.main-nav .menu>li.menu-item-design-full-width .sub-menu-dropdown {
background-color: #ECECEC;
}

.page-title {
width: 100%;
border-bottom: 0px solid rgba(168,168,168,.15);
position: relative;
margin-top: -40px;
margin-bottom: 0px;
}

.widget_search .searchform div #searchsubmit {
padding-right: 100px;
border-color: #ff5a5f;
background-color: #ff5a5f;
color: #fff;
}

.widget_search .searchform div input[type=text] {
border: 3px solid #ff5a5f;
}
.woocommerce-product-details__short-description hr {
width:100%;
}

.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-style-classic li.vc_tta-tab>a {
color: #b82d2d;
}

input.wpcf7-form-control.wpcf7-submit:hover {
background-color: #fc5c63;
border-color:#fc5c63;
color: #fff;
}
input.wpcf7-form-control.wpcf7-submit {
background-color: #fc5c63;
border-color:#fc5c63;
color: #fff;

.wpcf7-form-control wpcf7-submit btn btn-color-primary{
background-color: #fc5c63;
border-color:#fc5c63;
color: #fff;
}

.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tab>a {
color: #fc5c63; important!
}

all codes in Desktop below
.promo-banner .banner-image,
.product-grid-item .product-element-top img {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.promo-banner:hover .banner-image,
.product-grid-item:hover .product-element-top img {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}
.wpb_revslider_element .tp-bgimg {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element:hover .tp-bgimg {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}
.wpb_revslider_element .tp-caption img {
filter: grayscale(100%) opacity(0.99);
-webkit-filter: grayscale(100%) opacity(0.99);
-moz-filter: grayscale(100%) opacity(0.99);
-o-filter: grayscale(100%) opacity(0.99);
-ms-filter: grayscale(100%) opacity(0.99);

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element .tp-caption:hover img {
filter: grayscale(0) opacity(1);
-webkit-filter: grayscale(0) opacity(1);
-moz-filter: grayscale(0) opacity(1);
-o-filter: grayscale(0) opacity(1);
-ms-filter: grayscale(0) opacity(1);
}

As we can see, you have added it somewhere else, not only to our theme Custom CSS section. Maybe in WordPress customizer or some other plugin. Try to remove them all except our theme settings CSS.

i have removed on all csscand only add in Desktop CSS, but the grayscale is not working on desktop now..

please advise

OK, please provide us your admin access.

Thank you so much! Please see login details below

You had a lot of wrong CSS code added that break other parts. We have removed it and now it works correctly.
Here is the removed code

.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-style-classic li.vc_tta-tab>a {
    color: #b82d2d ;
}
.wpcf7-form-control wpcf7-submit btn btn-color-primary{
background-color: #fc5c63 ;
border-color:#fc5c63 ;
color: #fff;
}

.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tab>a {
    color: #fc5c63 ; important!
}

[Author]

Posts