WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] Home page - how to customize margins and footer (5 posts)

  1. ofedyk
    Member
    Posted 8 months ago #

    This forum is amazing! Even though you still can spend hours and hours reading and watching youtube videos, it gives a lot of helpful tips and suggestions on how to make your website look the way you want. Need help with the following:
    1. How do you decrease the "padding" or margins at the top and bottom middle section of my home page?
    2. Need help on making my footer on one line only. Link to pages on left and the copyright text to the left. Where do I change color to be all black?
    3. Why do I need to create a child page IF I can add any code change to style in Appearance->Theme Options->CSS styles?? I did that on a few things I wanted to change, and it worked.

    http://site.fedykbuilders.com/

    Thank you so much!

  2. Noone Here
    Member
    Posted 8 months ago #

    Hello!

    First, the answer to your 3rd question: every change you make to a theme, it is most likely that you will lose it when you update the theme or WordPress, because WordPress has no way to recognize your modifications.

    1.) To decrease the space between the menu bar and the middle 'Welcome to our website' part, you need to use this CSS rule:

    .front-page #wrapper {
      margin: 20px auto;
    }

    Change the 20px value to your needs, but notice that the bottom margin (between the welcome box and the 3 boxes) wont change with this. To change that, you should create this rule:

    #featured {
      margin-bottom: 5px;
    }

    and adjust the 5px value.

    2.) The cause that your footer is in two lines is that there is a div for social icons. So in order to make that work, you have to edit footer.php. Now, the proper way for this is to create the child theme, copy the footer.php file from the parent folder to the child theme's folder, and edit there. Open the file and find this:

    </div>
    	<!-- end of col-540 -->
    
    	<div class="grid col-380 fit">
    		<?php
    
    		// First let's check if any of this was set
    
    		echo '<ul class="social-icons">';

    After the end of col-540 line delete the everything until the end of col-380 fit here:

    </div>
    	<!-- end of col-380 fit -->
    
    </div>
    <!-- end of col-940 -->

    So the first line you have to delete is the <div class="grid col-380 fit"> (for me it is on line 58) and the last line you have to delete is <!-- end of col-380 fit -->. That should move up a little bit the copyright part. There may be necessary some CSS tweaking, but I can provide you that if you have deleted the div in the php file, because for some reason the footer menu is not appearing on my test installation, so your site will behave different from mine. Please let me know when you have made these modifications, and I can provide you the rest then.

    I hope this helps.

    Greetings,
    Balint

  3. ofedyk
    Member
    Posted 8 months ago #

    Balint,
    Thanks for replying so quickly! After working on my front page some more, I decided to delete the entire footer as it was. I found a Footer Copyright widget and a Trademarks widget that I really liked so I'm going to stick with those. Another question about margins - need the code please:
    1) Want to reduce the white space a bit below the contact me button and photo.
    2) Want to reduce the blue space between the 3 home widgets and the trademarks.
    3) Want to reduce blue space between the trademarks and the copyright footer?

    I looked in the css styles file and I can't seem to figure out which code it is. Is there a document that explains in detail what code does what exactly where?

    Cheers,
    Oksana

  4. Noone Here
    Member
    Posted 8 months ago #

    Hello!

    Sorry for my late reply. Here you go:

    1)

    #featured {
      padding-bottom: 40px;
    }

    Just adjust the padding-bottom value, which is currently 40px

    3)
    This will affect the spacing both between the logos and footer, and the 3 widgets and the logo, so first apply this, and if you need more adjustment for the 2), than see the 2) part. So the code is:

    .widget-wrapper {
      margin: 0 0 20px;
    }

    Here you should reduce the 20px value.

    2) This is a bit more complicated, but nothing dangerous. You can reduce the space to a certain point with this:

    .front-page #wrapper {
      margin: 20px auto 0;
    }

    Here the 0 value is reducing the space, you should not change this. If you need to reduce the space more than this, then use this rule also (so use both rules):

    #home_widget_1, #home_widget_2, #home_widget_3 {
      margin-bottom: 20px;
    }

    And here you can reduce the 20px value.

    I hope this helps, if you need any more help, I am here :-)

    Greetings,
    Balint

  5. Jitendra Mishra
    Cyberchimps Support Rep
    Posted 7 months ago #

    Sorry, we do not monitor these forums, please use the official forum:

    http://cyberchimps.com/forum/free/responsive/

    Thanks

Reply

You must log in to post.

About this Theme

About this Topic