Change Font, Color, Spacing & Background of Sidebar Widgets

[lorenhoboy]

1. I tried some of the code proposed but none worked. How do I change the Font, Color, Spacing & Background in Sidebar Widgets? I am using a transparent layout. Here is the problem. The text is difficult to read against the background.
   

2. Optionally, how can I make these widgets dropdowns so the subtext does not show unless the button is clicked?

3. Optionally, how could I add a solid background just behind each button and the text which follows.

4. How can I widen the Sidebar?
   Thank you.

[ruenel]

Hello Loren,

Thanks for writing in!

• To widen the sidebar, please go to X > Theme Options > Layout a Design and set the “Content Width” to at least 65% so that your sidebar will have roughly 35% width.

• And to add some background to the sidebar, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-content-sidebar-active .x-container.main {
    margin: 4em auto;
}

.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
    margin-top: 0;
}

.x-container.main:before {
    top: 0;
}

.x-main.left {
    padding: 30px;
}

aside.x-sidebar.right {
    background-color: white;
    padding: 30px;
}

Hope this helps. Please let us know how it goes.

[lorenhoboy]

While this code provided a white background, I lost the transparent space between the content envelope and the widget sidebar. I also lost the transparent space between the widgets. Changing the padding did not affect the appearance.

I would like a 1cm transparent space between the contents and the sidebar, and a transparent space between the widgets. (question #3)

Also please answer question #2.
Thank you.

[ruenel]

Hello Loren,

Thanks for updating in!

Do you want something instead?

If that is the case, then you can make use of this css code:

.x-sidebar .widget > ul,
.x-sidebar .widget > div {
    padding: 10px;
    background-color: #fff;
}

2.) Optionally, how can I make these widgets dropdowns so the subtext does not show unless the button is clicked?

• There are no widget dropdowns because this is not a dropdown menu. What you have, is a navigation menu and the recent posts widget.

3.) Optionally, how could I add a solid background just behind each button and the text which follows.

• Can you please give us an example of how this would look like?

Thanks.

[lorenhoboy]

That code did what I wanted, so the relevant code looks like this.
/* Change Widget Color Computer & Mobile Devices, weight, etc* (font color does not work)/
.x-main .h-widget, .x-sidebar .h-widget,
.x-main .h-widget a, .x-sidebar .h-widget a {
font-weight: 700;
background-color: #000;
color: #ffffff !important;
border-width: 3px !important;
border-color: #ffffff !important;
border-radius: 10px;
}
/ Change Widget Side Bar white background to partially transparent*/
.x-sidebar .widget > ul,
.x-sidebar .widget > div {
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
Here is what I have at this point.

1. Apparently, the search box must be addressed differently. How would I modify the:
   padding: 10px;
   background-color: #fff;
   border-radius: 10px;
   to make these changes to the search box ?
2. How would I now change the link font-weight and color in the sidebar?

Thank you for your continued help.

[ruenel]

Hello Loren,

1.) Please have your code updated and use this:

.x-sidebar .widget > ul,
.x-sidebar .widget > div,
.x-sidebar .widget .form-search {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.widget .form-search .search-query {
    height: 30px;
}

2.) To change font weight and color of the links in the sidebar, you use this code:

.x-sidebar .widget a {
    font-weight: 700;
    color: red !important;
}

We would love to know if this has worked for you. Thank you.

[lorenhoboy]

How do I change the To change font weight and color of the text in the widget form-search box in the sidebar? My attempts to add it below .widget .form-search .search-query did not succeed.
Thank you.

[ruenel]

Hello Loren,

If you want to change the font weight and color, you use this code:

.widget .form-search .search-query {
    height: 30px;
    background-color: #fff;
    font-weight: bold;
    color: red;
}

This will only apply when you insert a keyword text in the search field. If you mean to change the font weight and color of the input placeholder, then you need to use this:

.widget .form-search .search-query::placeholder,
.widget .form-search:before{
    font-weight: bold;
    color: red;
}

We would love to know if this has worked for you. Thank you.

[lorenhoboy]

No sorry, that did not work.
I want to be able to change the search box word and magnifying glass font color and weight to match the other Widgets."
The user input search text color and weight also do not change. ( can accept this out come if necessary).
Here is the code entered.

/change the keyword text in the search box field , box radius and box background color-lightskyblue (Font weight 700 and color-lime green don’t change)/
.widget .form-search .search-query {
height: 30px;
background-color: #87cefa;
font-weight: 700;
color: #00ff00;
border-radius: 10px
}

/change the font weight and color-orange of the Search box input placeholder (font weight 700 and color-orange do not work)/
.widget .form-search .search-query::placeholder,
.widget .form-search:before {
font-weight: 700;
color: ff6400;
border-radius: 10px;
}
What do you suggest?

[lorenhoboy]

I forgot to attach the screenshot of where we are now. Here it is.

[Prasant]

Hello Loren,

Thanks for updating the thread.

Please update the code with following. In your case please include !important CSS property to give more specificity. To learn more, please take a look at following resource. https://www.geeksforgeeks.org/how-to-apply-important-in-css/

.form-search:before, .widget_product_search form:before{color: #0f171b !important;font-weight: bold !important;}

.widget .form-search .search-query {
    color: #fff !important;
    font-weight: 900 !important;
}

Thanks.

[lorenhoboy]

This part of the Code Worked
/* Changes Magnifying glass color and weight in search box*/
.form-search:before, .widget_product_search form:before{color: #0000ff !important;font-weight: bold !important;}

This part of the code did not change the text “Search” font and color (lime green) .
.widget .form-search .search-query {
color: #00ff00 !important;
font-weight: 900 !important;
}

One of your associates previously suggested the following code which also did not work.
.widget .form-search .search-query::placeholder,
.widget .form-search:before {
font-weight: 700;
color: 00ff00;
}

Any further ideas on how to address this task?

[friech]

Hi Loren,

Please add this to Theme Options > CSS instead.

/*placeholder text color*/
::-webkit-input-placeholder {color: #0000ff !important;} /* Chrome/Opera/Safari */
::-moz-placeholder {color: #0000ff !important;} /* Firefox 19+ */
:-ms-input-placeholder {color: #0000ff !important;} /* IE 10+ */
:-moz-placeholder {color: #0000ff !important;} /* Firefox 18- */

/*actual input text color*/
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	color: magenta !important;
}

If that did not work still, please change the role to admin of the credentials you provided above so we can take a closer look.

Thanks,

[lorenhoboy]

Thank you. We are making good progress.
The /placeholder text color/ code above worked.
The /actual input text color/ code did not seem to do anything.

Your WP permission has been changed to admin.
Loren

[friech]

Hi Loren,

It actually works, can you clarify what result you’re expecting?

• 

You can change the magenta to your desired color. And clear your browser’s cache if the changes did not take effect on your end.

Thanks,