[Marcooooo]

Hi !

I’m working on a new child theme of Catch Box for habitation.ch. The Catch-box theme is already running for this site, but they want a new look.Habitation got also a magazine, and they will change they design: the logo will stay in white and the background will change regularly.

I got a logo with a transparent background. My idea is to apply a color background for the header section. How can I simply do this?

Thanks for your support (hum… I presume I will get some more questions these next days…).

Have a nice week-end!

Regards,

Marc

[Sakin]

Hello Marc,

You can change the background of the header section by changing the color code in the following css and then add it in your child theme style.css or in “Appearance => Customize => Additional CSS” box:

#branding {
    background-color: #fff;
}

Regards,
Sakin

[Marcooooo]

Hi Sakin,

Thanks for the reply. I tried… but failed. Seems the background of the header doesn’t change. Unless the problem is in another part: I got a white border around my image. I just want the logo, without any white frame around. Is it possible?

And is it also possible to have the search box in the menu bar?

Thanks for your help…

Regards,

Marc

[Sakin]

Hi March,

Where did you add that color code? Also, did you change the color code HEX value #fff to the desired color code you want? You can check out color codes at https://htmlcolorcodes.com/. Let me know where did you add it and I will check in your site.

If you want to remove the that white border only then add the following CSS:

#header-content {
    padding: 0;
    margin: 0;
}

Regards,
Sakin

[Marcooooo]

Hello Sakin,

I’m a little bit confused with the place to put the codes… It seems some codes are without any effect if I add them in the CSS. Adding them in the “Appearence->Customize…” is ok. But sometimes it’s the opposite!

I can now fix some problems. I’m looking now to stick my header to the top of the page, but keep some margin on both sides. Is it possible? I also remark the header is one pixels shorter than the menu bar. Depending on the browser I’m working with. Strange… How can I be sure every elements got the same width?

If your interested, I got 2 printscreen. For the moment, unfortunately, I got to put the actual theme online… so it’s pretty difficult to show you online my problems. I hope I’m comprehensive enough…

Thanks again!

Regards,

Marc

[Sakin]

Hello Marc,

You need to post in “Appearance => Customize => Additional CSS” box. See this https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Regards,
Sakin

[Marcooooo]

Hi !

I was doing it through “Appearance -> Editor”…

I will put the codes in the “Additional CSS” and try again…

Any idea regarding this pixel width between the header and the main content? And about to reduce the header (no top margin)?

Regards,

Marc

[Sakin]

Hi Marc,

Yes, you should never edit it from “Appearance => Editor” as all the edits that you make in that “Appeanace => Editor” will change the theme file itself. Also, all the edits made in the theme itself will be reverted back when you update the theme. So, you will lose all your edits. That is why we need to use it in “Appearance => Customize => Additional CSS”, this is a safe way to add CSS.

Can you send me a screenshot image URL showing what you want?

Regards,
Sakin

[Marcooooo]

Hi,

Just a precision: I always work on a child theme!

How can I send you a doc?

[Sakin]

Hi Marc,

Yes, a Child theme is also a safe way to work on it. Then for all the CSS edits, you can simply add in your child theme style.css file

Can you upload somewhere in your site or doc sharing site like dropbox and paste in URL here.

Regards,
Sakin

[Marcooooo]

Hi !

I don’t have a minute today to clean my CSS in the child theme…

Anyway, here is the link to the screenshop I made :
https://www.dropbox.com/s/182iyys3s4bxrjk/new_site_2.png?dl=0

– the header and the menu are not aligned (1 or 2 pixels, I guess)
– is it possible to clear the gap between the top the header and the browser?
– is it possible to change the color of the menu bar?

After that, I thing I can finalize my layout!

Thanks a lot!

Regards,

Marc

[Sakin]

Hi Marc,

1. About our menu alignment with 1 or 2 pixels, I need to check in your site with the same settings. So, can you send me your site URL like in your screenshot?

2. Yes, you can remove the top gap of header and browser by adding the following CSS either in “Appearance => Customize => Additional CSS” or your child theme style.css
.site { margin-top: 0; }

3. You will have option to change the colors in detail in Catch Box Pro theme. But if you want to manually change the color using Additional CSS or child theme style.css then edit the hexadecimal color code in the following CSS and add it:
#access { background: #3d3d3d; }

Also, for the menu border color, you edit the hexadecimal color code in the following CSS and add it:
#access ul.menu li { border-color: #fff; }

Regards,
Sakin

[Marcooooo]

Hi Sakin,

The site is now online : http://www.habitation.ch

I need to make some adjustments:

• increase a little bit the margin between border of the main part and the article
• find the solution to have a footer similar to the menu bar, with just an address or something very light

Something very strange : first I put all the “modification” on the css file (child theme, of course). Sometimes the modification are applied, sometimes not. Putting everything in the “Appereance…” semems to solve the problem. Is is something wrong in my codes?

Any tips are very welcome!

Thanks a lot and best regards,

Marc

[Marcooooo]

Hi again!

I forgot something: on the smartphone view, the logo is totally deformed… A solution to get a correct resizing?

Thanks again and again…

Have a nice week-end!

Regards,

Marc

[Sakin]

Hello Marc,

1. About the logo issue. You can following CSS that you need to remove the following CSS from “Appearance => Customize => Additional CSS”:

#branding img {
	height:250px;
}

2. About the border in the main part. I see that you have the following CSS in your child theme style.css. You can change that as per your need:

#main {
    padding: 15px;
}

3. Footer: I don’t see your footer. So, I am confused with your question

Regards,
Sakin

[Marcooooo]

Hello !

Thanks, it works fine on the smartphone now… I will play with the padding this week-end!

I also put the footer, and need to make some changes:
– same background color as in the header
– modify the left text
– remove the right text (sorry)

Is it possible?

Have a nice day!

Regards,
Marc

[Sakin]

Hello Marc,

1. For details color, it’s better to use Catch Box Pro and then you will get the color option to change it as per your need. Bur for now, you can add the following CSS:

#site-generator {
    background-color: #34678f;
    color: #fff;
}
#site-generator a {
    color: #ddd;
}
#site-generator a:hover,
#site-generator a:focus {
    color: #fff;
}

2. There is no opton to change the footer text. This option is there only in Pro version. Please upgrade to Catch Box Pro and int you will get Footer Editor option at “Appearance => Customize => Theme Options => Footer Editor Options”.

Regards,
Sakin

[Marcooooo]

Looks great, thanks a lot for all this tips!

Regards,

Marc

[Marcooooo]

Hi !

I got just 2 last questions :

• I need to remove (finally) the footer; on Chrome, it’s ok, but with Safari, I still got a footer; how to remove it totally?
• Calling habitation.ch will load the articles; I got 5 articles on my page, but cannot see any arrow or something to read the next articles; how can I have this feature?

Many thanks in advance…

Regards,
Marc

[Sakin]

Hi Marc,

1. For footer removal and all, Please use the Pro version as it has footer editor option in “Appearance => Customize => Theme Options => Footer Editor Options” from where you can either remove it or change it as per your need.

2. That next nav is not showing due to color issue after you change the background to blue as the text as also in blue. So, can you add the following CSS in “Appearance => Customize => Additional CSS” to change the color of that post nav.

#content nav a { color: #fff; }

Regards,
Sakin

[Author]

Posts