This topic has 38 replies, 3 voices, and was last updated 6 years, 4 months ago ago by Rose Tyler
Hi, im using Xstore-Electronic and we want to make some changes as following images:
A-.Hide product category and tags from all site.
B.-Change Some Colors
1.-Change line/border color
2.-Change Icon/Text color as this colors are lined with menu bar text and we are using white
3.-Change Icon colors as this colors are lined with menu bar text and we are using white
4.-Change Change color
5.-Change Menu Bar color – We use some CODE we found on forum but it does not change (it remains gray) if use #ffffff as we want it to be white.
.header-wrapper.header-advanced .navigation-wrapper {
background-color: #252324;
}
.header-wrapper.header-advanced .search-form-wrapper, .header-wrapper.header-advanced .header-search.act-default div.fancy-select div.trigger {
border-color: #252324;
C.-Remove/hide categories or tags
D.-We need to know how to modify, delete or hide the red marked area from category page.
Thanks in Advance!
Adrian Cam.
Hi, im using Xstore-Electronic and we want to make some changes as following images:
A-.Hide product category and tags from all site.
http://prntscr.com/htjm5x
B.-Change Some Colors
1.-Change line/border color
2.-Change Icon/Text color as this colors are lined with menu bar text and we are using white
3.-Change Icon colors as this colors are lined with menu bar text and we are using white
4.-Change Change color
5.-Change Menu Bar color – We use some CODE we found on forum but it does not change (it remains gray) if use #ffffff as we want it to be white.
.header-wrapper.header-advanced .navigation-wrapper {
background-color: #252324;
}
.header-wrapper.header-advanced .search-form-wrapper, .header-wrapper.header-advanced .header-search.act-default div.fancy-select div.trigger {
border-color: #252324;
C.-Remove/hide categories or tags
http://prntscr.com/htjzez
D.-We need to know how to modify, delete or hide the red marked area from category page.
http://prntscr.com/htk4aj
Thanks in Advance!
Adrian Cam.
Hello,
A- Go to Theme Options > E-Commerce > Product Page Layout > Show product categories > off
B.-Change Some Colors
1.- Try this code
.container .secondary-menu-wrapper .menu {border-color: red;}
2. Go to Theme Options > Header Settings > Custom HTML > and edit the text color on the text tab http://prntscr.com/htvcld
3. – Go to Theme Options > Header settings > Header text color scheme > choose Dark
4.- Use this code
.header-wrapper.header-advanced .header-search.act-default #searchform .btn:before {background-color: #d00d0d;}
5.- Use this code
.header-wrapper.header-advanced .navigation-wrapper:before {background-color: #ffffff;}
C. Go to Theme Options > E-Commerce > Product Page Layout > Product categories > off
D.- To remove go to Appearance > Widgets > remove widget from After the products widget area http://prntscr.com/htveym If you want to change the content you may either add any other widget instead of the existing one or edit the Static Block that used there (go to Static Blocks > edit the static block, don’t forget to enable Visual Composer for the static blocks http://xstore.helpscoutdocs.com/article/47-static-blocks)
Regards
Hi Olga,
Thanks for your reply and almost everything works. But we need to change the following:
1.-Change color of search box when hover.
2.-Change color of border of all sub-menus
3.-Is there some code to change Menu Bar Text color? because if we use white version selected in options the cart and wishlist is black and thats right. But if we use a Black version of Menu bar Menu text bar goes black and get lost with color bar. If changing text color is not possible could you please help me changing cart and wishlist icons by css or something. The final result must be Menu BAR black, text color white and cart/wishlist icons in black.
http://prntscr.com/hv7q2d
Thanks in Advance!
Wish you a happy new year!
Hello,
You’re welcome!
1. Have you sorted out http://prntscr.com/hvgv8k ?
2.
.secondary-menu-wrapper .menu li.menu-item-has-children > .nav-sublist-dropdown {
border-color: #e5e5e5;
}
3. Try to change this code:
.header-wrapper.header-advanced .navigation-wrapper:before {background-color: #ffffff;}
to
.secondary-menu-wrapper .secondary-title, .secondary-menu-wrapper .secondary-title:after {
color: white;
}
.secondary-menu-wrapper .secondary-menu-toggle .icon-bar {
background-color: white;
}
and go to Theme Options > Typography > Navigations > Menu first level > Font Color.
Happy new year to you, too 🙂
Regards
Hi Olga,
Thanks for your help. What will be the code for changing the hover effect color for the secondary menu in all levels?
Thanks in Advance!
Adrian Cam.
You’re welcome!
.secondary-menu-wrapper .menu li:hover >a, .secondary-menu-wrapper .nav-sublist-dropdown .menu-item-has-children .nav-sublist ul > li > a:hover {
color: red;
}
Regards
Hi Olga
Thanks for your help. I tried that code but does not work :S.Another way to do this?
By the way, could you please help me in getting the same style of newsletter subscribe form that is used in the electronic theme?.
Like this one:http://prntscr.com/hw6mia
http://prntscr.com/hw6r8z
Thanks in Advance!
Dear Adrian_cam,
I’ve added code in your custom css http://prntscr.com/hwblxr > http://prntscr.com/hwblqq Please check.
I’ve changed the form http://prntscr.com/hwbph1 (http://xstore.helpscoutdocs.com/article/66-mailchimp-form-custom-styles) and added css code http://prntscr.com/hwbpnn > http://prntscr.com/hwbprt + http://prntscr.com/hwbpuv
Regards
Hi Rose,
Thanks for your help. Could you please help with the code to make the following changes:
A)
1.-Change background image/color
2.-Change color and hover color
3.-Translate that or change it.
http://prntscr.com/hwinzj
B)
1.-For the mobile menu version we need to have dark color of text on menu, but now is white. Could you please help us with the code to change that?.
http://prntscr.com/hwirao
2.-We want to achieve the same look that the demo version including icons on offers. what is the code for that?
http://prntscr.com/hwis7t
C)
1.-For the secondary menu on desktop we want to achieve the same look as demo version: same font,text color, size etc. And we want to know the color of text used on it.
http://prntscr.com/hwitl4
2.-How to achieve that line and icon
http://prntscr.com/hwivii
Sorry bothering too much, but as we advance we need more help for changes.
Thanks in Advance!
Hi Rose,
A)
We also need the code for hover effect on this section.
http://prntscr.com/hwna6x
B)
1.-Code for change color of that when in Shop Page
2.-Code for change color of border
http://prntscr.com/hwnuub
Thanks in Advance!
Adrian Cam
Hello,
A)
1. Please see screenshot http://prntscr.com/hxydog
2. You may change this in custom css code http://prntscr.com/hxyexw
We also need the code for hover effect on this section.
http://prntscr.com/hwna6x
B)
1. Theme Options > Typography > Navigation > Customize mobile menu links.
2. Please see screenshot http://prntscr.com/hxyhak
1.-Code for change color of that when in Shop Page
– please try to change it via Theme Options http://prntscr.com/hxyjrl
2.-Code for change color of border
http://prntscr.com/hwnuub
C)
1. http://prntscr.com/hxymyy
2. http://prntscr.com/hxyhak
Try to use this code:
.header-wrapper .secondary-title {
border-left: 2px solid #e6e6e6 !important;
border-right: 2px solid #e6e6e6 !important;
padding-top: 23px !important;
padding-bottom: 23px !important;
}
Feel free to ask if you have any questions.
Regards
Hi Rose,
Thanks for your help. Could you please help us with the following changes:
1.-How to change border color of 3rd lever secondary menu (image)
http://prntscr.com/hya1a4
2.-How can we get hover effect for image like in demo site.
http://prntscr.com/hya1uj
3.-How to translate “NEWSLETTER” text in desktop and mobile menus.
http://prntscr.com/hya346
4.-How to translate “All categories” text in all site
http://prntscr.com/hyax0b
Thanks in Advance!
Hello,
My pleasure 🙂 Thanks for screenshots which are really helpful.
1.
.secondary-menu-wrapper .item-design-dropdown .nav-sublist-dropdown ul > li.menu-item-has-children:hover > .nav-sublist ul{border-color: #12090D;}
2. This depend on image https://prnt.sc/hye0kj
3. Theme Options > E-commerce > Promo Popup > Promo link text.
4. Use Loco Translate plugins for translation. If you can’t find “All categories” test, likely you simply need to synchronize translation files (https://www.8theme.com/reply/176731/)
Let us know if you need any further assistance.
Regards
Hi Rose,
Thanks for your help.
Could you please help us with the following changes?:
1.-How can we use hover for this links? See image.
http://prntscr.com/hyroqe
2.-How can we use this kind of filter/sort in shop and categorie pages.
http://prntscr.com/hz1t4p
3.-Hide this filters and just use it on desktop version and not in mobile.
http://prntscr.com/hz1ucf
4.-How can we show the legends like the ones on the images “showing 1-13 of 180 results” or somthing like “page 1 of 12”.
http://prntscr.com/hz1z1t
For mobile we want to use the most simple and easy to use interface for customers.
Thanks in Advance!
Hello,
I hope you are well today.
1.
.top-bar .links a:hover {
color: red;
}
Also, I see that this is not a link http://prntscr.com/hzcete, so change it to:
<a href=" your link " style="font-size:.9rem;" >ENVÍO GRATIS COMPRAS MAYORES A $549</a>
and use:
.top-bar .textwidget a:hover {
color: red;
}
but if you want to have the hover effect on text <p>
:
.top-bar .textwidget p:hover {
color: red;
}
2. Simply add some widgets in Appearance > Widgets > Shop filters.
3. You may change “Sidebar position for mobile” to Bottom in Theme Options > E-commerce > Products Page Layout
or:
.post-type-archive-product .sidebar {
display: none;
}
4. To make this text visible, you need to disable WooCommerce Infinite Scroll and Ajax Pagination plugin.
Regards
Hi Rose,
Thanks for you support. Could you please help us with the following:
1.-
A)We got the hover effect on widget or link text but not in the Newsletter or My Account link on Top Bar. Could you please help us in how to get it.
B) We also need to know how to align widget text to left. We had tried to use text-align or use left top bar widget but not nothing works.
Thanks in Advance!
Adrian Cam
Hello,
1. –
A) Please use this code from my previous reply http://prntscr.com/i1l1w9
B) Please give me more details about the desired displaying result.
Regards
Hi Rose, Thanks 🙂
This is the displaying result we are looking for:
http://prntscr.com/i1s2ec
A)Move widget Text to left
B)Little vertical lines like the ones on social media links.
Thanks in Advance!
Hello,
.top-bar .container {
width: 100%;
}
.top-bar .links li {
border-left: 1px solid #e6e6e6;
padding-left: 5px;
padding-right: 2px;
}
.topbar-widget.etheme_widget_socials {
margin-left: 3px;
}
if you want such result http://prntscr.com/i227g5
– also add this code:
.top-bar .links {
position: absolute;
left: 275px;
border-right: 1px solid #e6e6e6;
padding-right: 3px;
}
Regards
Hi Rose,
It all works very well, but we have a problem after the latest update the seach button in header home page moves and have search word, could you please help us in getting the last display type.
Thanks in Advance
Adrian Cam
Hello,
I’ve checked your site and do not see the problem http://prntscr.com/i2l2ya Is it solved?
Regards
Hi Rose,
Thanks for your help, yes it does works fine again. But the color of the box change i use the same code that works before but now it doesnt:
.header-wrapper.header-advanced .header-search.act-default #searchform .btn:before {background-color: #00acec;}
.header-wrapper.header-advanced .header-search.act-default #searchform .btn:hover {background-color: #12090D;}
Could you please help us with that?.
Thanks in Advance!
Adrian Cam.
Hello,
Please change this code
.header-wrapper.header-advanced .header-search.act-default #searchform .btn:before {background-color: #00acec;}
.header-wrapper.header-advanced .header-search.act-default #searchform .btn:hover {background-color: #12090D;}
to
.header-wrapper.header-advanced .header-search.act-default [role="searchform"] .btn:before {
background-color: #00acec;
}
.header-wrapper.header-advanced .header-search.act-default [role=searchform] .btn:hover {
background-color: #12090D;
}
Regards
Hi Rose,
Thanks for your help it works again. We have some issue with the newsletter banner it show good on desktop but no in mobile. Could you please helps us to make this work?
Desktop
http://prntscr.com/i557pc
Mobile
http://prntscr.com/i559bp
Thanks in Advance!
Adrian Cam
Hello,
Looks like there is a bug, we will fix this in next theme update. Please try to add this code in custom css, as a temporary solution:
@media only screen and (max-width: 768px) {
#etheme-popup-holder {
max-width: 100%;
}
#etheme-popup-holder .et-popup-overlay {
display: none;
}
}
Regards
Hi Rose, thanks for your help,
Is there a way to not show Newsletter PopUp image on mobile and just show the text with white background and show the image just for Desktop. As in the mobile the image overlap the text and not looks good.
Thanks in Advance!
Adrian Cam
Hi Rose,
After last theme update, some sections move out from the right place. Could you please help us to fix it.
A) My Account (Mi Cuenta), moves out and disappear. We need to achieve the following arrangement
https://prnt.sc/i1s2ec
The css code used before does not work now.
.top-bar .container {
width: 100%;
}
.top-bar .links li {
border-left: 1px solid #e6e6e6;
padding-left: 5px;
padding-right: 2px;
}
.topbar-widget.etheme_widget_socials {
margin-left: 3px;
}
B)There are green lines in both sides of secondary menu. We need to remove it or the colored it to same color of menu bar (#12090D).
http://prntscr.com/j1dlm9
C)We want to hide or disable the buttons in red rectangles, shows up after the last update.
http://prntscr.com/j1dkzc
D) In mobile version we want to remove from pop up the white shadow in red rectangle.
http://prntscr.com/j1dpdl
Thanks in Advance!
Adrian Cam.
Hello,
A) Theme Options > General > Header Settings > http://prntscr.com/j1l2gc
B) Have you sorted out http://prntscr.com/j1l3ek ?
C) Theme Options > E-commerce > Products Page Layout > Product content elements
D) Unselect Popup background color in Theme Options > E-commerce > Promo Popup
Regards
You must be logged in to reply to this topic.Log in/Sign up