Community Forums › Forums › Archived Forums › Design Tips and Tricks › Home Featured widgets (or header/home image) in Balance child theme
Tagged: Balance Child theme, balance theme, balance theme header, balance theme home image, Home Featured, home featured widgets
- This topic has 14 replies, 4 voices, and was last updated 9 years, 6 months ago by Tanya.
-
AuthorPosts
-
October 9, 2014 at 10:41 am #127208TanyaMember
Hello!
I'm using Balance child theme.
My question is about the Home Featured Left and Home Featured Right widgets. Here http://tanyavega.com/ I have a picture in Home Featured Left widget and subsription form in Home Featured Right widget.
Is it somehow possible to make that picture (which is now only in half size, in Home Featured Left widget) in full size - so that it would fill both widgest (whole Home Featured block)?Or maybe I shouldn't use these two widgets at all. - How can I make this picture to be in full size in this case? Like here (made in Photoshop): http://tanyavega.com/wp-content/uploads/2014/10/How.jpg
Thank you in advance!
http://tanyavega.comOctober 9, 2014 at 10:58 am #127211emasaiParticipantYou would have to use only one widget, home-widget-left and make it full width 960px, and then remove the home-widget-right.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 9, 2014 at 3:25 pm #127275TanyaMemberOk, see now http://tanyavega.com/ - Here I use only one widget (home-widget-left) and it naturally fills only it's area (so it's onle one half of whole this block). I need it to kinda fill both widget areas (so the whole block like I showed here http://tanyavega.com/wp-content/uploads/2014/10/How.jpg).
What did you mean saying "make it full width 960px" ? How can I make it full width? - That's what I actually want (to be it in full width).
Now the picture itself is 1200 px. I can change it to 960px but it wont change the situation (it still will fill only half of the area I need).October 9, 2014 at 3:48 pm #127278emasaiParticipantDo you know how to change things in style.css? That is where you change the width of the left widget.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 26, 2014 at 5:12 am #129257TanyaMemberHello, emasai!
I should remove the hole this code:
.home-featured-right { background: url(images/dashes-bg.png) #d05353; border: 5px solid #fff; float: right; font-size: 16px; margin: -50px 0; width: 430px; } .home-featured-right, .home-featured-right p, .home-featured-right h4.widgettitle { color: #fff; text-shadow: #a64242 -1px -1px; text-align: center; } .home-featured-right p { font-size: 16px; margin-bottom: 20px; } .home-featured-right .widget { margin: 35px; } .home-featured-right h4.widgettitle { font-size: 26px; margin-bottom: 20px; } .home-featured-right input[type=text] { -moz-box-shadow: inset 0 1px 2px 1px #eee; -webkit-box-shadow: inset 0 1px 2px 1px #eee; background: #fff url(images/email-icon.png) no-repeat 16px 15px; border-bottom: none; border-left: 1px solid #963c3c; border-right: none; border-top: 1px solid #963c3c; box-shadow: inset 0 1px 1px 1px #eee; color: #bbb; font-family: Verdana, Arial, Tahoma, sans-serif; font-size: 9px; padding: 14px 15px 14px 45px; text-transform: uppercase; width: 180px; } #home-featured .home-featured-right input[type=submit] { background: url(images/email-button.png) no-repeat !important; border: none; font-size: 0; height: 28px; margin: 0 0 0 15px; line-height: 0; text-indent: -9999px; width: 26px; }
Am I right?
And then I should change the home-featured-left width to 960px instead of 480, right?October 26, 2014 at 6:09 am #129259Genesis DeveloperMembergo to line 523 of your style.css and replace the code by this
#home-featured .wrap { padding: 0; }
Line No 527 and replace the code by this
.home-featured-left { float: left; width: 960px; } .home-featured-left img.centered, .home-featured-left .aligncenter{ margin: 0 auto;} .home-featured-right{display: none;}
October 26, 2014 at 6:26 am #129261TanyaMemberHi,
On line 523 I have this:
.header-image #title,
On line 527:
display: block;
October 26, 2014 at 6:47 am #129262Brad DaltonParticipantOctober 26, 2014 at 6:48 am #129263Genesis DeveloperMemberok. Then find this .home-featured-left and replace by my code
October 26, 2014 at 6:56 am #129265TanyaMemberNot exactly. I want it to be like here: http://tanyavega.com/wp-content/uploads/2014/10/How.jpg
October 26, 2014 at 7:01 am #129266TanyaMemberShould I replace only this part
.home-featured-left { float: left; width: 480px; }
with your code
.home-featured-left { float: left; width: 960px; } .home-featured-left img.centered, .home-featured-left .aligncenter{ margin: 0 auto;} .home-featured-right{display: none;}
??
October 26, 2014 at 7:02 am #129267Genesis DeveloperMemberOctober 26, 2014 at 7:41 am #129270TanyaMemberIt worked perfectly! Thank you so much!
Maybe it would be better also to remove this light grey background behind this pic. Could you advise how to do that?
Thanks again!October 26, 2014 at 7:47 am #129271Genesis DeveloperMembersearch this #home-featured and remove the background
October 26, 2014 at 7:56 am #129272TanyaMemberThank you for your help!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.