Return to previous page

Costomization, color change and hide category, tags etc.

This topic has 38 replies, 3 voices, and was last updated 5 years, 11 months ago ago by Rose Tyler

adrian_cam

Participant

December 28, 2017 at 23:19
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.
#180810 Copied
37 Answers
adrian_cam

Participant

December 28, 2017 at 23:21
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;
```
http://prntscr.com/htjw4c

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.
#180811 Copied
Olga Barlow

Support staff

December 29, 2017 at 18:00

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

#180848 Copied

adrian_cam

Participant

January 2, 2018 at 20:18

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!

#181002 Copied
Rose Tyler

Support staff

January 3, 2018 at 11:50
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
#181072 Copied
adrian_cam

Participant

January 4, 2018 at 02:43

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.

#181134 Copied
Rose Tyler

Support staff

January 4, 2018 at 10:04
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
#181153 Copied
adrian_cam

Participant

January 4, 2018 at 23:57

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!

#181201 Copied

Rose Tyler

Support staff

January 5, 2018 at 09:44

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

#181211 Copied

adrian_cam

Participant

January 5, 2018 at 19:35

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!

#181255 Copied

adrian_cam

Participant

January 6, 2018 at 00:44

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

#181262 Copied
Rose Tyler

Support staff

January 9, 2018 at 11:09
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

– http://prntscr.com/hxyfxv

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

– http://prntscr.com/hxyk9u

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;
}
```
http://prntscr.com/hxypre

Feel free to ask if you have any questions.

Regards
#181382 Copied
adrian_cam

Participant

January 10, 2018 at 01:42

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!

#181469 Copied

Rose Tyler

Support staff

January 10, 2018 at 08:55

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

#181483 Copied

adrian_cam

Participant

January 11, 2018 at 18:04

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!

#181654 Copied
Rose Tyler

Support staff

January 12, 2018 at 09:19
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
#181688 Copied
adrian_cam

Participant

January 17, 2018 at 02:47

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.

http://prntscr.com/i1ha8m

Thanks in Advance!

Adrian Cam

#182115 Copied

Rose Tyler

Support staff

January 17, 2018 at 10:07

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

#182141 Copied

adrian_cam

Participant

January 17, 2018 at 17:58

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!

#182171 Copied
Rose Tyler

Support staff

January 18, 2018 at 09:20
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
#182193 Copied
1 2

Viewing 20 results - 1 through 20 (of 38 total)