Full Width Picture above Blog Post / "Posts"

BB Theme
1

Hi,

How do I put a picture that is “full width” above all my blog posts?

I want to be sure the title is beneath this picture.

I would be happy to delete the title from the posts if necessary. And, for whatever it’s worth, I used some css your team gave me to get rid of the comment count.

Thanks

John

2

Hi John,

Have you added a Featured image to your posts? If you add one, you should be able to position it above the post title via Customizing > Content > Post Layout > Featured Image.

Thanks,
Danny

3

Yes, I have a featured image, but doing it this way does not allow me to have the featured image stretch across the entire width of the screen (IE: Full width).

4

[Content Hidden]

5

Hey John,

It seems you forgot to add a link to the sample post?

Ben

6

[Content Hidden]

7

Hi John,

This is a bit hacky and the reason for this is that your post is inside a fixed width container. Therefore, if you add the following CSS, it should give you a full-width featured image. Also, I have had to use the calc(); value on margin-left to stretch this full-width across your page.

.fl-post .fl-post-thumb {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.fl-post .fl-post-thumb img {
    max-width: 100%;
    width: 100%;
}

Please be aware that this code may not work on all browsers.

Therefore, I think a better solution would be for you to use a child theme and either add the featured image via a hook or edit the single.php file and add the featured image there using the WordPress function.

Thanks,
Danny

8

You lost me on this one.

Let’s go with these questions

  1. How do I delete the titles from posts so they don’t show at all when a post is being viewed?

  2. How do I delete the “edit” right next to the titles on posts?

  3. How do I allow content to actually be full width on posts? Full width can be selected on “rows”, but the row doesn’t really go to full width the same way a page does.

9

Hey John,

The best way around this would be for you to change the single.php file like what Danny said. We can actually make use of the default page template to make Posts full width as well as remove the title. You’ll need to use a child theme for this.

  1. Copy the single.php file from the parent theme to the child theme.
  2. Copy the contents of the page.php file from the parent theme.
  3. Open up the single.php file form the child theme, select all the code inside it, and paste the contents you've copied from the page.php file.

Give it a shot and see if it’s what you’re looking for.

Ben

10

Going to have to dumb it down a little for me, please.

I think what you’re trying to get me to do is to get the single.php from the parent theme into the child theme, then I’ll open up that new single.php file in the child theme, delete the code there and replace it with the code from the page.php file from the parent theme (the “delete and replace” will be done by copy and paste from the page.php file).

Is this correct?

Regarding . . .

Step 1: How do I copy the entire single.php “file”? The word file trips me up a little. In the dashboard, do I go to appearance -> editor to copy the single.php file (which is titled “Single Post”, correct?)…and then copy the code from there?

Step 2: What do you mean by contents? contents instead of a whole file? IE: just the code = “contents”?

Step 3: . . . I’m guessing this will depend on step 1, but how the heck do I open this “file”?

11

Hi John,

I wouldn’t recommend using the Editor built-into WordPress because if you make a mistake you can nuke your site i.e. White Screen of Death.

The safest way to do this is to use an FTP client and a code editor.

You will want to download a fresh copy of the BB theme from your BB Account page. Once downloaded, extract the zip so you can see all the files and folders.

Now open both the page.php and single.php files in a code editor. Copy the entire contents i.e. everything from page.php and then remove everything from the single.php file. Now paste the contents from page.php to the single.php file.

Once you have done this, save the changes for the single.php file and then connect to your site via an FTP client. Navigate to /wp-content/themes/bb-theme/child/ and upload the single.php file to your BB theme child directory.

Thanks,
Danny

12

AHHH!! WOO HOO!

I did it! haha

For those that ever do this, I used FileZilla for my FTP client (https://filezilla-project.org/ . . . DL the “client” application). I also have a godaddy site. Had to get my “SFTP” username (once logged into godaddy, select “domains” in top left of godaddy page, then your domain, settings, SSH & SFTP, copy and paste UN & PW & Port # into filezilla)

I also used Notepad to copy and paste the code from the page.php file to the single.php file.

Thanks Danny and Ben! You guys rock!!!

13

Awesome! And no worries at all, John! Glad we could help. :slight_smile:

Enjoy!

Ben

14

Gents,

Let me add one final layer of creativity I’d like to try to accomplish with this whole setup.

I want to have an option for people to comment on my posts via Social Media (“Social Comments”) AND via another more “traditional comments” interface where they have to enter an email address to post a comment (this will help me build my email marketing lists).

My more “traditional comments” plugin is “WPDISCUZ”

For the “Social Comments” plugin, I’ve found a few, but keep running into the same problem with all the social comments plugins I find. The one I like the most is Super Socializer’s Social Comments function.

The problem I have with the all of the Social Comments plugins I find (Including Super Socialize’rs) is that When I install them, they show up all the way aligned left on a “Full Width” basis. . . and it looks tacky. . . especially because my “traditional comments” plugin (WPDISCUZ) shows up on a fixed basis.

My question is this: Is there any way we can add code to the single.php file so that after all the “content” is added to a post (IE: content in this case = all the BB Modules… So I mean after all the BB modules are inserted), whatever comes after that content or at a certain point shows up on a “fixed width” vs. “full width” basis?

If this is not possible, I will use only the WPDISCUZ. . . but I would really like to have both.

Any guidance, please let me know!

I will post a UN and PW and sample blog post in a separate post.

15

[Content Hidden]

16

Hey John,

Can you add the CSS snippet below and see if it’s what you’re after? Feel free to play around with the value.

.comments-area {
  max-width: 900px;
  margin: 0px auto;
}

Ben

17

What does it feel like to wake up every day and know that you’re incredibly resourceful and awesome?

Worked like a charm on all devices.

THANK YOU!

18

No worries at all, John! :slight_smile:

Enjoy!

Ben