Posts Page Layout

One more question — How can we get the page titles (on the Welcome page, it says “Welcome” at the top, About says “About” at the top, etc.) to go away?

Regarding sidebar please read:

https://mtomas.com/389/tiny-forge-framework-child-themes-comprehensive-guide#Sidebar

To remove title on that particular page you can use:

.home .entry-title {
display: none;
}

Check the source of other pages and replace .home with other distinct class of BODY.

Also I would suggest to replace that big blue container with DIV containing real text and having that blue image as background, because Google reads text, not images.

Do you know of a good link that can help me with DIV codes? Especially one that will allow me to include an image as a background instead of just a plain color block?

And so it looks like the sidebar from posts can’t be removed, correct?

I also can’t seem to find where that code section is to remove the titles from each page. Or does that code have to be added in some place?

About divs, just google:

HTML Div

and then styles:

CSS background
CSS background image

in most cases you will get there: https://www.w3schools.com/css/css_background.asp

Sidebar: having in mind your experience, I suggest you using that plugin.

Just post that code at the very end under custom css.

https://eblireads.com/ — All of the issues are fixed.

However, one more thing — Is it possible to edit the posts page? Adding a banner or a background image? Anything at all?

first add:

padding: 20px;

for that div in front page.

BG image for post page you can do via style.css same as with div.

In order to add banner most likely you have to copy index.php to home.php and edit it.

Not sure about the padding… it shifts the div to the right and creeps behind the videos. Also, with or without the padding, the front page looks really off when viewing from a mobile device… Any thoughts?

That’s because you made that div wider than the paren container (div). Try this:

background-image: url(“https://eblireads.com/wp-content/uploads/2014/01/65253.png”);
max-width: 615px;
height: 690px;
color: white;
font-size: 20px;
padding: 20px;

Of course you will have to tweak it more to get it look nice.

I suggest you to use FireFox Inspector to see what styles are affecting the elements:

You can activate it with: CTRL+SHIFT+I

and select the element you need with the mouse. Also it will let you see the dimensions of those elements.

https://eblireads.com/ — The mobile version is still messed up (the font runs way off of the DIV.

Keep experimenting, open FireFox Inspector in mobile view and try to analyze css code, try changing or enabling/disabling certain parameters in the Inspector style toolbar to see what happens.

It’s business as usual – one will have to work hard to learn things ??

Right on — A plugin has seemed to do the trick.

Thanks Tomas.

But don’t forget padding, otherwise that box looks strange ??

It should look good to get into the showcase:

https://mtomas.com/363/showcase-tiny-forge-theme-site-mod

:)))

Hey Tomas, not sure what you mean about the padding. It seems to make no difference on my end.