[Lucia]

I just updated to Catch Evolution Pro from the free version. In the free version, I used a child theme css to make the border around the content and widget boxes invisible, as well as change the sidebar/widget areas width. The child theme doesn’t work in the Pro. Theme Options allows me to make most of the changes that were in the child theme, but there are two things that I would like some help with.

1. I would like to make the sidebar/widget area narrower.
2. would like to remove, or make invisible, the borders around the content and widget areas.

Is there code that will work in the “Appearance => Customize => Theme Options => Custom CSS” area? If so, please share.

[Mahesh]

Hi @Lucia,

Thank you for using Catch Evolution Pro.

“Customize” option is currently available only in free version, please use “Theme Options” instead. This feature will be available in next version update.
Yes, your above changes can be achieved with Custom CSS.

Go to “Appearance=> Theme Options=> Custom CSS” box and add the following CSS:

#primary {
    width: 900px; /* Change as per required */
}

#secondary {
    width: 260px; /* Change as per required */
}

.widget {
    border: none;
}

Please make sure the sum of #primary and #secondary’s width is 1160px.

Regards,
Mahesh

[Lucia]

Thank you, but these codes did not work when I put them in “Theme Options/ Custom CSS”.

I have changed the width of the sidebar in Editor/Catch Evolution Pro: Stylesheet (style.css), but realize that this is just a temporary solution.

Would it be best to have a child theme?

[Mahesh]

Hi Lucia,

Yes you can achieve it with by creating a child theme too, but as it is just a design change it can be achieved with simple Custom CSS too. I’ve checked the with above CSS in Catch Evolution Pro and is working fine.

Please post your site url so I could check it.

Regards,
Mahesh

[Lucia]

Here you go.
http://dogmanart.com

[Mahesh]

Hi @Lucia,

Just went through your site. In the Custom CSS, there is an additional closing braces at the very end, please remove it. Please add the above CSS in it, it will work fine. You can also remove the following line from Custom CSS:

@media screen and (min-width: 961px) {
}

Let me know if this helps.

Regards,
Mahesh

[Lucia]

Below is the code that is in the Custom CSS. I don’t see the code you mention above. However, Everything is working fine now. All I need is the code to remove the white border around the main content.

Custom CSS
#secondary .widget {
background-color: rgba(232, 220, 190, .0);
}
#branding .wrapper { width: 100%; }
#branding #site-logo { padding: 0; }

.hentry {
background-color: rgba(232, 220, 190, .0);
}

.entry-meta { display: none; }
#primary {
width: 900px; /* Change as per required */
}

#secondary {
width: 260px; /* Change as per required */
}
.widget {
border: none;
}

[Mahesh]

Hi @Lucia,

That’s great. I’m glad you’ve fixed the issue.

Regards,
Mahesh

[Lucia]

Just one more question. What is the Custom CSS code to remove the white boarder on the main content of pages and posts?

[Mahesh]

Hi @Lucia,

For removing white border on main content of pages and posts, please add the following CSS in Custom CSS box:

.hentry {
	border: none;
}

Regards,
Mahesh

[Lucia]

Thank you so much for all your help! Everything works perfect now.

Even though I needed some help with the upgrade to Pro, I really like the way you have set up the Theme Options. Very nice!

[Mahesh]

Hi @Lucia,

Thank you for your appreciation.
We’re gradually going to remove the Theme Options and use Customizer instead. But all the features and functionality will be the same. It is faster, simpler and more user friendly, and all customization can be done with live preview. It will be available in next version update. Hope you’ll find it nice too.

Regards,
Mahesh

[Lucia]

Greetings,
I would like to start a new topic, as I have 3 new questions for you.

1. I have just updated this website – http://www.kdc-eugene.org/ – to Catch Evolution Pro. I used the codes you provided previously and all went well except I lost the gradient effect in the menu bar when I changed the colors in Theme Options/Color Options.
Is there some code for creating gradient colors for the menu bar that I can add to the ‘Custom CSS’?

2. I had to disable the ‘Responsive Design’ feature in Theme Options because the website was not loading properly on a mobile devise. This is true for the other site I had asked you about before – http://dogmanart.com – using the same theme. Is there currently a solution for this? Are my settings wrong?

3. When I click on a link from the archive dropdown menu on the sidebar, there is a white box that says “Monthly Archives: and the date.” Is there a way to change the color of the white box and font?

Thank You!

[Mahesh]

Hi @Lucia,

As per your questions, I’ll break down the solutions to its respective numbers.
1. For menu bar gradient effect. Go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS.

#header-menu #access, #colophon #access-footer{
	background: linear-gradient(#86030d, #222) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Note: please change the hex value “#86030d” and “#222” as per desired.

2. With responsive design, what issue are you facing? Please let me know so I could help your further.

3. To change archive dropdown menu’s styles, go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS.

select#archives-dropdown-3 {
    background: #A2A2A2;
    font-family: Times New Roman;
    font-size: 17px;
}

Regards,
Mahesh

[Lucia]

Thanks for the last response.

As for the second question about the responsive design as seen on my iPhone. I reset this site to be responsive – http://dogmanart.com – so you can see it if you look at it on a phone. It is responsive on my computer screen when I change the size of the browser screen, but on my phone, the header and the background color do not go all the way across the screen. Are you seeing this also?

Thanks!

[Mahesh]

Hi @Lucia,

That is because of the responsive design issue. Please add the following CSS and it will fix the issue.

@media screen and (max-width: 1224px) {
	#primary
	{
	   width: 654px;
	}
	#secondary {
	   width: 340px;
	}
}

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

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	#primary {
	    width: 590px;
	}
}

@media screen and (max-width: 960px) {
	#primary, #secondary, .no-sidebar #primary {
	    width: 100%;
	}
}

[Lucia]

Thanks! That worked great!

[Mahesh]

Hi @Lucia,

Thank you for your appreciation.
Have a nice day!

Regards,
Mahesh

[ibrahim]

could someone help me please, i want to resize to make my sidebar narrow and increase my content area.
thanks

[Mahesh]

Hi @ibrahim,

Please post in your site url.

Regards,
Mahesh

[Author]

Posts