Archived topic
Style for custom widget
9 replies · Started by Jeroen on May 11, 2020
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
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 ?
Thank you David.
I'm trying to set the width for the widget content to max. 1200px and change the background color.
Try something like this:
#wpsp_widget-5 {
max-width: 1200px;
margin: auto;
background-color: #000000;
}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
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
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;
}
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.
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!
Glad to be of help
