[Resolved] Style for custom widget

[Jeroen]

Hi there,

I wanted to customize my website with an extra section for recent posts or an email form but the available widget areas were limited. So I’ve used a hook (in elements) to paste a widget shortcode in the right place (I’ve used the plugin “wordpress widgets” for this).
The problem is, this new widget doesn’t show up in appearance > customize. I guess I could apply some css classes and some code in the hook element to tweak fonts, sizes, background, width… but I’m not a programmer so the best I could do would be creatively cutting and pasting code which could easily lead to problems. Is there a way to include the new widget in the customizer? Or another easy way around this?

Thank you very much for your ideas,
Jeroen

[David]

Hi there,

unfortunately each widget or plugin shortcode would require its own specific code to ‘style it’ – so no simple way to add customizer controls for them.

What elements are you having difficulty with ?

[Jeroen]

Thank you David.

I’m trying to set the width for the widget content to max. 1200px and change the background color.

[Leo]

Try something like this:

#wpsp_widget-5 {
    max-width: 1200px;
    margin: auto;
    background-color: #000000;
}

[Jeroen]

Thanks! I’ve added this to style.css as I assume that is where it needs to go, but I can’t seem to find the right code to “call” for this.
I’ve tried things like

or class=”wpsp_widget-5″ before the widget shortcode, but it seems I can’t get it right. I think I need to do some css training 🙂 but if you can help me out with this one it’ll be very appreciated!

[David]

Lets make this a little easier. For WP Show Posts you don’t need the Widget shortcode. So you can remove that.

Edit your WP Show Post list – in the right hand side bar it provides you with a shortcode 🙂

In your Hook do this:

<div class="grid-container">

PUT YOUR SHORTCODE HERE

</div>

the grid-container class is what the theme uses to set the width of the site. So no CSS needed int this case

[Jeroen]

Hi David, Thanks, this works great.
I’ve finally used a mailchimp shortcode.
One last thing, I’m still wrestling with the background color. I’ve defined a css style (.customwidget) because I plan to put some more things in there, but it’s not working. This is the mailchimp form code:

div class=”customwidget” (I deleted the rest because it’s not displaying)

and then I’ve put the following in style.css (is this the correct file? there is also a style.min.css among others):

.customwidget {
background-color: #000000;
}

[David]

If you want a full width background color then you would do this:

<div class="custom-container">
    <div class="grid-container">
        
    PUT YOUR SHORTCODE HERE

    </div>
</div>

Then you can style your custom container with this CSS:

.custom-container {
    padding: 40px;
    background-color: #ccc;
}

CSS you can add to the Customizer > Additional CSS.
DO NOT add any to the Parent Themes styles.css as it will get overwritten when the theme updates.

[Jeroen]

Good morning David!
Thank you very much, works like a charm.
This is great, now I know how to customize any element on the website with custom css!

[David]

Glad to be of help

[Author]

Posts