Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 18, 2018 at 11:45 pm #998811
    OhYa1337

    I need to have several cells that will change the background color & text color to white on hover over, is there a way to do this within enfold?
    Each cell needs to have its own background color, text on each would all go to white on hover.
    (Each cell is a link to a page)

    Here is an example as an animated gif,
    Example of Mouse Over Color Change

    if not, do you know of any plugin that can or do i need special css per cell?

    • This topic was modified 6 years, 1 month ago by Victoria.
    August 19, 2018 at 12:20 am #998821
    Mike

    Hey OhYa1337,
    This can be done with a little css, please link to the page with the cells, so we can assist with the css.
    How to add a link to a column or cell
    How to add a on-hover background color to a column

    Best regards,
    Mike

    August 19, 2018 at 1:48 am #998834
    OhYa1337

    custom CSS field for ALB elements!!!
    Wow, Life Saver!
    That is awesome, didn’t even know it was there!
    Thanks So Much!
    Done!

    August 19, 2018 at 2:52 pm #998927
    Mike

    Hi,
    Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    August 23, 2018 at 3:51 am #1000569
    OhYa1337

    Almost, 1 last thing on this.
    On the Image element, when you hover over it there are options like circle, square, etc
    what are the style names for the image element?
    Is there a list of names for the various elements?

    August 23, 2018 at 12:11 pm #1000697
    Mike

    Hi,
    I believe that you are referring to the image overlay when a image is a link, a circle & arrow,
    while this can be changed with some css, there isn’t a standard built-in option other than the circle & arrow.
    Please see the Image Element Documentation
    We maybe able to assist if you have a certain style in mind.

    Best regards,
    Mike

    August 25, 2018 at 5:25 am #1001468
    OhYa1337

    Ya, im trying to figure out how to do something like they have on the site listed in private content
    The mouse overs on those pictures are really nice – they move up & show text

    -PS, it only shows on a PC on around 1080 resolution or better

    August 25, 2018 at 6:23 am #1001475
    Mike

    Hi,
    Sorry, I can’t really think of an equivalent for that in Enfold, but if you add the code in the DropBox text file in the Private Content area to a “code block” element on a page with no sidebar, it should would for you. You can then change the image url’s and text to suit.

    Best regards,
    Mike

    September 19, 2018 at 10:14 pm #1012039
    higrace7391

    Can you help me with the same problem? I want color changing background and text on mouse over for columns as well.

    September 19, 2018 at 11:33 pm #1012056
    OhYa1337

    Higrace, Here’s what I ended up doing,
    Please turn on custom CSS field – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    and give your column element a custom CSS class
    Here’s an example of the code I used for 1 of my columns, just make as many class names as needed with different values.

    .redcolumn:hover {
  color: #d90000!important;
  background-color: white!important;
  opacity: 1 !important;
}
    September 20, 2018 at 12:01 am #1012066
    Mike

    Hi,

    @OhYa1337     thank you for sharing.

    @higrace7391     let us know if OhYa1337’s suggestion worked for you.

    Best regards,
    Mike

    September 20, 2018 at 4:27 pm #1012383
    higrace7391

    It is sad that the css above is not working with my site.

    September 21, 2018 at 2:38 am #1012572
    OhYa1337

    Did you add the css to the Quick CSS section under General Styling?
    To add the CSS, please go to Enfold theme options > General Styling> and add the CSS Code in the Quick CSS box
    and then
    Turn on Custom CSS Class field for all ALB Elements
    Web elements with a unique CSS class name are easy to target using custom CSS and style them. When the custom CSS class name option is enabled for the Advanced Layout Builder elements. A new field called Custom CSS Class will appear in the element pop-up options.
    To enable it, please go to Enfold theme options > Layout Builder and check “Show element options for developers”:

    September 21, 2018 at 4:35 am #1012607
    Mike

    Hi,

    @higrace7391     I took a look at you page and added this css to your WordPress > Customize > Additional CSS for the first box, on hover the background will turn red and the icon and text will turn white. I added the class to the element as @OhYa1337 described, so please use this first one as a model to follow, and be sure to use a different class for each box, such as “bluecolumn”, “greencolumn” etc.

    .redcolumn:hover {
  background-color: #d90000!important;
	color: #fff !important;
}
.redcolumn:hover > .meta-heading h3.av-special-heading-tag {
	color: #fff !important;
}
.redcolumn:hover > .av_font_icon a:before {
	color: #fff !important;
}

    2018-09-20_223256

    Best regards,
    Mike

    September 21, 2018 at 4:13 pm #1012821
    higrace7391

    THANK YOU SO MUCH! It works perfectly well!!

    September 21, 2018 at 11:40 pm #1012944
    Mike

    Hi,
    Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    September 24, 2018 at 8:12 pm #1013810
    higrace7391

    Yes! Thank you!

    September 24, 2018 at 8:51 pm #1013837
    Victoria

    Hi,

    Best regards,
    Victoria

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘color changing background and text on mouse over for columns?’ is closed to new replies.