Need help with footer and few other minor problems

Likely, yes. To solve your problem we need to know more about it.

If it’s very basic someone here can usually point you in the right direction. If it’s a little bit complex and time is of the essence, you can find WordPress services from a freelancer or a company like airportjule.

How well do you know CSS? The things you want done can be accomplished through CSS. There’s a good tutorial here. Then you want to learn how to use a web debugging tool like Firebug or Chrome Developer Tools. A debugging tool will allow you to see what CSS rules are currently in effect. Finally, if your theme does not have a Custom CSS option, you will want to install a custom CSS plugin like Jetpack or Custom CSS Manager. The plugin will allow you to add your own CSS rules. You shouldn’t be editing any of the theme files directly, or your changes will be lost the next time you update the theme.

For example, if you want to make your footer look like the one in the example site, you can add these two rules:

footer.details {
    background-color: #222f38;
    color: #929ba2;
}

footer.details h5.widgettitle {
    color: white;
}

It looks like your theme may have a Custom CSS option, so hunt around for it.

I’m not sure what you mean by “the addition line of another footer.”

To adjust the spacing at the top & bottom of the footer, modify the first rule by adding a padding property like this:

footer.details {
    background-color: #222f38;
    color: #929ba2;
    padding: 80px 0;
}

The current padding at the top & bottom is 80px. Reduce it to whatever value you’d like.

To modify the amount of space between the widget titles and the widget content, modify the second rule to add a margin-bottom property like this:

footer.details h5.widgettitle {
    color: white;
    margin-bottom: 48px;
}

48px is the current spacing, reduce as needed.

You can also add this rule to control the amount of spacing between the two rows of widgets:

footer.details .widget {
    margin-bottom: 50px;
}

The current value is 50px, reduce it to what looks good for you.

OK, now I understand. You used to have a widget down there with the copyright info. Can you please add that back in? That would be helpful.

Try adding these rules to the end of your custom CSS:

footer.details {
    padding-bottom: 0;
}

footer.details .container {
    width: 100%;
}    

footer.details .container .row:nth-child(1) {
    margin: 0 auto;
    display: table;
}
footer.details .container .row:nth-child(2) {
    background-color: #182128;
}

footer.details .container .row:nth-child(2) .sub {
    margin: 20px 0 20px 55px;
}

@media (max-width:768px) {
   footer.details .container .row:nth-child(2) .sub {
      margin: 20px auto;
      display: table;
   }
}
@media (min-width:768px) {
   footer.details .container .row:nth-child(1) {
      width:750px;
   }
}
@media (min-width:992px){
   footer.details .container .row:nth-child(1) {
      width:970px;
   }
}
@media (min-width:1200px){
   footer.details .container .row:nth-child(1) {
      width:1200px;
   }
}

It looks like you added this comment:

// for sub-header

However, that’s not the way you add a comment in CSS, and it’s causing the following rule (which eliminates the extra space at the bottom) not to work. Change the comment to this format instead and the extra space at the bottom should disappear:

/* for sub-header */

These rules will set the font properties of the sub footer to be identical to the sample site:

footer.details .container .row:nth-child(2) .sub {
    font-size: .75em;
    line-height: 170%;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

footer.details .container .row:nth-child(2) .sub a {
    color: #1b9bbe;
    border-bottom: none;
}

footer.details .container .row:nth-child(2) .sub a:active,
footer.details .container .row:nth-child(2) .sub a:focus,
footer.details .container .row:nth-child(2) .sub a:visited {
    text-decoration: none;
}

footer.details .container .row:nth-child(2) .sub a:hover {
    color: #fff;
}

and option to add the text to the right side as well?

I don’t know how you would add text to the right, except for creating a child theme and mucking around with the code. How did you get the Copyright information at the bottom? It doesn’t look like a widget. Any content to the right is going to be hidden by your live chat widget, anyway.

OK, here’s how you can add some text to the right. First, you need to change this rule to add the display: block as the last property:

footer.details .container .row:nth-child(2) .sub {
    font-size: .75em;
    line-height: 170%;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
}

Then, add this rule to add content to the right:

footer.details .container .row:nth-child(2) .sub:after {
    content: 'Hello, world!';
    display: block;
    float: right;
    margin-right: 45px;
}

The only drawback with this method is that you cannot add HTML tags as part of the content, so you can’t add things like links. Plus, there’s a good chance it’s going to be hidden by your Live Chat widget.

Glad it worked. Unfortunately, it is forum rules to post personal contact information.