- This topic has 13 replies, 3 voices, and was last updated 12 years, 11 months ago by
.
-
Posts
-
I was wondering how I would create a background color in a widget? My goal is to have two solid rectangles in the widget:
The upper rectangle would be .5" tall by 1.5" wide. It would be blue background with white text.
The lower rectangle would be 3" tall by 1.5" tall. It would be a beige background with black text.
Thank you for any suggestions!
http://www.assumptionchurch.org. Outreach theme. Thanks,
Owen
which widget are you talking about?
dividing a widget into two areas without adding divs inside of the widget is impossible.
the other thing to keep in mind is that in the web world, you shouldn't think in inches, but pixels.
Thank you on the pixels
It is a widget named "Text" and the description is "Arbitrary text or HTML." I wouldn't be opposed to implementing divs if that is what you recommend.
so you'd like the title and the contents to be different colored backgrounds?
Title and contents, or doing HTML/CSS code for both in the contents. Similar to what is below.
http://s55.photobucket.com/user/ocsheridan/media/Text_zps4446f59e.jpg.html
Hi,
If you have access to change the code in the widgets, you might be better off replacing the tag with <h2> or <h3> , then making sure your text is wrapped in a <p> or tag respectively (currently your second widget does not have the text inside of a <p> tag).
It looks like your using a widget plugin. If you change the css there, you will risk being overwritten if you update. I would add this to your child theme style.css file (assuming the changes above):
#home-sections .widget-area .ftw-spacing {
padding: 0 0 25px;
}#home-sections .ftw-spacing h2 {
padding; 15px;
background: blue; ( or your hex color such as #003399 )
color: white; ( or font hex color #FFFFFF )
}#home-sections .ftw-spacing p,
#home-sections .ftw-spacing a {
display: block;
overflow: hidden;
padding: 15px;
}#home-sections .ftw-body-sand-paper-2 {
background: transparent;
}#home-sections .ftw-spacing {
background: tan; ( whatever color you want the background to be )
}
/***** note - the widget places the yellow background color inline with a !important, so unless you have access to the code or the widget lets you control the background color, you'll need to place the .ftw-spacing color over that to hide the yellow *****/and if you want to get rid of the thumbtack:
#home-sections .ftw-graphics-pin-black {
display: none;
}because you're overwriting existing styles, you might have some issues. If the code doesn't work as is, try adding !important as needed ( for example background: tan !important; )
Also, if you don't have access to change the strong tag and add p tags, there are other ways to do it, just let me know and I'll explain.
Hope it helps!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
Tony,
Those widgets are a FancyText widget i purchased to get things looking ok in the interim. I was wondering how the standard "text" widget would work that comes with the Outreach / Studiopress theme. I added a text widget in the fourth box (Home # 4) to illustrate it just comes up as text on the background. Thanks for your help,
Owen
Hi Owen,
In that case you can just style the standard widgets, similar to above but using:
#home-sections h4 {
background: #003399;
color: #FFFFFF;
padding: 15px;
margin: 0;
}#home-sections .textwidget {
background: #CCC;
display: block;
overflow: hidden;
padding: 15px;
margin-bottom: 15px;
}Of course, change your colors, etc to your liking, but that should do what you need.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
Tony,
Could I pick your brain on tweaking this for Sub Footer Left and Right, and the four Footers? I added a sub footer left and footer 1, which don't have the solid color backgrounds....Thanks again for your help,
Owen
Hey Owen,
Sorry it took so long to get back to you...I was on a mini-vacation 🙂
I see the footer widget, but not the sub footers. It would be the same as above though...you'd remove the padding from the widget and instead place it on the h4 and following div.
On #footer-widgets .widget (around line 1483), set padding to 0.
Then for #footer-widgets h4 and #footer-widgets .widget .textwidget, set the padding you need.
That will take care of it...let me know if you have anymore questions.
Take care,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.