Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 27, 2018 at 9:28 pm #990839
    atifaijaz123

    Hi,

    Can you assign classes to the Portfolio Grid?
    I have two different portfolio grids on one page. I used this code to make the labels red:

    .grid-entry .main_color .avia-arrow, .main_color .grid-content { background-color: red; color: red; }
    .main_color .grid-entry-title { background-color: red; color: white; }

    But I need the second portfolio grid to have blue labels instead. I noticed that the Portfolio Grid doesn’t have a Developer ID option as with other elements. How can I achieve this?

    Thanks!

    July 28, 2018 at 5:48 pm #990945
    Mike

    Hey atifaijaz123,
    You can add a custom class to the portfolio grid by going to Enfold Theme Options > Layout Builder > Show element options for developers and enable.
    Then the custom class option box will show.

    Best regards,
    Mike

    July 29, 2018 at 6:23 pm #991153
    atifaijaz123

    Thanks Mike!

    Changing those settings help, but I seem to be using the classes incorrectly in the Quick CSS editor. How can I differentiate between these two entries using the class “usp”?

    .grid-entry .main_color .avia-arrow, .main_color .grid-content { background-color: firebrick; color: firebrick; }
    .main_color .grid-entry-title { background-color: firebrick; color: white; }

    and

    .grid-entry .main_color .avia-arrow, .main_color .grid-content { background-color: navy; color: navy; }
    .main_color .grid-entry-title { background-color: navy; color: white; }

    I tried using hashtags, but I think I’m using #usp incorrectly.

    July 29, 2018 at 7:53 pm #991268
    Victoria

    Hi atifaijaz123,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 30, 2018 at 2:53 pm #991530
    atifaijaz123

    I have sent a link and here is an image as well:

  • https://ibb.co/jHeKG8

    • The second portfolio grid should have blue labels instead of red labels.

July 30, 2018 at 6:18 pm #991653
Victoria

Hi atifaijaz123,

Thank you.

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css


#us .grid-entry .main_color .avia-arrow, 
#us .main_color .grid-content, 
#us .main_color .grid-entry-title  {
    background-color: navy;
}

If you need further assistance please let us know.

Best regards,
Victoria

July 30, 2018 at 9:25 pm #991719
atifaijaz123

Hi Victoria,

Thanks for your response, but that code isn’t working. I tried inputting it in the Quick CSS and the custom css.

Is there a way to use this code:
.grid-entry .main_color .avia-arrow, .main_color .grid-content { background-color: firebrick; color: firebrick; }
.main_color .grid-entry-title { background-color: firebrick; color: white; }

but with the added #us?

Thanks!

July 31, 2018 at 5:21 pm #991993
Victoria

Hi atifaijaz123,

There was an error in the Quick css field and so the styles did not apply.

I removed the error and the code I gave you makes the second grid titles blue.

If you need further assistance please let us know.
Best regards,
Victoria

July 31, 2018 at 8:14 pm #992067
atifaijaz123

Thank you for your awesome support! It works perfectly now. You can close this thread :)

Best Regards,
Carolyne

August 1, 2018 at 4:03 am #992158
Mike

Hi,
Glad Victoria could help, we will close this now. Thank you for using Enfold.

Best regards,
Mike

  • Author
    Posts
    • Viewing 10 posts - 1 through 10 (of 10 total)
    • The topic ‘Portfolio Grid Classes’ is closed to new replies.