Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 5, 2020 at 2:44 am #1209777
    cuccarini

    Hello,

    I have changed in CSS the behavior of buttons on mouse hover, but the behavior of the “read more” button that is below post in blog did not change at all.
    The code in CSS is the following:

    /* Background on hover */
    a.avia-button:hover {
    background: rgb(80,80,80) !important;
    }
    It is ok for all the other buttons but not for those in posts. Can you help me please?

    Best regards
    Andrea

    May 5, 2020 at 10:42 am #1209874
    cuccarini

    Hello,

    By t way, when I am looking the details inside a post, I would like to have 3 buttons with the same standard behavior, instead of the normal “post comment” button. Is it possible to make this?

    Thank’s in advance for your cooperation.
    Andrea

    • This reply was modified 4 years, 6 months ago by cuccarini.
    May 10, 2020 at 3:08 am #1211561
    Mike

    Hi,
    Sorry for the late reply and thanks for the login, I didn’t find any “read more” buttons, but the class for the “read more” buttons is read-more-link so your css should look like:

    .read-more-link:hover {
background: rgb(80,80,80) !important;
}

    For the “post comment” button your css should look like:

    input.submit[value="Post Comment"]:hover {
background: rgb(80,80,80) !important;
}

    Best regards,
    Mike

    May 10, 2020 at 12:55 pm #1211631
    cuccarini

    Hi Mike,

    everything was fine, but the background color does not contrast so much with the text color inside “red.more link”, so I would like to change also the text color with white for example. Thanks in advance for your help.

    Andrea

    May 10, 2020 at 12:58 pm #1211634
    cuccarini

    I forget to add that to change the behavior of “post comment” button, I would like it was rounded and similar to all the other buttons.
    Thank you again.

    Andrea

    May 10, 2020 at 4:30 pm #1211657
    Mike

    Hi,
    To add your rounded style to the “post comment” button, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    input.submit[value="Post Comment"] {
    color: #ffffff!important;
    border-color: #062857!important;
    border-radius: 100px!important;
    border-width: 2px!important;
    font-size: 16px!important;
    font-weight: bold!important;
    background-color: #084a79!important;
}
input.submit[value="Post Comment"]:hover {
background: rgb(80,80,80) !important;
}

    After applying the css, Please clear your browser cache and check.
    2020-05-10_102645.png

    Best regards,
    Mike

    May 11, 2020 at 12:26 am #1211715
    cuccarini

    Than’k Mike,

    it was fine at first … unfortunately after I moved my website in the final place and activate WPML. In this new situation this does not work … maybe a problem related to this changement … I am sorry, it was my fault.

    Thank’s again.

    May 11, 2020 at 3:11 am #1211721
    Mike

    Hi,
    I checked and the css should still work for the English side, for the Italian side please add this css:

    input.submit[value="Pubblica il commento"] {
    color: #ffffff!important;
    border-color: #062857!important;
    border-radius: 100px!important;
    border-width: 2px!important;
    font-size: 16px!important;
    font-weight: bold!important;
    background-color: #084a79!important;
}
input.submit[value="Pubblica il commento"]:hover {
background: rgb(80,80,80) !important;
}

    Then clear your browser cache and check.

    Best regards,
    Mike

    May 12, 2020 at 1:25 am #1211938
    cuccarini

    Hi Mike,

    well the italian side is OK but the english side instead is in the initial situation. Strange, because the code was apparently correct. I do not know why it does not work properly!

    Also I notice a second problem related to the icon-grid of activities in the homepage. With a large display (i.e. >= 1920 X 1080) it is misplaced, instead with smaller one everything it correct … again a strange behavior … That’s all.

    Sorry to bother yo u again, thank you … best regards.
    Andrea

    May 12, 2020 at 1:57 am #1211947
    cuccarini

    The problem with the icon-grid was there before activate WPML… strangely the english site instead work properly!

    May 12, 2020 at 1:59 pm #1212175
    Mike

    Hi,
    For the code for the button, I checked your English Quick CSS and found that the English version of the css was not included. I corrected, please clear your browser cache and check.

    Best regards,
    Mike

    May 12, 2020 at 4:07 pm #1212230
    cuccarini

    Hi Mike,

    You were right … now it is OK! Now there is only the icon-grid problem missing … Thanks.

    Best regards
    Andrea

    May 13, 2020 at 12:34 pm #1212585
    Mike

    Hi,
    Glad we could help, for your other issue please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 1500px) { 
#attivita ul.avia-icongrid > li:nth-child(7) {
	clear: left !important;
}
}

    Then clear your browser cache and check.

    Best regards,
    Mike

    May 13, 2020 at 5:03 pm #1212661
    cuccarini

    Hi Mike,

    I put your code in the quick CSS but the result was not the expected. My secondary display is 1920 X 1080 wide.

    Anyway, using the translated homepage in English I found an interesting thing, if I put the same icon-grid of the italian site (i.e. same content and number of item) the resulting icon grid was misplaced also there … after I translated the icon text in English and now the icon grid for English is correct.

    Then seems to me that the problem is not only related to the size of the display, but also to the dimension of text inside the items. If the text of some item is big … there may be problems, If text is short … everything is always fine. Maybe this can help you to find a solution … thank you so much.

    Andrea

    May 14, 2020 at 11:48 am #1212916
    Mike

    Hi,
    Thanks for the feedback, probably when you translated the element and moved it to another page the ID changed and the css didn’t work. In the css I used the ID #attivita with the expectation that this css would not work on other pages.
    So on your other pages please try adding the ID to the element for the css to work.

    Best regards,
    Mike

    May 14, 2020 at 12:19 pm #1212924
    cuccarini

    Well Mike,

    your point was not real in this case, as I wrote the problem was really subtle and it was actually related to the length of the lines in the item extended description, but finally I found the solution.
    The solution was simply to add a CR (carriage return) to break the lines in the extended description of the items, after this, everything went back in place !!

    You can close the ticket now … thank you very much for your help.
    Andrea

    May 14, 2020 at 12:21 pm #1212925
    cuccarini

    I suggest to add some explanation in the icon-grid documentation to avoid the same problem to other users.

    May 14, 2020 at 12:32 pm #1212930
    Mike

    Hi,
    Thanks for sharing your solution, I will submit it to the team. We will close this now, thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Change button background color on hover in post "read more" button’ is closed to new replies.