Support » Theme: Enigma » How to change color of multiple items – Enigma

  • Resolved hbran

    (@hannahebrantley1)


    Hi! I am new to WordPress and still figuring out the custom CSS.

    I am using the enigma theme. I would like to change:
    -Color of border around the hours & info sidebar widget (I have the JetPack and Custom Widgets plugins)
    -Color of the left border on the testimonials/blockquotes
    -Color of the sidebar homepage navigation menu (the one with the arrow and the icons for home, etc.) Also, is there a way to only display this on the homepage?

    (All of those are default purple)

Viewing 15 replies - 1 through 15 (of 19 total)
  • Weblizar

    (@weblizar_support)

    Hi,

    Please share your site URL and COLOR-CODE.

    Thanks

    hbran

    (@hannahebrantley1)

    d1f.8dd.myftpupload.com

    color code: #18334b

    I would also like to change the background of some of the homepage sections. I have services, portfolio, and contact sections enabled. I would like to use an image on one (portfolio) and a solid color on the other two (contacts & services). If I could have some help with that as well it would be much appreciated!

    Thank you!

    hbran

    (@hannahebrantley1)

    Also, there is a border above my nav menu (between the menu and the header) with the default purple. I changed all of the other colors in the nav menu successfully but that I cannot seem to get rid of.

    Weblizar

    (@weblizar_support)

    Hi..

    Please go to Admin Dashboard >> Appreance >> Theme Options >> Theme General Options.

    Now copy below CSS code into Custom CSS editor.

    .navigation_menu {
        border-top: #18334b !important;
        background-color: #18334b !important;
    }
    
    .navbar-default .navbar-nav > .active > a
    {
      background-color: #18334b !important;
    }
    
    .navbar-toggle {
        border: 1px solid #18334b !important;
    }
    
    .img-wrapper:hover .enigma_home_portfolio_caption {
        background: #18334b  !important;
        border-left: 1px solid #18334b  !important;
        border-bottom: 4px solid #18334b !important ;
        border-right: 1px solid #18334b  !important;
    }
    
    .enigma_home_portfolio_caption {
        border-bottom: 4px solid #18334b !important;
    }
    
    .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a:hover{
            background-color: #ffffff !important;
            border:2px solid #18334b !important;
            color:#18334b !important;
    }
    
    .enigma_send_button , #enigma_send_button{
            border-color: #18334b !important;
        background-image: linear-gradient(to bottom, #fff 50%, #18334b 50%) !important;
    }
    
    .enigma_footer_area {
        background: #18334b !important;
    }
    
    .enigma_footer_widget_area {
        background: #18334b !important;
    }
    .enigma_sidebar_widget {
        border-left: 3px solid #18334b !important ;
        border-right: 3px solid #18334b !important;
        border-bottom: 3px solid #18334b !important ;
    }
    
    #scroll_menu a {
        background-color: #18334b !important;
    }
    
    .enigma_sidebar_widget_title {
        background: #18334b !important;
    }
    .enigma_service {
        background-color: COLOR-CODE !important;
    }

    Here COLOR-CODE is replaced by your color code.

    Save the changes.

    Thanks.

    hbran

    (@hannahebrantley1)

    The coding worked perfectly.

    How do I change the background image of a homepage section? For example, the contact us and recent works sections. I want to change the image but keep the parallax.

    When I tried to create a homepage with full-width sections using Magee Shortcodes, it created the sections but they did not span the full width of the page. I am open to using this route as well if I can get the coding to make the sections full width. In addition, the background image I choose does not have the parallax even though I checked that I wanted the image to have the parallax?

    Any advice?

    Weblizar

    (@weblizar_support)

    Hi..

    Please go to Admin Dashboard >> Appreance >> Customize >> Theme Options >> Theme General Options.

    Now copy below CSS code into Custom CSS editor.

    .enigma_project_section::before {
      background: rgba(0, 0, 0, 0) url(IMAGE-URL) repeat fixed 0 0 !important;
    }
    
    .enigma_contact_area:before {
      background: url(IMAGE-URL) fixed !important;
      }

    Here IMAGE-URL is replaced by your image name.

    Save the changes.

    Thanks.

    hbran

    (@hannahebrantley1)

    Great. Thank you. How do I create sections that are full width? So far, when I have tried, my sections are content width.

    I tried the following code in custom CSS:
    body {
    position: relative;
    }

    .wrapper {
    position: relative;
    }

    .container-fullwidth {
    width: 100%;
    overflow: hidden;
    }

    .container .container {
    width: 100%;
    }

    /*
    .container-fullwidth .row .row {
    margin-left: 0;
    margin-right: 0;
    }
    */
    .move-to-top {
    position: fixed;
    }

    hbran

    (@hannahebrantley1)

    To explain further,

    I am attempting to create individual content sections on the “About Us” page. I tried to make the sections full-width; however, when I apply a background, you can see that the section is only content width.

    I am using Magee Shortcodes to create the sections, indicating in the settings that I want the section to be in a container. Then, I added in the above custom CSS in attempt to make them full-width, but it did not work. As this does not seem to be working, is there custom CSS or html that I can use to create the full-width sections?

    Weblizar

    (@weblizar_support)

    Hi..

    You are using different theme, please activate enigma theme first then ask for support.

    Thanks.

    hi
    i change this themes into two language English and Urdu but when i change in Urdu site logo come in middle i want saty on left side plz help me soon as soon

    any one help me how i show widget in menu bar or header plz help me soon as soon

    help me please any here

    Weblizar

    (@weblizar_support)

    HI @nomanzafar

    Please share your site URL.

    Thanks.

    MB Law Ltd

    (@sunnykumar1723)

    Sir
    Please help me I would like to change the color of my Portfolio Section Hover(i.e.Our Achievement Section) from #5C4B51 to #34495E.

    Here is the URL of my site:

    http://mblawltd.fairdeal-enterprises.com

    Weblizar

    (@weblizar_support)

    Hi,

    Please go to Admin Dashboard >> Appearance >> Customize >> Theme Options >> Theme General Options.

    Now copy below CSS code and paste into Custom CSS Editor.

    .enigma_home_portfolio_caption {
        border-bottom: 4px solid #34495E !important;
    }
    .enigma_home_portfolio_caption:hover {
        background: #34495E !important;
    }
    .img-wrapper:hover .enigma_home_portfolio_caption {
        background: #34495E !important;
        border-left: 1px solid #34495E !important;
        border-bottom: 4px solid #34495E !important;
        border-right: 1px solid #34495E !important;
    }
    .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a:hover {
        background-color: #ffffff !important;
        border: 2px solid #34495e !important;
        color: #fff !important;
    }

    Save the changes.

    Thanks.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘How to change color of multiple items – Enigma’ is closed to new replies.