Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 28, 2020 at 10:46 pm #1208020
    bnewman1

    Hello,

    I am attempting to create a lookalike of a live site and am having some issues matching the exact styling on a portfolio grid. Namely the category selections.

    I’ve used some CSS to create and color some buttons and eliminate the slashes, but I cannot quite get my style to match.

    As you can see, the portfolio grid buttons darken upon selection and the text becomes bold. All I have been able to do is have my text change color (I believe this is predetermined in the theme options’ general styling).

    Is there any way to have the category selections become a dropdown on mobile? I have struggled spacing those neatly as well.

    Thank you!

    -Alek

    April 29, 2020 at 11:01 pm #1208356
    bnewman1

    For clarity- I essentially would like to have the category button background and font color change when selected.

    May 1, 2020 at 5:22 am #1208715
    Rikard

    Hi,

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

    a.active_sort {
  background: green;
  color: blue; 
}

    Making the selection choices a dropdown on mobile would be out of scope of theme support unfortunately.

    Best regards,
    Rikard

    May 1, 2020 at 3:21 pm #1208848
    bnewman1

    Hi Rikard,

    No change using that CSS.

    The main CSS I am using to currently alter the category buttons is the below:

    #js_sort_items {
    font-size: 16px;
    font-family: ‘raleway’;
    font-weight: bold;}

    #js_sort_items .text-sep {
    color: white;
    padding: 10px;
    }

    .main_color #js_sort_items a {
    background: #928b88;;
    padding: 5px 20px;
    color: white;
    outline: 8px solid white;
    }

    Is this helpful? I can provide site access if it would be of use.

    Thank you,

    -Alek

    May 2, 2020 at 8:03 am #1209062
    Rikard

    Hi,

    This CSS is already applying on your site:

    .main_color #js_sort_items a {
    background: #928b88;
    padding: 5px 20px;
    color: white;
    outline: 8px solid white;
}

    The 3 last arguments need !important after them though since they don’t override the default CSS.

    Best regards,
    Rikard

    May 5, 2020 at 6:07 pm #1210044
    bnewman1

    Thank you. I will add.

    Is there any CSS that you can provide that will center and space the category selection elements on mobile?

    May 5, 2020 at 11:03 pm #1210115
    Nikko

    Hi bnewman1,

    Please try adding this CSS code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  .main_color #js_sort_items .sort_by_cat {
    text-align: center;
  }

  .main_color #js_sort_items a, 
  .main_color #js_sort_items span {
    display: inline-block;
    float: none;
  }
}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.