Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #776327

    Hi, I wondered if you could help me with a problem I’m having with full width portfolio grids.
    I want to have a completely white background including the categories menu. My main site colour is a dark grey and where there are gaps in the thumbnails text when the browser window is re-sized you can see through it and see the dark grey in places.
    see this near bottom of page then resize the window width

    I’ve styled and colored the title background text colours etc no problem with this code

    .grid-entry .main_color .avia-arrow, .main_color .grid-content { background-color: white!important; color: white!important; }
    .main_color .grid-entry-title { background-color: white!important; color: #3f3f3f!important; }
    .grid-entry .inner-entry { box-shadow: none!important; }

    …. but I need the whole portfolio grid background to be white

    please see this image to help explain Portfolio Grid background image example

    Now, one fix would be to put it in a full width color section with background set to white. I tried this and creates two problems
    1) The categories menu is now not centered, it stuck to the left of screen
    2) the color behind the categories text is still dark grey.. I used this to change it to white

    #js_sort_items a {
        background: none repeat scroll 0 0 white !important;

    But it then left little dark grey squares in between each title

    SO there must be a way of doing it without putting in a color section and I’m just not getting it
    Many thanks


    Hey David,

    Please try the following in Quick CSS under Enfold->General Styling:

    .home .sort_by_cat, .home .grid-sort-container {
      background-color:white !important;

    Best regards,


    Brilliant thanks Rikard, I just could not find the answer and this works great!

    two things
    1) this only works on my home page, Can I make it affect ALL portfolio grids on ALL pages?
    2) how do I change the colour of the categories menu text and the hover over state to be different to my theme settings?

    Thanks again


    Hi David,

    1. Just remove the .home bit from the code I sent you, then it should apply on the entire site.

    2. I’m not sure I understand what you are looking to change, could you post a screenshot of that too please?

    Best regards,


    Hi, sorry for delay in replying, sorry I should of worked out to just remove the .home ! that works great

    with regards to point two, I just want to be able to change the colour of the text and hover states etc of the portfolio categories menu text, see image attached, for some reason anything I tried didn’t work. Just make them a slightly darker grey and change the yellow I use throughout as it doesn’t work well on white, many thanks

     Categories menu text image

    Many thanks


    Try this code in the General Styling > Quick CSS field:

    .main_color #js_sort_items a {color: #222!important; }

    I see you asked to change the yellow, but I’m not sure what to so this code makes it all the same :)

    Best regards,


    I have a portfolio grid where the sort feature was showing up on a dark background color, I used to follow quick code to correct the background to white.

    #js_sort_items a {
    background: none repeat scroll 0 0 white !important;

    It is still not working correctly the white only appears where the text is and not the whole section.
    Website link attached


    Solution remove the “a”

    #js_sort_items {
    background: none repeat scroll 0 0 white !important;


    Thank you for sharing your solution.
    As this thread is quite old now we will close it. Thank you for using Enfold.
    Feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Portfolio grid complete container background colour’ is closed to new replies.