How reduce gaps in template and between sidebar and content?

Hi there,

How do I reduce the margin or padding which has white space in the default template?

My goal is to reduce the white gaps in the screen to maximize are for content via the following:

1. Reduce padding at top to 5px
2. Reduce padding at right to 5px
3. Reduce padding at left to 5px
4. Reduce the gap between the sidebar and the content area. The way it is currently is doesn't allow for my ads to display fully.

Please see the attached screen shot to see the gaps which I marked in red lines.

Thanks,
Mike

 

Hello Mike,

Paste following CSS in Custom CSS to fix your issue.

Code:

.page-template .content_wrapper .content {
margin: 0px -20px;
}

That will resolve your issue.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

This didn't solve the issue. Please note I already have the following css

.page-template .content_wrapper .content {
padding-top: 5px;
padding-right: 0px;
margin: 0px -5px 5px -10px;
}

Also, the gab I'm talking about should be reduced regardless if the sidebar is in the left side or right side of the page. I have modified the sidebar in some pages, please refer to this thread.
http://www.inkthemes.com/community/threads/how-to-move-sidebar-to-left-side.13742/

If you need access to the site, please let me know.

Thanks,
Mike

 

Hello,

Paste following css code in Custom CSS to fix this problem.

Code:

.page-template .content_wrapper .content {
padding-top: 0px !important;
margin: 0 -20px !important;
}

That will resolve your issue.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

Unfortunately, this didn't make any difference. The issue still exists.
The provided css didn't make any difference on the web page.

Thanks,
Mike

 

Hello,

See screenshot, your issue has been fixed.



Thanks & Regards
Yogesh Bhade

 

Yogesh,

You are looking at the wrong page. I had to use full width template that doesn't have sidebar until the gap issue is fixed. This was only a workaround which is not perfect as it introduce me to other issues.

Notice the screen shot I shared at the start of this thread. It has the sidebar in it. The prime example of this is the login or registration page. So, the issue is not fixed.
...

What I did to progress on this issue is I added the following css.

.page-template .content_wrapper .sidebar {
padding-top: 2px;
padding-right: 5px;
margin: 0px -15px -5px 10px;
}

I also have a section for this ( .page-template .content_wrapper .content )

This was good progress, but this didn't solve the issue fully. Since I'm using different templates for my pages in the site, if I change the margin in css to satisfy one template, the other template gets missed up. So, using the same css, I couldn't satisfy both templates. This change affects different templates, not just one.

How can we add a new css section? For example, can we add .content2 and sidebar2 so I can reference them and control the default template without affecting the full width template.

So, I can reference them like this ...

For default template,
.page-template .content_wrapper .content{
css code
}
And
.page-template .content_wrapper .sidebar {
css code
}

For full width template,

.page-template .content_wrapper .content2{
css code
}
And
.page-template .content_wrapper .sidebar2 {
css code
}

For yet another template, use

.page-template .content_wrapper .content3{
css code
}
And
.page-template .content_wrapper .sidebar3 {
css code
}

and so on.

Or perhaps you can suggest a better approach to solving this.

If you need me to provide you with screen shots and links to the different and provide you login info to see pags like the dashboard, let me know and I'd be happy to do that.

Thanks,
Mike

 

Hello,

In which page do you want to reduce gap ?
Please provide us screenshot of those pages with URL.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

Most of the pages that are using full width template will end up using the default template.
In order to have the look you pointed out in the full width page (I. e. the screen shot you included in your update to me), the default and other pages are not shown correctly. Some have too much gap, and some have overlaps between the content frame and the sidebar frame.

1. The login page:
http://www.yemenface.com/wp-login.php?action=login




2. This page:
http://www.yemenface.com/homepagedefaultthemefawaz/




3. The "my dashboard" page
http://www.yemenface.com/dashboard/
You need to create an account and login, then go to My dashboard page to see it.



4. The add new ad page
http://www.yemenface.com/ad-new/



5. Just a page with default template. Please ignore the left side of the screen. Just focus on the gaps at the edges and between the sidebar and content frames.
www.yemenface.com/abo-adnan-fawaz/


Please note any changes made to fix these pages shouldn't corrupt the full width page template. That's why I suggested separate css for the full width page template.

This is the current css code that's affecting this.

.page-template .content_wrapper .content {
padding-top: 2px;
padding-right: 10px;
margin: 0px -28px -5px -10px;
}
.page-template .content_wrapper .sidebar {
padding-top: 2px;
padding-right: 0px;
margin: 0px 5px -5px 0px;
}

I appreciate you're looking into this and thanks in advance.

Thanks,
Mike

 

Hello Mike,

