Home page excerpts

Correcting typo in above, I meant to say see my previous post (The one that starts with “Yes, it helps in part.”. This post has 4 requests, with the third one just amended as in the immediate above.

Hi,

1 You need to click X then click Launch, then click Options

2 Change your sidebar background to transparent

Add this in X > Launch > Options > CSS

.x-sidebar {
    background-color: transparent !important;
}

4 You can use the site below to convert

http://www.rgbtohex.net/

As I said in my previous post, there is no “Launch”. Your screen shot does not match my Dashboard. When I hit X on Dashboard, it shows a screen with X and immediately under it is “Posts”. There’s no “Overview”, no “Launch”, no “Cornerstone”. You’ve done a great job working through my messy replies and giving me detailed instructions, but it’s to no avail, if I don’t have “Launch”.

Hi There,

Your X theme is not updated. Try to update the theme and plugins. See latest version here: https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. On your current version we can access it on Appearance > Customize > Custom > Edit Global CSS.

Hope this helps.

Thanks. Updated theme and plugin. Tried to do in Launch, but didn’t know how to lock in changes. Tried the old way. Didn’t know how to lock in changes. Finally figured to hit X. Got the update. Banner is huge!!! In a previous request I said my banner didn’t stretch across the screen and was too tall. It’s still too tall, so I looked at the old homepage (please hit “Home” to take a look). The desired banner there is about half the height, so I tried an edit height to 200px. Couldn’t update. Then, I tried entering lines of new code, like the pattern previously given, only with 200 instead of 400px. It allowed me to update, but the banner still looks the same-way too tall.

I requested that the background look like Ethos Demo 1 that I was surprised to see installed on my old website kawriverkeruv.com (Sorry couldn’t figure out how to do hyperlink). Please note the grey background there and how it is on both the left and right of the content box and also above and below it, so the box looks like an island in a sea of grey. I only have my blue on the right.

1)How do I get the banner to look shorter as in the original homepage? 2) How do I get my blue border to surround the boxes of content that contain the featured image and the post excerpt? 3) how do I ensure once this new home page is finally set to right, and I go to delete the old home page, that the new once doesn’t disappear as well?

Hi there,

What you need to do is edit the image directly within any photo editing software and not by CSS. Your image is basically square, so it will appear square. And a desktop where the screen is the rectangle, a full-width square will, of course, going to overflow from the rectangle screen. Please edit your image make its aspect ratio as a rectangle. It’s standard image and not a background so you can’t just clip it as a rectangle.

The Ethos demo 1 has blog index page where post slider is displayed, it’s not a banner. If you wish to get that view instead of the banner then please follow this https://theme.co/apex/forum/t/customizer-ethos-options/131 ( Post Slider Blog ). Though, in new X and Pro, you have to do it in X/Pro > Launch > Options instead of customizer.

Thanks.

I don’t understand any of this, particularly the 2nd paragraph. I use the word “banner” for the big picture at the top of my website. The word may mean something different to you. My “big picture at the top of my website” was uploaded as a rectangle, longer than it is wide. On the original home page which can still be viewed by just hitting “home”, it is such a rectangle and it is far narrower. My daughter did not use photo editing software. She did it with css code. Please will someone address my 3 questions? They are again: 1)How do I get the banner to look shorter as in the original homepage? 2) How do I get my blue border to surround the boxes of content that contain the featured image and the post excerpt? 3) how do I ensure once this new home page is finally set to right, and I go to delete the old home page, that the new once doesn’t disappear as well?

1)How do I get the banner to look shorter as in the original homepage?

Option 1: Use a smaller image. Right now the included image is pretty large, and it’s trying to take up the whole space.

Option 2: Set it as a background image:

First, update your code from earlier to this:

function add_banner() {
  if(is_home()) { ?>
  <div class="my-banner"></div>
  <?php }
}
add_action( 'x_before_view_global__slider-below', 'add_banner', 10 );

Next, add some custom CSS:

.my-banner {
  background-image: url('http://wondrousthingsministry.com/wp-content/uploads/2017/02/Sunrise-864x576.jpg');
  height: calc(100vh - 90px);
  background-size: cover;
  background-repeat: no-repeat;
}

