Super noob seeking guidance
-
January 16, 2024 at 10:44 pm #11571[anonymous]
Hi de ho.
I’m a fairly long time WordPress user. I don’t know if that helps or hurts.
I graduated to WordPress from an app called Thingamablog which to be kind I loved. The only reason I migrated to WP was the dev of Thingamablog evaporated and the publish function became inop with new security features being driven my webhosts.
Anyway, I’ve got a desire to create a simple site basically of one page which I can post pictures and texts in a semi-infinite long page. No menus, just one long page.
I’ve looked at the various free templates, and none are even close.
I’ve played with the simple template and I can’t get rid of the big black footer, I can’t make it all one page, etc, etc.
This doesn’t have to be fancy. It’s a page for documenting the issues with a house I had built all in one place.
Any guidance would be greatly appreciated.
Thank you in advance,
chris
January 17, 2024 at 3:04 pm #11576[anonymous]No sure I understand totally what you are asking, but let’s try
- theme-override your theme
- copy past the partials/footer.hbs in your new folder
- delete everything between
<footer>…</footer>
January 17, 2024 at 6:30 pm #11582[anonymous]Thanks.
Did what you suggested, really didn’t change much.
I’m decidedly not markdown/html/etc savvy. My ability to futz with the code is virtually nonexistent.
Doing some looking around, what I’m wanting is effectively a one page website.
I don’t see how that is possible with getpublii unless someone can point me to a resource of how to set it up.
cheers
chris
January 17, 2024 at 8:13 pm #11587[anonymous]If you just want to keep adding to the same page, not keeping a running list of posts that are individual posts then create a single post (call it what you want – maybe “Main Page”). Go to Theme -> Custom settings -> Layout -> Front Page -> Front page displays
Choose “Selected Post” and then select that post you created from the dropdown:
You can make the hero image area much smaller (possibly none) by editing this:
Set it a really small number. I have not tried 0vh, but that will probably work.
When editing the post – you might want to try tweaking some of the post options (click the gear in the upper right) and see if you can get closer to what you are imagining:
Brad
January 18, 2024 at 12:45 am #11592[anonymous]Wow.
I’ll give that a wail.
Thank you
Chris
January 23, 2024 at 9:54 pm #11627[anonymous]Brad,
That’s great, thank you very much.
Once past hat hurdle, a couple more silly a$$ed questions:
- The menu area at the top:
- How can I change the color (prefer black on white, and make it fixed, rather then “popping” down.
- The footer. How do I change the color to black on white?
Thanks again for all your assistance.
chris
January 26, 2024 at 4:45 am #11647[anonymous][anonymous] wrote:Brad,
That’s great, thank you very much.
Once past hat hurdle, a couple more silly a$$ed questions:
- The menu area at the top:
- How can I change the color (prefer black on white, and make it fixed, rather then “popping” down.
- The footer. How do I change the color to black on white?
Thanks again for all your assistance.
chris
Hi Chris! Glad to have you in the Publii forum!
In terms of changing the colours of things, you’ll have to do some very light and easy custom CSS edits. Are you familiar with Dev tools / Inspect Tools in the browser, and CSS?
If not, happy to walk you through some steps.
January 29, 2024 at 4:16 pm #11671[anonymous]I did this with the Simple theme. If you are using a different theme you will need to do some investigation using the Dev tools that @candidexmedia mentioned.
Here is what I did:
- after inspecting the theme in use I determined the CSS that I needed to change
- I went to Tools & Plugins -> CSS
- Add these lines of CSS (the CSS you might need to add could be different if you are using a different theme)
Plain textCopy to clipboardOpen code in new window@media (min-width: 56.25em) {.top {background-color: rgba(0,0,0,.5);}}@media (min-width: 56.25em) { .top { background-color: rgba(0,0,0,.5); } }@media (min-width: 56.25em) { .top { background-color: rgba(0,0,0,.5); } }
This is what it looks like after adding this code:
- Brad
January 29, 2024 at 6:07 pm #11675[anonymous]@<span class=”f-author-name”>bjazmoore</span> This a really useful step by step, especially the pictures and code snippet!
I figured I would inspect the demo of the Simple theme and add to your code snippet to show how to modify both the footer and header:
Plain textCopy to clipboardOpen code in new window.top { /*changing the header*/background-color: var(--black); /* sets the header's background colour to black */}.footer { /*changing the footer*/background-color: var(--white); /* sets the footer's background colour to white */color: var(--black); /* sets the footer's text colour to black */}.footer__social svg { /*changing the svg icons*/fill: var(--black); /* sets the footer's icon's colour to black */}.top { /*changing the header*/ background-color: var(--black); /* sets the header's background colour to black */ } .footer { /*changing the footer*/ background-color: var(--white); /* sets the footer's background colour to white */ color: var(--black); /* sets the footer's text colour to black */ } .footer__social svg { /*changing the svg icons*/ fill: var(--black); /* sets the footer's icon's colour to black */ }.top { /*changing the header*/ background-color: var(--black); /* sets the header's background colour to black */ } .footer { /*changing the footer*/ background-color: var(--white); /* sets the footer's background colour to white */ color: var(--black); /* sets the footer's text colour to black */ } .footer__social svg { /*changing the svg icons*/ fill: var(--black); /* sets the footer's icon's colour to black */ }