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 10 years, 4 months ago by
Tanya.
-
AuthorPosts
-
October 9, 2014 at 10:41 am #127208
Tanya
MemberHello!
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 #127211emasai
ParticipantYou 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 #127275Tanya
MemberOk, 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 #127278emasai
ParticipantDo 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 #129257Tanya
MemberHello, 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 Developer
Membergo 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 #129261Tanya
MemberHi,
On line 523 I have this:
.header-image #title,
On line 527:
display: block;
October 26, 2014 at 6:47 am #129262Brad Dalton
ParticipantOctober 26, 2014 at 6:48 am #129263Genesis Developer
Memberok. Then find this .home-featured-left and replace by my code
October 26, 2014 at 6:56 am #129265Tanya
MemberNot 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 #129266Tanya
MemberShould 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 Developer
MemberOctober 26, 2014 at 7:41 am #129270Tanya
MemberIt 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 Developer
Membersearch this #home-featured and remove the background
October 26, 2014 at 7:56 am #129272Tanya
MemberThank you for your help!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.