Trying to add horizontal opt-in box in welcome widget wide – need help!

Homepage Community Forums Epik Theme Support Trying to add horizontal opt-in box in welcome widget wide – need help!

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #5715
    Abigailjane
    Customer

      Hi,

      As you can see on my homepage http://www.minovalleyfarmsanctuary.org I am trying to add a horizontal opt-in with mailchimp.

      The problems I am running into is I cannot change the background color for this widget, and when I try to change the submit button from input type ‘submit’ to ‘image’ the image I upload is coming out huge rather than the intended size.

      Can you help me with this at all. I have added the code to the welcome wide widget and then added css to the stylesheet to change the appearance, but I can’t seem to edit the background color from there either.

      Is it possible to make a new widget to do all this in which isn’t already style etc.. so I have a blank canvas to work from. If so what’s the best way to go about doing that?

      Thanks
      Abigail

      #5726
      Eric
      Customer

        There are a lo of steps to take to create a widget area….it may be easier to just edit the one you have it in.

        In order to fix the image issue, you would have to add the image in so I can see it in action and know where the issue is.


        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        #5730
        Abigailjane
        Customer

          Hi Eric, I have re-added the image so you can see what is happening. It’s pretty awful so I hope you look at this quickly. The image is actually only saved as 100px x 100px as a .png

          Also I need to know how to change the background color. I checked one of the old threads where you said to change the css code under #welcome for background but like the other commenters sad it didn’t work, because I guess another piece of code is overriding it somehow.

          Thanks for your help!

          #5744
          Eric
          Customer

            Take a look around line 2167 in your css for this –

            input, 
            select, 
            textarea {
                background-color: #FFFFFF;
                border: 1px solid #DDDDDD;
                padding: 0.3125rem 0.625rem;
                width: 100%;
            }

            and remove the width.

            The background can be changed on line 3365 –

            .epik-orange #head-wrap, 
            .epik-orange #welcome, 
            .epik-orange #home-feature-bg-dark, 
            .epik-orange .author-box, 
            .epik-orange .footer-widgets {
                background: none repeat scroll 0 0 #C37A1C;
                color: #F0F0F0;
            }

            But you’ll need to separate the #welcome part of the code and change the color so the other parts aren’t affected.


            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            #5753
            Abigailjane
            Customer

              Hi, thanks so much for the help. I am finally getting there!! The edits to the image worked a treat. How do I separate that code to make a unique change to only the welcome wide widget? I googled around a bit but couldn’t quite figure out how to do it?

              Also while you’re here, how do I edit the height of the widget? I want the optin bar to be pretty slim so want to get rid of any extra room above and below?

              Thanks!!

              #5756
              Eric
              Customer

                Here’s what I mean by separate –

                .epik-orange #welcome {
                    background: #fff;
                }

                The height you’re looking at is actually from the content inside the widget…and the padding on top and bottom. You can adjust the padding by looking around line 1197 –

                #welcome .wrap {
                    margin: 0 auto;
                    overflow: hidden;
                    padding: 40px 0 0;
                    width: 1152px;
                }

                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                #5762
                Abigailjane
                Customer

                  Hi Eric, ok I added that separation in, but it is changing the color for both the welcome wide widget and the welcome features 1,2,3. Is there any way to just change the color of the welcome wide widget? So I can have this as a horizontal opt in that stands out from the widgets below, because right now it is just blending in?

                  Thanks
                  Abigail

                  #5767
                  Eric
                  Customer

                    Yes take a look at the code in your home.php file and separate the code (using html as it appears in the widgets)…then make the changes to those ID’s or Classes in your css file.


                    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                    #5814
                    Abigailjane
                    Customer

                      Hi Eric, I am a little confused as to how to go about doing this? Sorry to be a pain but could you walk me through it?

                      Thank you!!!
                      Abigail

                      #5915
                      Abigailjane
                      Customer

                        Hi, Is there any chance you could explain this to me? I still have gotten nowhere with it.

                        Thanks!

                        #5921
                        Eric
                        Customer

                          Which part are you struggling with exactly?


                          I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                          #5932
                          Abigailjane
                          Customer

                            Well I’ve managed to make the changes to the color but it has changed both the welcome wide widget and the welcome features 1,2,3. I want to just change the color of the welcome wide widget?

                            The last thing you said was this: “Yes take a look at the code in your home.php file and separate the code (using html as it appears in the widgets)…then make the changes to those ID’s or Classes in your css file”

                            But I have no idea how to do this, or even where to start.

                            Thanks

                            #5948
                            Eric
                            Customer

                              In your home.php file you’ll see this –

                              /**
                               * Display widget content for the "Home Feature" section.
                               *
                               */
                              function epik_home_loop_helper_welcome() {
                              
                              	if ( is_active_sidebar( 'welcome-wide' ) || is_active_sidebar( 'welcome-feature-1' ) || is_active_sidebar( 'welcome-feature-2' ) || is_active_sidebar( 'welcome-feature-3' ) ) {
                              
                              		echo '<div id="welcome"><div class="wrap">';
                              		
                              			genesis_widget_area( 'welcome-wide', array(
                              				'before' => '<div class="welcome-wide">',
                              			) );
                              			
                              		echo '<div id="welcome-features">';
                              			
                              			genesis_widget_area( 'welcome-feature-1', array(
                              				'before' => '<div class="welcome-feature-1">',
                              			) );
                              			
                              			genesis_widget_area( 'welcome-feature-2', array(
                              				'before' => '<div class="welcome-feature-2">',
                              			) );
                              			
                              			genesis_widget_area( 'welcome-feature-3', array(
                              				'before' => '<div class="welcome-feature-3">',
                              			) );				
                              		
                              		echo '</div><!-- end .welcome-features --></div><!-- end .wrap --></div><!-- end #welcome -->';
                              
                              	}
                              		
                              }

                              If you take a look at the html here you’ll see what I’m talking about. Everything is inside the #welcome div, so you would need to separate them by creating 2 separate divs for the #welcome and then a div that holds welcome features 1,2, and 3.


                              I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                              #6073
                              Abigailjane
                              Customer

                                Hi Eric,

                                I can see what you are talking about but I don’t understand how to create 2 separate divs to achieve what I am after, or where to even put them. Ahhh!

                                #6191
                                Abigailjane
                                Customer

                                  Is there anyway you can walk me through how to go about making to seperate divs so I can achieve different colors?

                                  #6198
                                  Eric
                                  Customer

                                    Yes the php code is the actual widget shortcut code, and you can see the “echoed” code is what adds the html divs.

                                    For example, these 2 divs wrap around the entire welcome area –

                                    echo '<div id="welcome"><div class="wrap">';

                                    and it is closed out at the bottom of the code –

                                    echo '</div><!-- end .welcome-features --></div><!-- end .wrap --></div><!-- end #welcome -->';

                                    You can also reference the source code of your homepage to look at how the code shows up from the home.php file above. Whatever you change on the home.php file above will be displayed on your actual homepage of the site. So you can move the divs around to however you would want them to be displayed. You can also add or remove divs by using the “echo” code above as well.


                                    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                                  Viewing 16 posts - 1 through 16 (of 16 total)
                                  • You must be logged in to reply to this topic.