Pro / Format Blog page

Support
#1

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!

#2

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!

#3

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!

#4

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

#5

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
#6

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!

#7

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

#8

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.

#9

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!

#10

Hi,

You can try this code instead.

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

Change 0.5 to adjust.

Hope that helps.

#11

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!

#12

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.

#13

Thank you very much! Perfect!

#14

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

#15

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

#16

Hi There,

Please add the following CSS to Theme Options CSS

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

Hope it helps

#17

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

#18

Hi there,

You’ll have to add this too

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

Hope this helps.

#19

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?

#20

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: