Home-banner image and formatting

Hi Chris,
So did you use the Appearance > header screen to select an image?

On the others, it doesn’t look like that theme has Custom CSS, so it would be advisable (understatement) to add that via a plugin like My Custom CSS or JetPack (if you are going to use that anyway).

Or if you are likely to want to modify theme files (i.e. .php files) it’s best to use a Child Theme.

Try this CSS code once you have the above set up:

#wrapper {
   padding 0 40px;
}

change the 40 for more or less.

header h1 {
   display: none;
}

Tell me a bit more about the list issue.

WPyogi, Thanks so much. Very helpful. I installed the My Custom CSS and it works wonderfully. I’m opting against a child theme at the moment as my site will be very static and I’m not going to make a lot of changes to the theme, but it’s good to have all my modifications in the custom CSS.

Re: Header, yes, I looked at Apperance-Header. I think the header image is actually the scratchy font title at the top. What’s there now is fine. What I am interested in seeing is what’s called the “home-banner” mentioned in this thread (halfway down the page):

https://www.ads-software.com/support/topic/home-page-on-pilot-fish?replies=69

Basically, I just want to replace the forest image (https://wordpress.danielatwork.com/project/pilot-fish/) with my own and have it be the visual at the top of the page under the site title. Something is still blocking that. Now that I am on this new theme, none of the modifications I did to the earlier theme are necessary now. I don’t know if any of that stuff carries over from theme to theme, as with content. I’m probably missing something obvious, but me combing through the editor is like a blind man combing through a haystack. Can’t tell what’s relevant.

The h1 is now gone (Hooray!), but I am not noticing any change in the side margins with the wrapper code, and I went up to 200px. Maybe I am misunderstanding how that works. Ideally, I’d like to scootch in both the left and right a bit.

Re: the list, ideally the line space on the bullet pointed lists (ul) would be smaller so the lines would be a bit tighter. But that’s really not a priority.

A lot of stuff I know. Thanks again.
Chris

Oops. It now occurs to me that the most efficient way to get the right look re: margins/wrapper is to have the text on the right side wrap more tightly. Can I use “word-wrap” in the custom CSS and pick a letter value, like 100?

Hi again,
I’m not very familiar with the theme, so I installed it to poke around – it looks like you only get that image on the front page if you select “recent posts” for the home page under Settings > Reading . Then your new image (replaced the existing one) should show up.

Found this which may be helpful: https://wordpress.danielatwork.com/pilotfish/faq/

I’ll look at the margin and list questions now.

On the margin/layout question – do you want these changes only on the front page – in which case, using the “posts” per my above is going to change that. So maybe I’ll wait until we sort that part.

“Word-wrap” doesn’t do what you are asking – but “width” might be what you want – but with a responsive site, that’s tricky too – doable, but not as straightforward as it appears – as you need to make sure the modified CSS doesn’t do weird things in unintended places (smaller devices or other pages on your site).

For the list, it’s controlled by this CSS:

li {
    line-height: 18px;
    margin-bottom: 12px;
}

So add that to your custom CSS and play around with it – again, if you only want to change this particular list, we can do that once we know which front-page template you’re going to use.

Sorry to sound so vague, but it’s the classic, “well, it depends…” situation :).

Hi WPyogi and thanks so much. I was able to put the banner image in using your method, but it was very unwieldy so I went back the original setting for Reading. Instead I put the image into the code for the page, but it’s smaller than is should be (the original is 997px wide).

https://wellspringwriting.com

If it’s easier to just copy it into each page I’ll do that. there is a pretty big margin below the menu that would be nice to get rid of, or plug the banner image in there if possible.

I playing around with the margins and line heights and got decent results for those on all the pages, though there is one strange result in the line height if there is a natural line break, it gets compressed.

https://wellspringwriting.com/?page_id=52

I plugged this in:

ul li {
line-height: 18px;
}

which helped but increased line size for all the lists.

Still working on it, and thanks again!

Okay, well again, it depends – we can modify the header.php file so your beautiful banner shows up on every page – but that pretty much requires using a Child Theme so that you don’t lose the changes when the theme is updated. That’s not usually very hard to do…

But you can also remove that space with this CSS:

.post-entry {
    margin-top: 0;
}

On the list, what you need to do is add a CSS class so that the changes will only apply to the list you want – so try this:
In the HTML for the list (you can use whatever class name you want)

<ul class="listsmaller">

and then in the CSS:

ul.listsmaller li {
line-height: 18px;
}

See how that goes…

OK WPyogi, I tried the suggestions and played around, with some mixed results. The image is still riding a bit low under the menu bar and is far smaller that the original. Do I need to specify a target size or something? My eyes glazed over when I looked at the WP child theme explanations, but I will give it a go if you think that will work best.

I tried the post-entry code and the ul class. Neither seemed to have an effect. I’m probably doing something stupid and missing it. Parts of that code are greyed out in the MyCSS window, which makes me think they’re not finding a target for some reason?

Working on some color tweaking but I think the site is almost there.

I’m glad you like the little graphic. I created it quite simply. Perhaps you were being polite, but you are welcome to take it and use for a project or whatever if you wish.

Thanks again for all your help.

I wasn’t merely being polite – I love it! And thank you for sharing it!

As to the CSS not working – it’s because you’re missing a closing bracket above the .post-entry line:

div {
width:auto;
height:auto;
max-width:700px;

  .post-entry

CSS is really fussy – missing brackets render any subsequent code unreadable by the brower!

Child themes sound more complicated than they are :).

This CSS is missing the colon after “padding”:

#wrapper {
   padding 0 100px;
}

Well I am happy I can repay your generosity in small way.

Thanks so much for correcting my oversights! I knew I was missing something(s) simple. Image is now scootched up a bit more and the spacing on the defined list is working now.

Still having a devil of a time trying to figure out why I can’t get the image up higher, and have it appear at normal size, but I’ve figured out how to make some other modifications in the MyCSS, which is very handy. Almost there.

Thanks again.

Hi again WPYogi, one more question if you have the patience for it.

One of the problems with getting the image to format well is that it’s now inserted as part of a “post” essentially, and subject to the limitations of the text. If I set up a child them, can I insert the image in the header, above the navigation menu but below the logo? I could then change the div width setting to something wider so the image would be bigger, and adjust the post width to 600px. Does that sound like a reasonable approach? Thank you.

Yep, absolutely – that’s totally the best way to go on this :).

Tada!

https://wellspringwriting.com

Took me awhile to get to this, and it’s less than elegant under the hood, but at least it looks right.

Thanks again, WPYogi, for all your help.

Cheers, c