[Resolved] Style for custom widget

Home Forums Support Style for custom widget

This topic contains 9 replies, has 3 voices, and was last updated by  David 1 week, 6 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1278680

    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

    #1278957

    David Customer Support

    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 ?

    #1279741

    Jeroen

    Thank you David.

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

    #1280011

    Leo Customer Support

    Try something like this:

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

    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!
    #1283854

    David Customer Support

    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

    #1284100

    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;
    }

    #1284120

    David Customer Support

    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.

    #1285219

    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!

    #1285326

    David Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.