Home › Forums › WoodMart support forum › Search bar in header

Search bar in header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 9, 2020 at 10:07 pm #240287

    joemnm
    Participant

    Can I change the style of the search form in the header? It has rounded corners and is a light grey outline by default, I want it to have square corners and I want to be able to control the colors of the form.

    Thanks!

    November 9, 2020 at 10:10 pm #240288

    joemnm
    Participant

    Also can I adjust the color and size of the cart element and account element in the header? I want to make them bigger, the icons and the text, and I want to adjust the color.

    Thanks!

    November 10, 2020 at 7:04 am #240323

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .searchform input[type=text] {
	font-size: 15px;
	border: 2px solid red;
	color: red;
	border-radius: 0;
}
    .woodmart-shopping-cart .woodmart-cart-icon:before {
	font-size: 18px;
	color: red;
}
    .wd-tools-element .wd-tools-text {
	font-size: 14px;
}

    You can set the color and the border color according to your needs.

    Regard’s.
    Xtemos Studios.

    November 10, 2020 at 1:26 pm #240475

    joemnm
    Participant

    Hello,
    Thanks. The search bar code is perfect.

    The other two snippets dont seem to work. It is changing the color of the cart icon, but not the color of the account icon and not changing the size of anything. I would like to change the size of the icons and the text next to them

    November 10, 2020 at 1:36 pm #240477

    joemnm
    Participant

    I have also tried changing the size of the font in the typography section > Navigation font, and it changes the style but not the size

    November 11, 2020 at 6:34 am #240608

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    Please replace the previous Custom CSS for the cart and my account with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.

    For My account icon:

    .my-account-with-icon .wd-tools-icon::before {
	font-size: 20px;
	color: red;
}

    For Cart icon and text:

    .woodmart-shopping-cart .woodmart-cart-icon:before,  {
	font-size: 20px;
	color: red;
}

    For the text with the cart icon:

    .woodmart-shopping-cart .woodmart-cart-totals .woocommerce-Price-amount, woocommerce-Price-currencySymbol {
	color: red;
	font-size: 20px;
}

    Best Regards.

    November 11, 2020 at 4:21 pm #240828

    joemnm
    Participant

    Hello,

    This changes the color of the account icon and the dollar amount, but leaves the other two elements the standard color. It also does not change the size of the icons. Please see attached for images with and without this code.

    Attachments:
    You must be logged in to view attached files.
    November 12, 2020 at 6:36 am #240927

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshots you attached.

    I have tested the CSS and it works fine for me. Please provide the admin panel login details of the website to check it myself and help you out accordingly.

    Regard’s.
    Xtemos Studios.

    November 12, 2020 at 7:13 pm #241135

    joemnm
    Participant

    I see the problem, your code works in the “Main Header” bar, but I have these two elements in the top bar of the header. I notice with no custom code that these icons and text are bigger in the main bar than they are in the top header. They are tiny in the top header. I am using them in the top though and I need them bigger.

    Is there maybe a way to add another bar to the header, so that there are 4 to work with instead of 3?

    November 13, 2020 at 6:31 am #241212

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry but you cannot add 4 rows to the header. You can only have 3 rows.

    It requires customizations and this is beyond our limitations and support policy.

    And for the CSS not working Please provide the admin panel login details of the website to let me assist you further.

    Regard’s.
    Xtemos Studios.

    November 13, 2020 at 1:00 pm #241307

    joemnm
    Participant

    See admin login attached

    November 13, 2020 at 1:10 pm #241309

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .whb-top-bar .wd-tools-element .wd-tools-icon:before {
	font-size: 25px;
}
    .whb-top-bar .wd-tools-element .wd-tools-text {
	font-size: 14px;
}
    .whb-top-bar .wd-tools-element .wd-tools-icon:before {
	font-size: 26px;
}

    Then deactivate the cache plugin clear browser cache and check back.

    Regard’s.
    Xtemos Studios.

    November 13, 2020 at 1:16 pm #241311

    joemnm
    Participant

    Ok great but what about changing the color of the account icon, cart icon, account text and cart text?

    November 14, 2020 at 7:11 am #241454

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    You can use the same CSS for the color of the icon and the colors accordingly.

    .whb-top-bar .wd-tools-element .wd-tools-icon:before {
	font-size: 25px;
        color: red;
}
    .whb-top-bar .wd-tools-element .wd-tools-text {
	font-size: 14px;
   	 color: red;
}

    Best Regards.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)