The example above will fill the “above the fold” area. You can adjust the height as needed. For example:

  height: 500px;

2) How do I get my blue border to surround the boxes of content that contain the featured image and the post excerpt?
Ethos doesn’t have a way to offer this form of styling. It uses lines to separate content. With custom development, you could alter the design, but changing stack designs this far beyond their original intent isn’t covered by the scope of support you can offer. You may wish to hire a developer to assist you with this, or wait until your daughter can help.

3) how do I ensure once this new home page is finally set to right, and I go to delete the old home page, that the new once doesn’t disappear as well?
Pages in WordPress don’t effect each other. You can safely delete the old home page at any time.

Thank you. #3 is very clear. As to #2, please explain how the Ethos Demo# 1 at my other website kawriverkeruv.com has just the look I want? My daughter and I have no idea how it got there to replace the WordPress freebie that we had previously installed. It says “The Blog” and “Welcome to our little corner of the internet. Kick up your feet and stay awhile”. We didn’t do this. Please take a look at this website and see how the gray field there surrounds the rectangles that contain the post excerpts, This is what I want and must be pretty basic Ethos 1, since I doubt X-theme hired a special web designer to hijack my website. Please show me how to get this basic look. On #1, I choose option #1. Now the big dimensions came from code provided by your colleagues. The first occasion was with the code provided to input into the child theme. When I replied that the picture didn’t stretch across the screen and was too tall, I was provided with new code that stretched across the screen, but was still too tall. I just want my picture to have the look it shows on the original and still viewable home page. My daughter installed it without using a child theme, just with css. I tried to change height to 200px, but it didn’t work. Please show me how to input the code correction. All this started with a simple request which could have been corrected on the original homepage without the need for the new home page with its picture problems.

Hi there,

Hmm, I’m confused about the issue and what you wish to achieve. This is ethos demo 1 http://demo.theme.co/ethos-1/, would you mind providing a screenshot where is the blue border?

Plus, this http://kawriverkeruv.com/ is not ethos, it is integrity. And you can’t mix multiple stacks. If you wish to use that kind of styling then you have to switch to integrity. And you can do that in X > Launch > Options > Stacks. Which is why I thought you’re referring to post sliders as banner since it’s the only difference I could see, minus the blue border.

Or if I’m getting the wrong idea, maybe some screenshots would clarify all these issues? Sometimes visual guide is more effective :slight_smile:

Thanks!

Thanks for the clarity. I tried out all the stack options, and it seems only Ethos provides a post excerpt with an image to its side. All the others have a big image atop its excerpt. So, I’ll stick with Ethos and we can forget about issue #2 (The blue background just refers to what is currently on my website. It’s to the right on my homepage). So, this leaves us with issue #1, option 1. How do I code correct the image astride the home page, so it is narrower, say 200 px in height? Your colleagues created this 2nd home page and provided code for the image dimensions that does not match the original look. I don’t know how to do screenshots, but you can view the image as it should appear by going to wondrousthingsministry.com and hitting “home” at the top of the screen. (Yes, it’s embarrassing but I still have two home pages).
Regards and blessings.

Hi There,

1- You do not have two home pages, you do have your home page + another page called home.

I understand is confusing, so I reccomend you clicking on Home on your menu > Click Edit Page > Change the name for the page for BLOG as that is being used a your blog page right now. If after you change the page title it still show HOME on the menu, go to Appereance > Menus and change the label of the HOME to BLOG

Regarding the image, as Rad reccomended, please edit your image using Photoshop or similar software to be proportional to a computer screen. At the moment your image has to much height in relation to the width.

So as you have

.my-banner img {
     width: 100%; 
}

It is forcing the image width and height to be 100% in order to keep the proportion.

Please try width 280px and height 700px

Let us know how it goes.

Thank you!

