Pro / Format Blog page

Hi there,

Question 1:
I’m working on a page here:

http://padthai.decorolux.com/

And I would like to format the blog page. Where does X keep exactly the files to do this?

Question 2:
Same page: http://padthai.decorolux.com/

If you hover over the featured image an animation happens with a chain in the middle. How can I change this chain to a .png image?

Thanks!

Hi There,

Thank you for writing in, 1) you need to create your own home.php on the child theme if you need a Custom Blog Posts Index Page.

https://codex.wordpress.org/Creating_a_Static_Front_Page#Custom_Blog_Posts_Index_Page_Template

  1. You can add this on Theme Options > CSS
.entry-featured .entry-thumb:before {
	content: url(YOUR IMAGE URL HERE);
}

Replace the YOUR IMAGE URL HERE with the actual URL of your Image. Use an Image with 70px height and width.

Cheers!

Hi there!

Thanks! I managed to input the image, but the image is transparent. Any idea how I can change it so that it isn’t transparent?

Thanks again!

Hi There,

You can add the following code to them options CSS but it will also affect your overlay which is connected.

a.entry-thumb:hover img {
   
    opacity: 0;

}

Hope it helps

Hey,

In regard to question 1 you can also use the Essential Grid or The Grid plugin to format the blog page. These plugins are included with the theme, but require license validation to download. I personally use these plugins, they are easier to use compared to editing theme files in my opinion and very customizable, you can easily change out mentioned in question 2 that chain icon with those plugins :grin:

Hope that helps

1 Like

Thanks, is there any way to format the image in the “content: url(http://padthai.decorolux.com/wp-content/uploads/2017/09/logofinalv3.png)” css? Problem is, the dimensions of the round where the logo fits is around 60px. If I export the logo in 60px it looks rather pixelated. So I would like to export it in a better quality and input it there like that. Also, is there a way to change the background color on hover behind the “content” from red to white?

Thanks!

Thanks for the tip, I’ll try that if this doesn’t pan out. :slight_smile:

Hello There,

Thanks for updating in!

You can upload a bigger image and modify the css you are using. You will have to remove this code first:

.entry-featured .entry-thumb:before {
	content: url(http://padthai.decorolux.com/wp-content/uploads/2017/09/logofinalv3.png); 
}

You will have to replace it with this code instead:

.entry-featured .entry-thumb:before {
    content: "";
    background-color: #fff;
    background-image: url(http://padthai.decorolux.com/wp-content/uploads/2017/09/logofinalv3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70%; 
}

And the code above already include the change of the background color:

Hope this helps. Please let us know how it goes.

Thanks, you’re awesome!

1 last question. Is there a way to have the black background remain a little transparent on the hover effect?
I tried resetting the opacity, but the background seems to replace the featured image.

Thanks again!

Hi,

You can try this code instead.

a.entry-thumb:hover img {
    opacity: 0.5;
}

Change 0.5 to adjust.

Hope that helps.

Hi Paul,

Thanks for the quick response!
This does half of what I need. The background becomes transparent, however, background-image: url(http://padthai.decorolux.com/wp-content/uploads/2017/09/logofinalv3.png); I would like this to stay opacity:1;

Is there a way to separate these two layers?

Thanks!

Hi there,

Please change that CSS to this,

a.entry-thumb:hover img {
    opacity: 0.5;
}
.entry-featured .entry-thumb:before {
z-index: 99;
}

Hope this helps.

Thank you very much! Perfect!

On behalf of my colleague, you’re welcome. Cheers!

One last question, is there a way to make the circle in the middle bigger, so the logo can be somewhat larger inside it?

Hi There,

Please add the following CSS to Theme Options CSS

.entry-thumb:before {
   
    width: 100px;
    height: 100px;
}

Hope it helps

Hi! How can I remove the “chain” image entirely? I just want the image to darken.

Hi there,

You’ll have to add this too

.x-recent-posts .x-recent-posts-img:after {
display: none;
}

Hope this helps.

Hmm. That didn’t do anything. Can you post the full code that I would need to add to get rid of the chain image entirely?

Hi There,

Please update the previous CSS to this:

.entry-thumb:before,
.x-recent-posts .x-recent-posts-img:after {
display: none;
}

Hope it helps :slight_smile: