Front page image Transparency, Textbox position, blog post appearance

ispirityou · Member · May 10, 2016 at 9:49 pm
Copy link

Add topic to favorites
Hi there,
1. how can I change transparency of my featured image on front page? I would like it more vivid, more alive.
2. Currently my text box and title on the front page are on the left side of the screen. How can I move it in the middle of the screen – text box and title.
3. Appearance of my blog page. I would like that my blog posts appear as a picture with title in the middle of the picture, and when one click on the picture one gets full blog post
Tnx
Damir

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 11, 2016 at 12:52 am
Copy link
Hi Damir,

1. how can I change transparency of my featured image on front page? I would like it more vivid, more alive.

Give this a try.
```
#hero.has-background .overlay, #primary-header .overlay, .page-header.has-featured-image .overlay {
    background-color: rgba(0, 0, 0, 0.5);
}
```
2. Currently my text box and title on the front page are on the left side of the screen. How can I move it in the middle of the screen – text box and title.

Add this.
```
#hero .hentry .entry-content {
    margin-left: auto;
    margin-right: auto;
}
#hero .hentry .entry-header {
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
}
```
3. Appearance of my blog page. I would like that my blog posts appear as a picture with title in the middle of the picture, and when one click on the picture one gets full blog post

Give this a try.
```
.blog .entry-header .entry-title {
    position: relative;
    top: 100px;
    text-align: center;
}
.blog .entry-content, .blog .entry-secondary-meta, .blog .entry-header .entry-meta {
    display: none;
}
```
ispirityou · Member · May 11, 2016 at 8:03 am
Copy link
Tnx. It works perfectly.
Damir
thesacredpath · Member · May 11, 2016 at 5:14 pm
Copy link
Awesome Damir, and you are welcome.
ispirityou · Member · May 11, 2016 at 7:52 pm
Copy link
I need few more settings.
1. How can I make it that my blog posts are arranged in two rows instead one under the other as it is now. Images should be separated. Widget “category” should be positioned more on the left side of the screen.
2. The same appearance settings as above should be applied when one clicks one of blog categories
3. When one opens (click on) blog post Featured Image should not be visible as part of the post and as part of the post title. Instead of that image go to no. 4.
4. How can I put my front page image as a background image for ALL TITLES that appear on my site. For instance, when you click on a blog category you go to the page with category title which has some background image. I would like to have my front page image in each title which appears on my web site. Background image of a title is narrow and that is ok, therefore it is necessary that the center of the front page image is visible as a background of the title.
Tnx
Damir
thesacredpath · Member · May 11, 2016 at 10:31 pm
Copy link
1. How can I make it that my blog posts are arranged in two rows instead one under the other as it is now. Images should be separated. Widget “category” should be positioned more on the left side of the screen.
2. The same appearance settings as above should be applied when one clicks one of blog categories

Damir, doing columns can be a touch tricky, but add this and see how it works for you. I’ve limited this to 800px and wider screens/windows since the titles will become a bit issue. Also, your titles are going to have to remain pretty short.
```
@media screen and (min-width: 800px) {
.blog .site-main, archive .site-main {
	.column-count: 2
    -moz-column-count: 2;
	-webkit-column-count: 2;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;

}
.blog .site-main .hentry, .archive .site-main .hentry {
    padding-left: 50px;
	display: block;
}
}
```
3. When one opens (click on) blog post Featured Image should not be visible as part of the post and as part of the post title. Instead of that image go to no. 4.
```
.single .hentry .entry-thumb {
    display: none;
}
```
4. How can I put my front page image as a background image for ALL TITLES that appear on my site. For instance, when you click on a blog category you go to the page with category title which has some background image. I would like to have my front page image in each title which appears on my web site. Background image of a title is narrow and that is ok, therefore it is necessary that the center of the front page image is visible as a background of the title.

Try this and see what you think.
```
.archive .page-header {
    background: url("https://damirbutkovic.files.wordpress.com/2016/04/cropped-cropped-image-2.jpg") no-repeat scroll center center;
}
```
I don’t have a parent element (div) to apply the translucent dark overlay to though.

No items found.