[Naoko]

Hi,

In Catch Box, 404 error page shows only body, no sidebar.
I’d like to add sidebar to 404 error page, because menus in sidebar assist readers who encounter 404 error to find information they want.

Can I add sidebar to 404 error page by editing additional CSS?

[Skandha]

@naoko-kaku: You will need to create a child theme and customize your site for that. If you are familiar with child theme customization let me know, otherwise I suggest you to hire a customizer to get it done.

Kind Regards,
Skandha

[Naoko]

Hi, Skandha,

Thank you for your reply. Although I have only a little experience of child theme customization, I’d like to try it. Could you please provide customize information?

Regards,
kuku (my new nickname)

[Skandha]

@naoko-kaku: Go to => Child Theme Folder => create 404.php file and add the code in this link.

Then Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.error404 .entry-header, .error404 .entry-content {
	width:100% !important;
}
.error404 #primary {
	width:590px !important;
	float:left !important;
}
.error404 #main .widget {
	float:unset !important;
	margin-right:0 !important;
	width:unset !important;
}
.error404 #primary #content {
	margin:0 !important;
}
#content .error404 {
	padding: 10px 5% !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[Naoko]

Hi Skandha,

Thank you! I’ve done it.
It seems almost OK in wide(PC) window, but too wide in smartphone window.
The original 404 error page of Catch Box is responsive.
My site is https://chokowalk.sakura.ne.jp/n02/abc “abc” doesn’t exists.

Can I make it responsive?

Regards,
kuku

[Skandha]

@naoko-kaku: Hello kuku,
Please remove this from the above CSS Code.

.error404 #primary {
	width:590px !important;
	float:left !important;
}

Now, Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:768px) {
	.error404 #primary {
		width:590px !important;
		float:left !important;
	}	
}

Let me know if this works out!
Kind Regards,
Skandha

[Naoko]

Hi Skandha,

Thank you very much! Your suggestion works perfectly!
I changed “590px” to “70%”, because I’ve customized #primary to “70%”.

Thank you!

Regards,
kuku

[Skandha]

@naoko-kaku: Hello kuku,
Glad I was able to help you out. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts