How to change hero box in featured image

me too!

I’d also like to know how to move the hero box. I’d like it moved to the left and a little lower. As you can see, it’s covering the main part of my featured image.

myrutherford.org

thank you!

Tamar

Asakasan, thanks for your patience while I’ve been away. I’ll answer your questions below.

tamarvb – by responding in Asakasan’s thread to ask for help, you (unintentionally, I’m sure!) removed it from the “unanswered threads” list, which is where many forum helpers find questions needing answers. If you still need assistance, could you please start your own new thread and we’ll be glad to help you one on one there. Thanks!

Asakasan – by “bumping” your thread you inadvertently did the same thing, which is likely why no one saw your questions. ?? Next time please don’t bump and you’ll be more likely to get help. Thanks for your understanding!

It’s always easiest to help if you provide a link to your site – that could be another reason you didn’t get any replies here. ?? I looked back through your previous questions and found it: entraredasolo dot com.

I’d like to know if it’s possible to get the hero box, in my homepage featured image, more transparent and change its size; if it’s possible to change font customization in the box, and if it’s possible to make the box links to another page.

I don’t see a featured box on your site currently, did you decide to remove it or do you still need help with this? If you still need help, could you put it back so I can have a look and let me know in what ways you’d like to change the font and size?

Any link in a post can be set to open in a new window or tab like this:

<a href="https://www.remarpro.com" target="_blank">My link</a>

Hi Kathryn, thanks for your answer. I’ll remember your suggests and I’ll be more respectful of wp netiquette.

The reason why you didn’t see a featured box is that I shifted it under the featured image. But I’m not so satisfied of this “arrangement”.

So, I still need your help, if you want to.
https://entraredasolo.com

Now the featured box is at its placement. ??

Something like this in your child theme would increase the transparency of the “hero” box:

.front-page-content-area .with-featured-image {
   background-color: rgba(255, 255, 255, 0.8);
}

You can adjust the 0.8 value as you like; 1.0 is a solid colour.

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

If you still need help changing the font and size of the featured box, please let me know specifically what you’d like it to look like so I can assist – otherwise I’m just guessing. ??

Thanks Kathryn, I’ve read some of those posts about CSS but it’s still very difficult to me. I’ll read them again.

Thanks for helping me.

About font of the featured box, it was easy and I provided it by myself.

But I ‘d like to make that box smaller.

Furthermore, I’d like to make the box not so centered in the featured image, and move it above. Don’t know if I was plain. ??

Hi,

Sorry Asakasan for causing your question to be removed from the “unanswered threads”.

Kathryn, thanks for the info, I’ll start my own thread!

Thanks,

Tamar

But I ‘d like to make that box smaller.

You can narrow your box and remove some of the padding like this, adjusting the values as you like:

.front-page-content-area .with-featured-image {
  padding: 0.8em;
  width: 300px;
}

You can move it to the top of the featured image like this:

.hero-container-inner {
  vertical-align: top;
}

If you’d like to add some space above the hero box and not have it touching the menu, you could use this instead, again adjusting the padding value as you like:

.hero-container-inner {
  vertical-align: top;
  padding-top: 30px;
}

Thanks Kathryn for resolving my topic. ??

You’re welcome!