[Resolved] Widget customizing

[Marco Aliberti]

Hi,

i want to shim with color and round the header corners from the headline included in the sidebar widgets, like the sitebar widgets on this site http://www.tus-sandhorst.de/wordpress/tt/training-2/.

Is it possible to do that with the GP Standard Sidebar Widgets without Tools like CSS Hero etc.

Many Thanks in advance …

Marco

[Tom]

First you’ll need to remove the padding and color from your widgets:

.sidebar .widget {
    padding: 0;
    background-color: transparent;
}

Then re-set it to the contents of the widget:

.sidebar .widget > * {
    padding: 40px;
    background-color: #FFFFFF;
}

Then style the title:

.sidebar .widget h4.widget-title {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 0;
    background: #222222;
    color: #FFFFFF;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Joanne Smith]

thanks again – you always come up with a solution

I have adjusted your CSS colours and layout to suit the other theme ( best fit )!!

There may be a demand in the future with flat web design to have a widget title independent coloured background LOL — you know how design trends change all the time — there is talk about taking the good bits from flat web design and taking the good bits from full graphic rentered web design and coming up with a NEW design layout in the future. I know the principal behind flat web design is for smart devices ( not Pcs ) so you are NOT distracted by too much CSS styling.

.sidebar .widget {
padding: 0;
background-color: transparent;
color: #FFF;
}
.sidebar .widget > * {
padding: 20px;
background-color: #ebeeef;
border: 1px solid #cecece;
}
.sidebar .widget h4.widget-title {
padding-top: 5px;
padding-bottom: 5px;
color: #d7e4ea;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #5a8ea6;
margin-bottom: 0px;
}

[Joanne Smith]

hey

is there any reason when the rest of the site looks fine with a widget bar the home page does not when I re-instated the widget bar

https://shop.glassvinylgraphics.com.au/

on my PC the widget bar drops under the content

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/Glass-Vinyl-Graphics-Custom-Decal-Shop-–-Custom-Vinyl-Decals-for-sale-Australia-2016-03-15-10-44-14.png

J

[Tom]

This generally means you have an HTML element on the page that isn’t closed.

For example, for every <p> you need a </p>, for every <div> you need a </div>.

When you have an opening element without closing it, it can throw off the layout of the rest of the site.

[Joanne Smith]

Thats weird

I checked TEXT version

clean code

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/Edit-Page-‹-Glass-Vinyl-Graphics-Custom-Decal-Shop-—-WordPress-2016-03-15-15-20-26.png

[Joanne Smith]

OK Fixed = I changed the Theme of the slider in the dashboard and it works now — must have been something built into the slider code I cold not see!

[Tom]

Glad you got it sorted 🙂

[Author]

Posts