[Michaela]

Hi,
I would like to include advertisements in my right sidebar.
1. How do I do include Google Ads?
2. How do I change the size of the right sidebar, so that it adjusts to the size of the ad, which should be 160px wide (therefore the main content on the left would get more space)
3. What should I do if on some pages I don’t want a Google Ad in the right sidebar, but a different ad from an affiliate partner?
Thanks!

[Sakin]

Hi Michaela,

Looks like you need to upgrade to Pro version.

1. Then you can use “2. Catch Kathmandu: Advertisement” widget and add your Google Ads code in Header Right Sidebar.

2. For this you can add the following css in “Appearance => Theme Options => Custom CSS” box.

#primary { width: 900px; }
#secondary { width: 240px; }
@media screen and (max-width: 1344px) {
	#primary { width: 840px; }
}
@media screen and (max-width: 1280px) {
	#primary { width: 770px; }		
	#secondary { width: 220px; }	
}
@media screen and (max-width: 1152px) {
	#primary { width: 690px; }		
	#secondary { width: 200px; }
}	
@media screen and (max-width: 1024px) {
	#primary { width: 630px; }		
	#secondary { width: 200px; }	
}
@media screen and (max-width: 960px) {	
	#primary, #secondary { width: 100%; }
}

3. You have option to use Page Sidebar and further choose Optional sidebar one, Optional sidebar two and optional sidebar three. So, depending on the pages, you can choose the sidebar to display. You can add different ads widgets in different sidebar. If you want for options, then you can activate “Jetpack” plugin “Widget Visibility” module and then add widget with visibility condition.

Regards,
Sakin

[Michaela]

Hi Sakin,

great, thanks a lot for the info.

Just to verify answer 2): you really don’t want to define the width of the “#secondary” in a screen width of 1344px, as it’s not listed in the CSS code you gave?:

@media screen and (max-width: 1344px) {
#primary { width: 840px; }
}

Where can I choose the optional sidebars you mentioned in 3)?

Thanks,
Michaela

[Sakin]

Hi Michaela,

Yes because the above #secondary { width: 240px; } will work for you. As in when you define width 240px, you will get 160px of width in your sidebar. If you want then you can add that’s not a problem. But it’s just repeating and it will be as below:

#primary { width: 900px; }
#secondary { width: 240px; }
@media screen and (max-width: 1344px) {
	#primary { width: 840px; }
	#secondary { width: 240px; }
}
@media screen and (max-width: 1280px) {
	#primary { width: 770px; }		
	#secondary { width: 220px; }	
}
@media screen and (max-width: 1152px) {
	#primary { width: 690px; }		
	#secondary { width: 200px; }
}	
@media screen and (max-width: 1024px) {
	#primary { width: 630px; }		
	#secondary { width: 200px; }	
}
@media screen and (max-width: 960px) {	
	#primary, #secondary { width: 100%; }
}

Sorry, this optional sidebar option is there only in Pro version. See more additional features in Pro version at http://catchthemes.com/theme-instructions/catch-kathmandu-pro/

[Michaela]

Hi Sakin,

the long code you gave me above for making the right sidebar smaller worked fine for 2 months, until a few days ago. Do you know what could have happened? I did not make any changes, but now the right sidebar on my website (e.g. http://travelintense.com/equipment/camping-gear/stove/) is way too wide. It should just be wide enough to accomodate adds that are 160px wide.

Thanks a lot for your help!

P.S.: Please delete any of my weblinks to my site after you read it.

[Sakin]

@Michaela: I don’t see any issue in your site. You site still have 240px width sidebar. This width is needed as sidebar have padding of 40px left and right. So, the width left for ads in 160px.

[Michaela]

Hi Sakin,

this is weird. I work on a netbook with a screen width of 1024px. And my sidebar is definitely wider than 204px. When I use the Firefox plugin “Pixelzoomer” to measure the size of the sidebar, it gives me a value of 340px (=20px padding left, 300px content, 20px padding right). This is way too big for me, as the rest width for my real content on the left is only 480px (550px – 30px padding left – 40px padding right).

I would like to have the following set up:
– padding for each of the sidebar elements: 10px all around
– margin between sidebar elements: 20px
– sidebar element content width: 160px (no matter which computer screen size)
– main content on the left side should always be as wide as possible (total screen size -160px -twice 10px

How can I do this?

Thanks a lot for your help and best regards,
Michaela

[Sakin]

Hi Michaela,

It was not working as you were adding css in your child theme style.css and not in Custom CSS box.

If you are using it in child theme style.css then you need to have priority. So, I have added #main before. See this

#main #primary { width: 900px; }
#main #secondary { width: 240px; }
@media screen and (max-width: 1344px) {
	#main #primary { width: 840px; }
	#main #secondary { width: 240px; }
}
@media screen and (max-width: 1280px) {
	#main #primary { width: 770px; }		
	#main #secondary { width: 220px; }	
}
@media screen and (max-width: 1152px) {
	#main #primary { width: 690px; }		
	#main #secondary { width: 200px; }
}	
@media screen and (max-width: 1024px) {
	#main #primary { width: 630px; }		
	#main #secondary { width: 200px; }	
}
@media screen and (max-width: 960px) {	
	#main #primary, #main #secondary { width: 100%; }
}

Regards,
Sakin

[Michaela]

Beautiful. That works. Thank you so much.
So just for my better understanding: when do I need to add this #main thing? Because all my other stuff works when I had put it from the Custom CSS to the child stylesheet? (I did so as it reduces loading time)

[Sakin]

@Michaela: You need to add main to overwrite the css from responsive.css file.

[Author]

Posts