Small formatting changes

Hi there,

Just a couple of very small questions about this page http://www.eurasianwhispers.com/shop-2/

  1. Can you please tell me how I can make the links ‘Title’ and ‘Author’ be underlined when they are hovered over?

  2. With regards to the button ‘Show Details’, can you please tell me how to

  • Change the color of the background?

  • Change the color of the background when it is hovered over?

  • Make the words inside bold?

  1. Do you know how I can centre the line under the image and the button - it’s stuck to the left and I can’t figure out how to move it…

Thank you!
EW

Hi @riugn557,

Thanks for writing in.

  1. First, you need to add class to the text element so that you can specify the changes to the title and author only. Then, use this CSS code below. For example, you have .underlinedtext class.

    .underlinedtext a:hover{
    text-decoration:underlined;
    }

  2. You can check the link below on how to customize your button:

For the word to make bold, you can use font-weight attribute on your hover CSS.

3.Change this code yours in your custom CSS:

From

.el20.x-line {
    width: 75%;
    max-width: 75%;
    margin: 30px 0px 0px 0px;
    border-top-width: 1px;
    border-style: solid;
    border-color: hsla(0,0%,0%,0.43);
font-size: 1em;

}

To

.el20.x-line {
    margin: 0 auto;
    margin-top: 20px;
    width: 75%;
    max-width: 75%;
    border-top-width: 1px;
    border-style: solid;
    border-color: hsla(0,0%,0%,0.43);
    font-size: 1em;
}

Let us know how it goes.

Thanks.

Hi Nico,

  1. I added <p class="underlinedtext"> before the text and then added:

    .underlinedtext a:hover{
    text-decoration:underlined;
    }

in the CSS, but it didn’t do anything. Do you know what I’m doing wrong here?

2+3) Thank you, worked perfectly!

Cheers,
EW

Hello @riugn557,

Thanks for updating. Actually there is a small typo mistake in the code. Please replace the code with following:

.underlinedtext a:hover {text-decoration: underline;}

Thanks.

Hi Prasant,

Thank you, it works fine now.

Just one more thing: do you know how I can center the line below that’s below the image and button?

Cheers,
EW

Hi There,

Set the Line element left and right margin to auto, that should center it since you set a width to the line.

Hope it helps,
Cheers!

Hi Friech,

That’s great, thank you.

Cheers,
EW

We are delighted to assist you with this.

Cheers :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.