Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I would like to add borders to my sidebar widgets (inspired by this theme http://flooringwarehouseoutlet.com/)
I've looked in the Lightroom setup but can't find any option, I came across this post on the WP forums https://wordpress.org/support/topic/put … nd-widgets but I can't find the term .widget-container in the styles.css file. I tried adding
.widget-container {
margin: 0 0 18px 0;
border: 1px solid #999;
}
into the css but it didn't seem to do anything (but I may not of added it to the correct place in the css file - I added it after the lines "/* WordPress Sidebar
=================================================== */").
If these line should work could someone tell me where to add them or give any other suggestions of how to create borders.
The site I'm working on is http://ipgphotography.uk/wordpress/
Thanks,
Paul
Offline
one solution:
here's a WordPress plugin that will add classes to widgets: https://wordpress.org/plugins/widget-css-classes/
then just use custom css via phplugins to add the needed classes.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hmm,
thanks Rod, it looks a bit more complicated than I was expecting but I'll have a look at it and give it a go
Offline
Not too complicated. give your widget a class name (no spaces), and in your custom css file create a rule for the class.
Say you want to have a green border 3px wide with rounded corners. Call the class "green-borders" or something like that.
In your css file you'd just need to create the class with the necessary rules:
.green-borders {
border: 3px solid green;
border-radius: 10px;
}either way, you'll need custom css. The code you quoted above would best go in a custom css file. Or at the end of the style.css file.
But if you do that, create a child theme first and put that in the child theme's style.css. Otherwise, the next time you export and upload your theme you'll overwrite it.
The best and least complicated way is probably using custom css via phplugins.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
As Rod suggests, you will need to use custom CSS to implement your rules. But I don't think you should need any custom classes, at least not if you want to treat all widgets the same. Just use the .widget class, which already has box-sizing:border-box set, which helps to ensure that applying borders and padding won't break the layout.
@media only screen and (min-width: 1140px) {
.widget {
border: 3px solid #000;
padding: 12px;
}
}I wrap this in a media query so that the changes won't be applied to mobile. You can adjust the 1140px value, but I wouldn't go less than 1025px.
Offline
Ok, I got there in the end, I couldn't get the custom.css file to work at all, after reading this post http://community.theturninggate.net/top … t-working/ I'm guessing I didn't have the paths set correctly.
Anyway I added the code Matthew quoted (changed to suit my color theme) to the style.css and it works ok. I know I will have to edit this file if I upload the theme again but that won't be a problem
Offline
Pages: 1