Hi Linda,

I made the size 2698 x 552 as per this link – https://www.thechildhoodlife.com/wp-content/uploads/2018/06/Childhood-Life-Logo-Background-2698-x-552.jpg

Be sure to set the image dimensions when you select it from the media library. If you don’t the resolution can give you unexpected results!

I placed the CSS code in the Theme Panel > CSS module NOT the Live CSS module. Hope that helps.

If you have any other questions fire away!

Shane

To test this I have just deleted ANY url in the theme panel > logo header – I went into a separate browser and the CSS has not updated! What is going on I wonder? This is very strange.

The save function in the theme panel is not updating my edits.

Shane

Simion I have tried that several times with lots of variation on the classes and parent divs I target.

I have used the !important rule, I have used the custom css module in the theme panel, I have used the live css module, the wordpress native customizer tool.

I can’t remove it! Need help

No I tried that already. I made sure all text boxes for the social links were empty.

This is what I am trying to say to you, I have tried alot of options including CSS in theme panel and Live CSS.

Hi Simion,

No not the YouTube subscribe button which is in the right upper corner, the youtube icon in the LEFT upper corner.

This is what I am trying to remove and can’t – https://snag.gy/1EDNTF.jpg

How would you suggest I do this Simion?

Hi Simion,

I eventually fixed this issue. Where would you recommend adding CSS – Live CSS editor or in the Theme Panel?

I find using both can cause unexpected results – possibly interfering with the cascade of CSS.

Thanks

Shane

Hi Simion,

Thanks for your help. I was able to figure it out.

There definitely seems to be a conflict between the Live CSS & Theme Panel CSS editors. I think the conflict arises when a piece of CSS includes the use of !important along with the CSS property and value.

I know the use of the !important rule can lead to issue’s. Maybe this is one of them?

Thanks

Shane

Simion can I please give you my logins to do this. I have been trying to fix this for 24hrs and cannot seem to get anywhere with it

Shane

Hi Simion,

I have one last issue. There is an overlap with the header and where I have set the CSS as the background image. You will see exactly what I mean once u resize the browser and watch the header.

I have deleted all possible CSS associated with this (I think) but it must be hiding somewhere. I checked 3 places 1. Live CSS, 2. Theme Panel Custom CSS, 3. Customizer CSS

Anywhere else I should be looking?

This is the website – resize and you will see what I mean – https://www.thechildhoodlife.com/

Thanks

Shane

Hi Simion,

Ok thats really strange! It appears to be working correctly now! But I honestly tried this already and it had my mind completely stressed.

I will remove some of the unnecessary CSS now and see if it works the way I want it to.

I think there is a conflict depending where you save your CSS in the theme.

Live CSS vs Theme Custom CSS modudle. I found that can change things especially with the use of “!important” in a piece of CSS code

Thanks!

Shane

• This reply was modified 8 years by Daltai.

Hi Simion,

I have tried what u said and I cannot achieve that.

I am using style 10. I uploaded the logo (banner) for for style 10 but it did not come out with proper resolution. Bear in mind the image that I used is 1326 x 276 here https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Childhood-Life-Logo-Background-1349-x-276.jpg

I tried uploading in the style 10 logo module you are referring to and it stretches out and loses major resolution. I tried using “Cover”, “Full Width” ect and I couldn’t get it the way I wanted.

I am afraid to undo some of the CSS I have placed in Theme Panel > Custom > CSS and on the Live CSS toolbar. Is there any way that you could have a look at this for me?

I have spent a day trying to figure this out. I would really appreciate if someone could take a look at this for me.

Thanks

Shane

• This reply was modified 8 years by Daltai.

Hi Simon,

This problem fixed itself somehow, thanks for your help. I have a new issue I am posting about now to do with iPad portrait dimensions and CSS.

Thanks

Shane

Hi Edward,

Many thanks for your help on this that fixed the issue 🙂

Shane

**ISSUE FIXED**

For anyone looking to achieve this, this is how I figured it out. I used chromes inspector tool and went through several different div elements. The one you think you need is not always the one that will produce what you are looking for, just keep trying the child elements until it starts playing ball.

The CSS I used to fix the job was:

.td-header-style-10 .td-logo-wrap-full {
background-image: url(“https://www.thechildhoodlife.com/wp-content/uploads/2018/05/Childhood-Life-Logo-Background-1326-x-276.jpg”) !important;
min-height: 276px !important;
}

Hope This helps someone else trying to customize the design of the Craft Theme for Newspaper.

Thanks

Shane

Hi Simon,

I tried that method already and unfortunately it doesn’t display the image correctly.

The quality is terrible and completely rasterized. I’m aware how the demo is set up too but just want to reproduce the image banner that is attached in my 1st post above.

When I use the inspector tool and copy the url of my banner into the space the demo banner url uses, it works perfectly, therefore CSS must be the answer.

I’ll have to have another go of it now to see what I can do.

Thanks for your reply!

Shane