[iamwithUParticipant]

Thank you Friech, again for that wonderful step by step guide, which lets me learn and understand what I have to do. This is invaluable.

However, altho I made sure my style.css file is exactly like yours, this time the resulting headline didn’t look like the Niconne font I see in google font. The headline now looks like the default font in my website. Do you know why is that?

While you look at my tagline, can I trouble you to take a look at the box where my tagline is sitting in – do you notice that it is slightly greyish in color? Likewise the borders all round – top, bottom, left and right. On the mobile phone, it looks ok. But on my iPad, it looks very disjointed with the rest of the page.

I have a similar problem when we go to the “About” page. On the iPad, if you look at the portrait (vertical) screen, you will see the bottom exposing the background photo – which is not intended. I guess all these arose because I started with a X sample and plonked my design over it. And as I didn’t know how to adjust the margins, padding etc, the result is a patchy job throughout my website.

I know this is not part of the subject of this forum, but I really don’t know how to title and describe this problem separately. If you want me to start another thread, I’ll do so, but I hope you can stay with me and guide me through this – remove the unwanted margins / paddings and having a consistent black background throughout & consistent margins for every web page on all screen sizes. Appreciate any advice you may have.

[iamwithUParticipant]

The font worked! Just that it’s very small. Can teach me how to increase the font size? I think I need to increase it by about 4 times the current size.

Look forward to learning from you again, Friech.

[FriechModerator]

Hi There,

Yeah sure just add a font-size property to the class niconne we just wrote on the style.css file.

.niconne {
	font-family: 'Niconne', cursive !important;
	font-size: 32px;
}

Adjust the 32px value accordingly.

Or

If you only want to change a specific text/headline size. You can add the font-size: 32px; to its STYLE field.

You can learn the other font property from here.

Have a nice weekend, cheers!

[iamwithUParticipant]

Thanks Friech, you’ve given me some mastery over use of fonts!

Can I trouble you to take a look at the box where my tagline is sitting in – do you notice that it is slightly greyish in color? Likewise the borders all round – top, bottom, left and right. On the mobile phone, it looks ok. But on my iPad, it looks very disjointed with the rest of the page.

I have a similar problem when we go to the “About” page. On the iPad, if you look at the portrait (vertical) screen, you will see the bottom exposing the background photo – which is not intended. I guess all these arose because I started with a X sample and plonked my design over it. And as I didn’t know how to adjust the margins, padding, window containment etc, the result is a patchy job throughout my website.

I know this is not part of the subject of this forum, but I really don’t know how to title and describe this problem separately. If you want me to start another thread, I’ll do so, but I hope you can stay with me and guide me through this – how to remove the unwanted margins / paddings and having a consistent black background throughout & consistent margins for every web page on all screen sizes. Appreciate any advice you may have.

[Rue NelModerator]

Hello There,

Thanks for updating in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[iamwithUParticipant]

Hi Rue Nel, I attach a screen shot as requested.

You’ll notice the tagline in a box that is lighter in shade than the side margins. On some screens (such as my iPad), the difference is very noticeable and gives a patchy effect. The side margins are black, whereas the inside box is grey.

I hope to have a seamless background – not grey inside, but the whole website looks consistent between the margins and the box inside the margins. I don’t know if it’s the padding, margin, or container box that I should resolve.

I’ll send screen shot of my iPad showing the background picture exposed later. Shall we tackle this box first – the box where the tagline is.

[Rue NelModerator]

Hello There,

Thanks for updating in and for sending us the screenshot. To resolve the issue and make sure that the background color around your section with the bamboo background image is the same, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-boxed-layout-active .site,
body .entry-wrap {
    background-color: #000;
    border: none;
}

Hope this helps. Please let us know how it goes.

[iamwithUParticipant]

Things have improved somewhat, but the grey color can still be seen, esp on the right side of the screen. One can see that the tagline is sitting inside a box with a lighter black color. Is there a way to make all the background consistently black throughout?

I’ll be grateful if you can point out what I did wrongly in layman’s terms, so I can learn from this journey.

[LelyModerator]

Hi There,

Are your referring to attached screenshot’s grey background?
That is because of this image:http://myscarletworm.com/wp-content/uploads/2016/03/bg-bamboo.jpg that is set to be section background. Please remove it and set it transparent or black. If it’s not, would you mind pointing us to correct URL and section with this issue?

[FriechModerator]

Hi There,

That background-image is gray in nature. We cant change that with CSS.

We can change that black color on the side to match with the gray background-image (with the code Rue provided above) or make the section full-width to eliminate that black part on the side. However the solid black image above (logo) will still make the gray image very noticeable. This is also the case with the Fish Cake Patties image its background is very noticeable on black background, so this issue has to do with the designing.

Maybe the best thing to do here is to have your background-image edited and applied a vertical gradient mask on it from a solid black to gray.

Let us know how do you want to proceed.

Thanks.

[iamwithUParticipant]

So glad to have you back with me, Friech.

I didn’t know I had a background image 🙁 Please remove this background image, whatever that is! I’ll be grateful for just a simple black background for my webpages.

If you can teach me where to look to detect the background (or whatever I might have inserted inadvertently), I can learn from this and learn to be careful in future. Appreciate your tips.

[FriechModerator]

Hi There,

On that page please inspect the second section. And you should see its background type is set to image.

Change that background type to color (dropper icon) and select a black color from the color picker.

Hope it helps, Cheers!

[iamwithUParticipant]

Awesome – it helps immensely. Thanks! All pages have now been cleaned up. Except the “shop” page (which is called “Our Menu” in my website).

As this “shop” page is not a Cornerstone page, I can’t edit as advised by you. Is it controlled by some global settings somewhere? There is still some grey patch near the bottom areas.

Also, instead of using the dropper icon and choosing black icon, I used the “no-entry” – which means no background, right? Any implication if I were to opt for this instead of choosing a black background? The result seems to be the same, so just wondering what’s the difference.

[iamwithUParticipant]

Also, would you be so kind to explain the significance of Rue Nel’s code above so I know how those codes interact with the “dropper” icon, or no image/background selection?

[FriechModerator]

Hi There,

For the “our menu” page, please add this on your Custom > Global CSS on Customizer.

.archive #x-content-band-1,
.archive #x-content-band-2 {
	background-color: transparent !important;
}

Yes, that is correct the “clear” background means no background or transparent background. The difference is when you have a solid black background on your section, then no matter what the background on the boxed container the section background will stay solid black. Whereas if you have a transparent section background you will see through that whatever background color/image the boxed container have.

The code provided by Rue is to change the background-color of boxed container to solid black, because the default is gray.

So if you want to change your boxed container background to a different color, you used that code. Of course you need to change the #000 (black) value to any color you desired.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Author]

Posts