• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Home Featured widgets (or header/home image) in Balance child theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Home Featured widgets (or header/home image) in Balance child theme

This topic is: resolved

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 8 years, 3 months ago by Tanya.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 9, 2014 at 10:41 am #127208
    Tanya
    Member

    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.com
    October 9, 2014 at 10:58 am #127211
    emasai
    Participant

    You 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.com

    October 9, 2014 at 3:25 pm #127275
    Tanya
    Member

    Ok, 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 #127278
    emasai
    Participant

    Do 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.com

    October 26, 2014 at 5:12 am #129257
    Tanya
    Member

    Hello, 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 #129259
    Genesis Developer
    Member

    go 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;}

    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    October 26, 2014 at 6:26 am #129261
    Tanya
    Member

    Hi,

    On line 523 I have this:

    .header-image #title,
    
    	

    On line 527:

    display: block;

    October 26, 2014 at 6:47 am #129262
    Brad Dalton
    Participant

    WP Sites

    Is this something like what you want?


    Get Help – Book Consultation.

    October 26, 2014 at 6:48 am #129263
    Genesis Developer
    Member

    ok. Then find this .home-featured-left and replace by my code


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    October 26, 2014 at 6:56 am #129265
    Tanya
    Member

    Not 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 #129266
    Tanya
    Member

    Should 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 #129267
    Genesis Developer
    Member

    yes. 100%


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    October 26, 2014 at 7:41 am #129270
    Tanya
    Member

    It 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 #129271
    Genesis Developer
    Member

    search this #home-featured and remove the background


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    October 26, 2014 at 7:56 am #129272
    Tanya
    Member

    Thank you for your help!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble