Docs

[nneuman]

Hi,

I’d like to customize my sidebar widgets to look like the attached pictures, but I’m pretty bad with CSS and have no idea how to even start. Currently my sidebar seems like one big clump of widgets, whereas I like how this one has very clear separating lines between each section, and some sections are completely boxed off, either by lines or color block. Is there anyone who can suggest some CSS code that will get me close to this look, as well as tell me where I need to load it in to specifically edit the sidebar?

Thanks very much!

[nneuman]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and for providing a very detailed post. To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-sidebar .widget:after {
    content: "";
    display: block;
    margin-bottom: 20px;
    margin-top: 65px;
    padding-top: 2px;
    width: 100%;
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
}

.jetpack-image-container {
    text-align: center;
    padding: 10px;
    background-color: #e5e5e5;
}

http://prntscr.com/dswrou

Hope this helps.

[nneuman]

Great, thank you! I have a couple of follow up questions.

– How do I center the widgets – right now they are aligned left

– How do I adjust type (size, font) within the widgets?

– How do I insert an enclosed box (not color blocked; see image 4)

– Currently, the dividers are set to follow each widget; how do I modify which widget I would like the divider to follow?

– Is there a master list of shortcodes for all the things that can be adjusted in the X theme

Thank you again for any help!

[Rue Nel]

Hello There,

Thanks for updating in!

1] To center the contents of your widget, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-sidebar .widget {
    text-align: center;
}

Please keep in mind that you cannot center the image because it is aligned to the left when the image were created.

2] If you want to adjust the font size, etc, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

/* for the widget titles */
.x-sidebar .widget .h-widget {
  font-size: 150%;
  font-weight: bold;
}

/* for the widget contents */
.x-sidebar .widget,
.x-sidebar .widget input {
  font-size: 90%;
  font-weight: normal;
}

3] If want to enclosed the widget area with a box, you must determine which widget is it. It is either, the widget image, jetpack subscription widget, recent entries or the search widget. You may use the following codes:

.x-sidebar .widget_image {
  padding: 10px;
  border: solid 1px transparent;
  border-color: red;
}

.x-sidebar .jetpack_subscription_widget {
  padding: 10px;
  border: solid 1px transparent;
  border-color: green;
}

.x-sidebar .widget_recent_entries {
  padding: 10px;
  border: solid 1px transparent;
  border-color: blue;
}

.x-sidebar .widget_search {
  padding: 10px;
  border: solid 1px transparent;
  border-color: yellow;
}

You can even add a background-color: #e5e5e5; if you want to. Feel free to change the color or remove any of the code that doesn’t need to have a border.

4] If you do not want to have a separator or divider in the widget, simply add this code:

.x-sidebar .widget_search:after {
  display: none;
}

You can use this selectors to target which of the widget: .widget_image, .jetpack_subscription_widget, .widget_recent_entries or .widget_search

You can find all the list of shortcodes from here: http://demo.theme.co/integrity-1/shortcodes/

Hope this helps.

[Author]

Posts