It is customization so we can do that at our end.
In that case our pricing will be $25/hour. And we will minimum charge $50 for customization service.

If the customization is big, we will charge in the multiples of 25 .. For example: If you think it will take 3 hours .. We will charge $75.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

Great. I'm glad you can help.

I sent you an email to [email protected]. Please check it.

Thanks,
Mike

 

Hello,

Your Customization has been done.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

I checked the site, but I don't see the customization reflected.

Perhaps, I should add the custom css to control the customization. If that's the case, please provide the css to be pasted?

Thanks,

Mike

 

Hello Mike,

Please clear your browser cache to see changes, press Ctrl+f5 to clear cache.

It will resolve your issue.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

I cleared the cache. It is not a cache issue.

What is the handle to control the new css for content or sidebar?

Thanks,
Mike

 

Hi Yogesh,

My understanding of what you're doing is you'll provide a way to control the css for sidebar and content frames, so when a change is happening in the default template that change doesn't impact the content and sidebar on another template like the full width page template ... or visa versa. That's why I gave the example of creating css section named sidebar2, sidebar3 etc ...

This way, if I decide to switch the location of sidebar and content, I can control the css to get desired look and feel.

I'm not sure if that's what you did to address the issue or you did it differently.

Also, from your update, it seems that you logged in to the system and made changes. I thought you would tell me the changes are ready, then I can take a backup. Please do that next time, as this site is live and not a test system.

I appreciate your help.

Thanks,
Mike

 

Hello Mike,

1. To make sidebar widget area, firstly you have to register your widget area as shown below in screenshot.



2. Make a file like as sidebar.php with different name as shown below in screenshot.



3. Now call your new sidebar( like sidebar-one.php ) in that page where you want to display new sidebar are as given below.

Code:

<php  get_template_part( 'sidebar-one' ); ?> 

It will resolve your issue.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

What would be the css code to control the css for this new sidebar/widget?

I did the following:

- I registered the sidebar/widget in the cc_functions.php file

// Area 10
register_sidebar(array(
'name' => CUSTOM_SIDEBAR2_WIDGET,
'id' => 'custom-sidebar2-widget-area',
'description' => CUSTOM_SIDEBAR2_WIDGET,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4 class="head">',
'after_title' => '</h4>',
));


- I added the following code to a test template file. Template name is Sidebar2

<div class="sidebar">
<?php
if ( is_active_sidebar( 'custom-sidebar2-widget-area' ) ) :
dynamic_sidebar( 'custom-sidebar2-widget-area' );
endif;
?>
</div>

- The widget area showed up in Appearance --> Widgets as expected.

- I dragged a text widget to put some text and saved.

- I created a new page with some text and chose the Sidebar2 template. And published the page.

- The page showed up with the widget and content as expected.

- The missing part is what is the css code to apply to this newly created widget/side bar?

It should be something similar to this ...

.page-template .content_wrapper .sidebar {
}

I look forward to your update.

Thanks,
Mike

 

Hello Mike,

You used following code.
<div class="sidebar">
<?php
if ( is_active_sidebar( 'custom-sidebar2-widget-area' ) ) :
dynamic_sidebar( 'custom-sidebar2-widget-area' );
endif;
?>
</div>

So the new sidebar area will adopt css of old sidebar, you don't need to add any CSS.
Where do you want to add css ?
Please provide screenshot.

Thanks & Regards
Yogesh Bhade

 

Hi Yogesh,

Please take the time to understand the requirement. Understanding the requirement will save us both a lot of time.

The whole point of making a new sidebar is to be able to control the css for it separately without affecting the css for other sidebars. This part you told me ... is customization. I haven't seen that yet. So, if this new sidebar will adopt the css of old sidebar, what is the point of the customization?

To make it simple, ...

- I need a sidebar. This can be new sidebar or the same old sidebar.
- This sidebar should be controlled by its own css, so it doesn't share or inherit any css of another sidebar.

I already shared screen shots, there are no new screen shots.

Let me explain it further ...

In the default template, there is a sidebar and a content area. The content area is css controlled by the "grid_17 alpha" class and the sidebar is css controlled by the "grid_7 omega" or "sidebar" classes.

<div class="content_wrapper">
<div class="container_24">
<div class="grid_24">
<div class="grid_17 alpha">
<!--Start Cotent-->

<div class="grid_7 omega">
<div class="sidebar">
<!--Start Sidebar-->

I don't want to use this "grid_7 omega" or "sidebar" classes to control other widgets. This is a template ... meaning many pages share this css if used, I can't use it. Because my other pages will be affected.

I need a new css class="CustomSidebar" to be able to control the css for the sidebar. I can make a phone call if needed.

Thanks,
Mike