Instead of engaging in semantics about home pages, did you take a look at the image as it is displayed when one hits “home” on my home page? There the image is with nice dimensions, the results, not of Photoshop type editing, but css code. Surely, what my daughter was able to accomplish, you can do. If you cannot provide me with a way to edit the height for it, than why don’t we get rid of your new home page with the hugh image at the top and keep the original? All I need is for the original home page to have the format of the post featured image on the left and its excerpt on the right. Currently, the original page only shows the post featured image with no excerpt. This was my original request made so very long ago. Then I can delete the current home page and never have to see that big picture atop it. I’m very frustrated, but still wish you blessings for this day.

What you’ve been asking for is highly specific changes to your site. The layout you wan’t isn’t a feature of X. It’s certainly possible with custom code, but not something we can assist with at this point. While we’re happy to provide support for theme features, and help you use the theme, this is getting into custom development which is outside the scope of our support. As mentioned previously, you’ll need to work with a developer to make the desired changes.

If what I am asking is beyond the scope of support, how did support manage to create a new home page with the post featured image to the left and the excerpt to the right? Looks like Demo 1 to me. When support set up the new home page, it didn’t have my header image! Then, in response to my request that the image be restored, it first provided coding that did not stretch across the page. It than tried to correct with coding that didn’t match the original-way to tall. All I asked for was the Demo 1 format of featured image on left and excerpt on right. I didn’t know my header image would be a casualty. If my daughter who is not a developer could upload the image without Photoshop type editing and use css code for its dimensions (the original home page, which you call the blog page, speaks for itself),why can’t css code correct the problem? Please explain. Again, I want my header restored as is looks on the original home page (now the blog page).

Just talked with my daughter. She said the key is to set the header width in inches (not 100%). This allows for the image to have the shorter height.

Hi there,

Please provide a mockup design of what you wish to achieve to avoid more confusions, and as requested before. That way, we could easily say if it’s possible, or not, or if it’s outside our capability as support.

Right now, I’m not sure which demo 1, each stack has their own demo 1.

Thanks!

The only Demo 1 previously referenced is Ethos. The new home page is fine as is, except its header photo is too tall. Its header photo should look like the header photo (same picture) on the blog page. The blog page was my old home page. I don’t need a blog page, but have not deleted it yet just so you could see how the header image looks at the top of it. I don’t know how to do a mock-up and is one really necessary for one small change?

That one small change is to correct the header photo on the home page. It is too tall, which can be easily discerned by comparing it to the blog header photo. My daughter does not have easy access to a pc right now, but she said she was able to get the header photo to look the way it does on the blog page, by setting the width in inches, not as 100%. This allowed her to get a narrower height. She did not Photoshop the image. She used css code. She knows a little more than I about these matters, and that’s not saying much. I’m confident that what she has done, support can do. (Is there a way I can view the css coding for the image on the blog page for you. Let me know if it’s doable and would help). Regards and blessings.

Hi there,

I know, but it’s kind of mixed up since you also provided kawriverkeruv.com which you said you want that layout. Plus, Ethos 1 doesn’t have that kind of banner, but rather, a post slider.

To clarify, the issues left is the height of the banner? And not about the demos, right? If yes, then please add this CSS.

.my-banner {
max-height: 400px;
overflow: hidden;
}

Thanks!

Sorry for the confusion. As soon as I learned my kawriverkeruv.com was Integrity, not Ethos, I told support to forget about issue#2, which involved that stack’s layout and stated the only remaining problem was the header photo height.

So, I entered the code you provided, and my picture was narrow!!! I rejoiced, I was celebrating and about to delete the blog page. Then, I noticed that the new narrow photo on the home page didn’t look the same as in the customizer or the blog page. It was"cropped"-just sky. The only part of the sky I even like is the lower part with the sun rising. Like a tourist, I want my sun and beach. I’m willing to sacrifice some sky. How do we get the photo to show both sun and beach again?

Now, my home page doesn’t look silly with the hugh picture gone, but it’s missing the beautiful colors displayed in the lower half of the blog photo. Please come to the rescue and thanks.

Hi there,

You may replace that CSS with this one,

.my-banner {
max-height: 400px;
overflow: hidden;
position: relative;
}
.my-banner img {
position: absolute;
top:-100px;
}

Then you may change the top value, the negative value should push the image up.

Thanks!