How to control size, cropping of Under Construction background image?

Hello there, so I have a background image I uploaded for use with the X Under Construction plugin.

However the displayed image crops my original image, and I’m not sure whether it crops it in the center, or off to one side of the image. I experimented with several different image sizes, but still I can’t seem to get the full image displayed.

What is the recommended size of the image I should use?

How do I make sure that it doesn’t get cropped - how do I get all of the image to be displayed?

Thank you for a great theme, I hope to get help fixing this issue soon.

Cheers!

Hi @Davvy1,

The image is not cropped actually, it is set as the background image of the <body> tag for the whole page. Now you need to know something about the background images. The browser will cut some portion of the background images to fit the image to the page depending on the browser window size.

So there will be always a cut depending on the size of the browser. I suggest that you check this article to get a grasp of the fact.

You can force the background image to always show the whole image, but then it will not cover the whole browser window depending on which device and browser size you check the site in. So you can add the CSS code below to X > Theme Options > CSS:

body {background-size: contain !important;}

Thank you.

Christopher, thank you very much. I tested that line of CSS code and found out what you meant. When I varied the size of my viewport, I would see different renditions of the background and in some cases the image would not cover the whole viewport screen. So I took the line out. I guess I will need to be more careful how I crop the images from now on, knowing what will happen to it at display time.

Thank very much for your quick response!

As a quick aside, is there a page that summarizes the differences between X and Pro? I’m debating whether to upgrade. I do have the license for Pro, but when I tried upgrading, my site got all messed up and I had to do a restore to the X version. I don’t have any custom CSS, is there a way to do the upgrade without running into that problem again?

Hi there,

The main difference between X and Pro is that Pro is a more advanced theme as it has the Header and Footer builder which X does not have. Aside from that, the options that are available in X are also available on Pro.

You can find more information about the Header and Footer builder here:

Upgrading from X to Pro should not present any problem. You just have to make sure that you follow the correct steps. You can find information about X to Pro conversion here:

Please note that if you upgrade from X to Pro, before enabling Pro on the site, you will have to disable Cornerstone since Cornerstone is already implemented natively with Pro and having Cornerstone separate installed and enabled will cause an error.

Hope this helps.

Christopher, thank you again for your answers. I will read up on Pro and decide on whether to upgrade my site. Thanks also for the warning on Cornerstone. Maybe that was what messed up my attempt to do the upgrade in the past.

I really like working with X and can’t wait to try out Pro as well.

I have one remaining question, and this regards the Revolution Slider which features on the home page of your X Ethos/Agency Demo (http://demo.theme.co/agency/). I’ve based my site on this demo, and I can’t figure out how to change the blue color of the background on the slider. Would you be kind enough to explain how this works? I’ve played with all the settings I could find on the slider, but so far the solution has eluded me.

Thank you again very much Christopher!

Hi there,

Sure thing. You just have to edit the page in Cornerstone and change the background color of the first section as the blue background is a pattern background image.

Please see the screencast below as a guide:

Hope this helps.

Wow. That was well hidden!

OK, I got it now. Once again thank you for all your wonderful help!

Cheers.

Ack, I still have one more question: How do I change the color of the “Get In Touch” button in the “Services” section of the Ethos/Agency Demo home page? (http://demo.theme.co/agency/)

I was able to find and change settings for the other buttons on the page, but that last one, I haven’t been able to find.

Sorry to keep coming back, I hope this will be my last one.

EDIT: Never mind, I found the solution. This was a Site Link, therefore subject to the Typography settings in the Options.

Thanks again though, I’m back to working on my site. :slight_smile:

Forget about that last comment, I did NOT get my problem with the “Get In Touch” button solved.

Changing the site link colors did not change the button color.

And I also noticed that the other buttons on the page behave differently, although every button is set to match “global settings”. For example, I change the button shape to be “Flat” instead of 3D, and the color of the other buttons is dark gray. The GIT touch button continues to be 3D and blue.

Edit: I found out that this is a special button, class “x-button-alt”. I imagine I will have to come up with custom CSS code for it if I want it changed, something I’m not good at. Would you help me come up with a custom CSS line that would make this button flat (instead of 3D), with rgb colors I can specify for normal, hover, and visited states?

Thank you much for your kind help!

Hey There,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

The “GIT” button is using a custom css. Please find this block in the Theme Option’s custom css section:

.x-btn.x-btn-alt,
.button.x-btn-alt,[type=\"submit\"].x-btn-alt {
  border-color: #02aed6;
  background-color: #02aed6;
  box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type=\"submit\"].x-btn-alt:hover {
  border-color: #0b8ead;
  background-color: #0b8ead;
  box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Feel free to change the colors or add/remove the styling.

Wonderful, thank you again.

I also want to change the color of the blue sections and icons in the Agency demo pages.

I have been successful in doing so on my site for the “Home” page;

I have also been able to change the blue color of the sections on the “About” page.

However the icons on the “About” page do not respond to my changing their color settings in Cornerstone.

Why are they different than on the Home page? What would be the proper way to change their color settings?

As usual, TYVM for your help.

Hello There,

  • The icons in the About page is independent to the global settings. Each of the icon element has it’s own styling. Please edit your page back in Cornerstone and in each icon element, make sure that they have the same settings.

  • When using Cornerstone in editing your page, each of the pages has it’s own unique styling. This allows you to have full control over the elements and its styling. The most easiest way is to edit one element, make sure you’ve all the styling like font size, color, etc and then save those styling as a present. The saved preset would allow you to apply that preset to another element. For more details, please see “v2 Element Presets” in this knowledge base article: https://theme.co/apex/forum/t/template-manager/20364

Hope this helps.

After reading your response, I went back to my site and tried again.

I can set the Background color for the icons in the About page, but whatever values I enter into the Icon Color itself, none of it matters, the icons will stay blue. I tried it with each of the 4 icons on that page, and I get the same result for all of them.

I then investigated further, and finally found the reason why: there is a “Style” box in the settings of the Classic Icon element, way at the bottom of the left panel of Cornerstone, and I found out there’s a whole line of styling in that box:

“display: inline-block; width: 3em; height: 3em; border: 4px solid; font-size: 2.5em; line-height: 2.875em; text-align: center; color: #02aed6; border-radius: 100em;”

So then I just went in and changed the color value of the style, and got the icons to finally(!) turn into the color I wanted.

Thanks for your response, it made me try again, and allowed me to make that discovery, so all is well - for now.

Have a great day/evening, wherever you are!

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.