Using the latest stable version of Discourse (3.2.x) plus the updated version of the Landing Pages components (plugin, blog pages and blog theme) I was only able to reproduce the image background and the post container size issues. I will make a small update in the theme once I can, but theyâre easily fixable if you want to do it in your fork.
Using the default settings in a clean install, the Posts/Subscribe buttons are at the bottom of the page and both functional, the paths in the mobile version behave the same as in the desktop and I cannot verify any issues with the post dates, except for the âlast updateâ that changes once you set the blog category (all posts in that category receive a âblog postâ tag).
The hamburger menu in the mobile version will be empty as long as you donât have anything configured in the âMenuâ settings of the landing pages configuration. I might update the code to completely hide it in that situation to simplify the interface.
Just reached your blog and could quickly debug a few things:
Regarding the button not working, it seems that you have some strict Content-Security Policy settings enabled and the required scripts are not being loaded.
Regarding the links, I just accessed your site using Firefox on an Android phone and had no issues whatsoever. Maybe another particular configuration from your browser or Discourse installation?
Regarding the CSS fixes there are many options. For example, for the background image you can set background: no-repeat center/cover fixed; in the .title-container class inside common.scss, and for the âsmall containerâ in posts you can add min-width: 100%; to the .post-content class inside the same file.
Regarding the menu setting, currently the only way to add one is on the global pages.json file as mentioned in the documentation but thereâs not a lot of information on this regard. You can however see an example in the pavilion-landing-pages repository.
Hey! So, on that video you screen-recorded, the direct URLs work fine. But if I go to the home blog page and then click the blog title, it gives a page not found error. Direct URLs work fine, but no one would have those on-hand and obviously isnât viable.
I will try those CSS fixes real quick and edit this or reply again with my findings, thank you!
Veryyyy interesting find on the Content-Security Policy thingâŠI donât even have recollection of me doing anything with that. Hmmm. How would I fix that?
EDIT: Fixed Subscribe button by disabling content security policy in settings. But is there a way to keep this enabled but have the button still work? Maybe have the button work differently so that it doesnât trigger that?
No idea on the CSP settings, sorry on that side. On the video, around 26s-27s I do exactly that (click on the blog title from the home blog) and still worked fine, so not sure how to further test that from my end.
Edited my above post to say: âFixed Subscribe button by disabling content security policy in settings. But is there a way to keep this enabled but have the button still work? Maybe have the button work differently so that it doesnât trigger that?â
And oh, my fault! Hm, thatâs really weird then. Iâve tried multiple browsers & even a few phones and the same issueâŠ
Btw, is there a way to make the subscribe button/text bigger to match the size of the âPostsâ icon that floats on the screen on mobile? The icon is proper size when signed into an account but not when not signed out, as a guest, which you can see in your video.
Besides that, my only other thing really is making the profile photo/author name, date, and âForum Topicâ area horizontal on mobile since it looks bad stacked vertically like this (or at least the date & Topic area next to each other, centered under the profile photo or something)âŠ
In addition to my above reply, @cabidop, my partner thoroughly went through the blog page/theme stuff for a couple hours, because I wanted a non-techy general personâs thoughts on the default setup. Figured Iâd mention them here if you wanted to incorporate any of them into the blog stuff:
-When signed out, have the Subscribe button on the Blog landing page take you back to the Blog landing page after a user clicks Subscribe and makes an account on the site.
I personally didnât even realize it worked like that, but if a guest hits Subscribe, it brings them to the forum Register page and then when they make an account, theyâre left wondering where the Blog page even is now since it keeps you on the Forums. However, when they now go back to the Blog landing page while signed IN, they arenât even subscribed and have to hit the button again while now logged in.
-Get a confirmation e-mail that you actually did Subscribe.
As it is now, thereâs no actual confirmation that you truly did subscribe via e-mail, just the small pop-up on the Subscribe pop-up box.
-Once Subscribed, remove the button entirely while signed in, or have it now say âSubscribed,â not still âSubscribeâ on Desktop. In addition, have the buttons not stay floated on the screen while scrolling AKA disappear while scrolling.
-The big header photo on the Blog posts page doesnât transfer over on mobile. It barely shows it or doesnât show it at all sometimes (photos below showing Desktop VS mobile for this):
Thanks for the feedback, @45thj5ej, I might implement some of the suggestions as defaults in the future. Not sure if you have already solved the CSP issue, but looks like there is a content security policy script src option that could work for your case without fully disabling the feature (not completely sure about this though).
Regarding the theme not working in other pages, thatâs the expected behaviour due to the usage of the .blog and .blog-post classes in the styles. Each landing page adds its own slug as a HTML class to its body, so as long as the CSS styles are only applied to those classes theyâll only affect the âBlogâ and âBlog Postâ pages respectively.
As for the rest of the comments/issues Iâd just reiterate what I mentioned in the other topic about being specific to your use case, as theyâre more general CSS questions rather than actual problems in the component. Said that, I might take a look to them eventually (but donât take it for granted).
Hey, kind of a dire thingâŠ
I setup my Nginx to redirect mysite.com to https://forums.mysite.com/home and setup the DNS A record from my domain provider (since I want this to be the main page of my site).
I noticed something strange. If I access a blog post from the redirect (aka, anyone going to my site would have this happen), it adds a second /home to the URL. However, if I access the blog home page from the direct URL, https://forums.mysite.com/home, then it doesnât do that.
Any way to fix this as soon as possible, or if you tell me how, I can do it. This is separate from the similar issue when this was happening on mobile-only the other day. And, of course, the link shows doubled when hovering over it on the blog home page, like: https://forums.mysite.com/home/home/blog-test-one-million
But again, if accessing the URL directly, not from the redirect, it works fine.
Only the blog home/landing page, where you go to click on blog post titles.
.
EDIT: IGNORE THE BELOW. THE FIX WAS:
Commenting out the one line below in common.scss in
the blog theme, at around line 172ish:
body.blog {
/* padding-top: 8em; */
Also, how do I edit the header of the site? It seems no matter what, the header is always put there and I canât edit it at all. The top navbar/menu/logo area.
Example: I made a custom header to make the default one shorter. And even using
.landing-header {
display:none
}
still makes a big gap at the top. How can I remove that gap?
