Community Forums › Forums › Archived Forums › Design Tips and Tricks › Background for Widget
- This topic has 13 replies, 3 voices, and was last updated 10 years, 8 months ago by ACBellevue.
-
AuthorPosts
-
June 24, 2013 at 4:19 am #47434ACBellevueMember
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!
June 24, 2013 at 7:09 pm #47593OzzyMemberJune 24, 2013 at 8:19 pm #47608ACBellevueMemberhttp://www.assumptionchurch.org. Outreach theme. Thanks,
Owen
June 25, 2013 at 10:09 pm #47746OzzyMemberwhich 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.
June 26, 2013 at 7:55 am #47773ACBellevueMemberThank 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.
June 26, 2013 at 10:39 pm #47966OzzyMemberso you'd like the title and the contents to be different colored backgrounds?
June 27, 2013 at 1:41 pm #48086ACBellevueMemberTitle 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
June 27, 2013 at 3:23 pm #48105Tony @ AlphaBlossomMemberHi,
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
June 28, 2013 at 10:45 am #48228ACBellevueMemberTony,
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
July 1, 2013 at 12:18 pm #48716Tony @ AlphaBlossomMemberHi 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
July 4, 2013 at 4:49 am #49145ACBellevueMemberThat is perfect. Thanks Tony!
July 13, 2013 at 6:24 am #50534ACBellevueMemberTony,
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
July 17, 2013 at 11:36 am #51174Tony @ AlphaBlossomMemberHey 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
July 19, 2013 at 2:00 pm #51483ACBellevueMemberThanks Tony - that took care of it. Have a great weekend -
Owen
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.