Category widget acting strange

[alonmg]

Hi,
In my website, the boxes and content in the category widget is acting strange, and boxing part of the content and not all of it. Can you help me figure out why that is?

Also, do you know how I could get rid of the underline for each category, and the box in general for the title?
Any chance I don’t need to code for that? It’s not my strong point.

Thanks!

[Prasant]

Hello @alonmg,

Thanks for asking.

Please add following CSS to adjust spacing of widget border and removing underline:

.category .widget ul {
    padding: 12px 0 10px 10px;
}

.category .x-sidebar .widget ul li a {
    padding-top: 20px;
}

.category .x-sidebar .widget ul li a {
    text-decoration: none;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[alonmg]

Thanks! I tried pasting the code in the page CSS and the global CSS (Appearance -> Customize -> Global CSS) and nothing happened. Know why?

I also tried it for this page:
http://learn.mobileodt.com/

And no dice.

Thanks!

[basanta]

Hi There,

Thanks for writing in!
Please try adding this CSS to your X-> Theme Option -> Global CSS and let us know how this goes.

.category .widget ul {
    padding: 12px 0 10px 10px;
}

.category .x-sidebar .widget ul li a {
    padding-top: 20px;
}

.category .x-sidebar .widget ul li a {
    text-decoration: none;
}
.x-sidebar .h-widget {
border: none !important;
}

Hope this helps!

[alonmg]

Hi,
That was it! However, there is still a weird underline on all the rows, which goes away when one hovers over it. Wasn’t that supposed to dissapear with the

.category .x-sidebar .widget ul li a {
text-decoration: none;

Essentially, I’m looking for no underline, and a different color when one hovers the relevant title. Is that something you could help me with?

Thanks so much!

[christian]

Hey @alonmg,

Try removing .category in that code or add this CSS

.x-sidebar .widget ul li a {
    text-decoration:none
}

For the hover, add this CSS

.x-sidebar .widget ul li a:hover {
    color: red !important
}

Hope that helps.

[alonmg]

Thanks! That helped, but there is still one issue.
The title of each category group is “pushed” too high, and looks as if it is attached to the group above it. It is also of a different and smaller font. Any chance you can help with that? And could we make it bold?

Also, I checked if it applied to another part of the website, where it isn’t a sidebar but just a widget in a row I created in the cornerstone editor, and the new CSS isn’t applying. I tried removing the .sidebar as well as the .category but it didn’t work.

What am I missing?
Thanks so much!

[thai]

@alonmg

The title of each category group is “pushed” too high, and looks as if it is attached to the group above it. It is also of a different and smaller font. Any chance you can help with that? And could we make it bold?

Hi There,

Please find this custom CSS:

.category .widget ul {
    padding: 12px 0 10px 10px;
}
.x-sidebar .h-widget {
border: none !important;
}

And change to this:

.category .widget ul {
    padding: 0 0 10px 10px;
}
.x-sidebar .h-widget {
    border: none !important;
    margin-bottom: 0;
    font-weight: bold;
    margin-top: 15px;
    clear: both;
}

@alonmg

Also, I checked if it applied to another part of the website, where it isn’t a sidebar but just a widget in a row I created in the cornerstone editor, and the new CSS isn’t applying. I tried removing the .sidebar as well as the .category but it didn’t work.

Please provide us with the URL of that page.

Thank you.

[alonmg]

Thanks! That worked great for the page.
The page that is still isn’t applying for is learn.mobileodt.com/knowledge-center

And also, I just noticed that the titles for each widget in the sidebar don’t have a break from the one above it. Is there any way to add a margin between the title and the widget above it?

Thanks so much!

[basanta]

Hi There,

In this page you have added the widget via content builder widget option.
Please add this css to work for this page.

.x-widget-area .widget ul {
    padding: 0 0 10px 10px;
}
.x-widget-area .h-widget {
    border: none !important;
    margin-bottom: 0;
    font-weight: bold;
    margin-top: 15px;
    clear: both;
}
.h-widget {
margin-top: 20px;
}

Hope this helps!

[alonmg]

Thanks! I’ve tried adding the CSS you provided to the page, but still there is underlines for every line. Attached a screen-shot. This is the CSS I applied (tried also adding some more but no luck):

.x-widget-area .widget ul {
padding: 0 0 10px 10px;
}
.x-widget-area .h-widget {
border: none !important;
margin-bottom: 0;
font-weight: bold;
margin-top: 15px;
clear: both;
}

.x-widget-area ul li a{
text-decoration: none;
}

.h-widget {
margin-top: 20px;
}

.widget ul li a:hover {
color: #262062 !important
}

Thanks!

[rad]

Hi @alonmg,

CSS is being overridden by CSS coming from stack stylesheet. Please change this

.x-widget-area ul li a{
text-decoration: none;
}

to force it

.x-widget-area ul li a{
text-decoration: none !important;
}

Thanks!