Tagged: , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 29, 2014 at 7:18 pm #311054
    pelyon

    Hi,
    I’d like to have rounded corners on my enfold site.
    1.on all my pages
    2. the header and
    3. menu bar
    4. tabs for tabbed content

    I read the other support posts on the topic and gleaned the following rules so far. Can you provide with other rules to help? Thanks so much.

    -Pelyon

    div#wrap_all {
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    overflow: hidden !important;
    margin: 0 0 20px 0; /* you can remove this if you want */
    }
    #header, .header_bg {
    border-radius: 25px;
    overflow: hidden;

    }

    August 30, 2014 at 3:48 am #311134
    Ismael

    Hi pelyon!

    Thank you for using Enfold.

    First, we would like to see the actual website. We would like to know how you set up the theme initially. We will give you some css snippets after. A screenshot on how you want the theme to look like will help.

    Cheers!
    Ismael

    August 30, 2014 at 10:19 pm #311406
    pelyon

    http://www.pelyon.com/SR_Vol_Design4.jpg

    Hi there,

    Above is a link to a design we want to achieve with rounded corners in the header, menu bar, pages, tabs, and buttons. Is this doable in the Enfold theme? Any CSS snippets you can provide would be greatly appreciated.

    -Pelyon

    September 1, 2014 at 4:01 pm #311887
    Yigit

    Hi Pelyon!

    Using custom CSS code, it is doable. If you could post the link to your website, we can throw in some quick CSS code

    Regards,
    Yigit

    September 1, 2014 at 7:33 pm #311978
    pelyon
    This reply has been marked as private.
    September 2, 2014 at 8:58 am #312115
    Ismael

    Hey!

    Thank you for the info.

    You can use these:

    #header .avia_mega_div {
border-radius: 20px;
}

.container_wrap.container_wrap_first.main_color.sidebar_right {
border-radius: 20px;
}

    The header is a bit tricky, I’m not sure if you can apply a border radius on the main container and menu container separately. Please visit Envato Studio or Werkpress for further customization.

    Best regards,
    Ismael

    September 2, 2014 at 10:15 pm #312526
    pelyon

    Thanks Ismael. That worked to a degree. I have a couple follow up questions based on the design comp I supplied:

    1. If we can’t assign border radius to the menu bar, is there any way to put a separate color,e.g. a gradient color behind the menu bar only?
    2. Is there a way to assign buttons a border radius?
    3. I have applied border radius and background color to tabbed content, but I want to assign a different background color for each tab. Is that possible?
    4. What’s the best way to assign background colors to different widget areas in the sidebar?

    Thanks very much for any assistance you can provide.

    Pelyon

    September 2, 2014 at 10:35 pm #312535
    Yigit

    Hey!

    1- Can you firstly uncheck “Let logo and menu position adapt to browser window” in Enfold theme options > Header Layout > Header Behaviour?
    2- Please add following code to Quick CSS 

    .avia-button {
border-radius: 25px!important;
}

    3- Please post the link to your page where we can see an example
    4- Please refer to my post here – https://kriesi.at/support/topic/how-to-control-the-css-in-widget/#post-310956

    Regards,
    Yigit

    September 3, 2014 at 4:42 pm #312989
    pelyon

    Hi,
    Thanks for your help.

    1. I unchecked the box: “Let logo and menu position adapt to browser window” . So the question remains: 1. If we can’t assign border radius to the menu bar, is there any way to put a separate color,e.g. a gradient color behind the menu bar only?
    2. Done
    3. On this page, you well see I have assigned #fff as a background color to the tabs and the tabbed content. What I’d like to do is assign a different color for each tab and matching content area.
    http://billrusselldesign.com/sr_volunteers/special-events/

    Thanks very much!

    -Pelyon

    September 4, 2014 at 1:41 pm #313367
    Yigit

    Hi!

    Please add following code to Quick CSS
    1-

    div#header_main_alternate {
background: #2d5c88;
background: -moz-linear-gradient(top, #2d5c88 0%, #ebebe2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d5c88), color-stop(100%,#ebebe2));
background: -webkit-linear-gradient(top, #2d5c88 0%,#ebebe2 100%);
background: -o-linear-gradient(top, #2d5c88 0%,#ebebe2 100%);
background: -ms-linear-gradient(top, #2d5c88 0%,#ebebe2 100%);
background: linear-gradient(to bottom, #2d5c88 0%,#ebebe2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d5c88', endColorstr='#ebebe2',GradientType=0 );
border:none; 
}
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main {
padding-top: 182px;
}
.av-main-nav > li > a {
border: none!important;
color: white!important;
}

    3- 

    .tab[data-fake-id="#tab-id-1"] {
background-color: red;
}
.tab[data-fake-id="#tab-id-2"] {
background-color: orange;
color: white !important;
}
.tab[data-fake-id="#tab-id-3"] {
background-color: blue;
}

    Best regards,
    Yigit

    September 9, 2014 at 3:48 am #315535
    pelyon

    Hi Yigit, Thanks for your help.

    http://billrusselldesign.com/sr_volunteers/special-events/#tab-id-1

    I almost have what I need, which is the tabs and the tab-content the same background color. The only thing I’m missing is for the tabs to remain the same color all the time. Currently, they go back to a default color once they are an active tab. For example, the top tab should remain red once its selected. Can you help?

    Thanks,

    -Jason

    September 10, 2014 at 12:22 pm #316450
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .tab[data-fake-id="#tab-id-1"].active_tab {
background-color: red!important;
}
.tab[data-fake-id="#tab-id-2"].active_tab {
background-color: orange!important;
}
.tab[data-fake-id="#tab-id-3"].active_tab {
background-color: blue!important;
}

    Cheers!
    Yigit

    September 10, 2014 at 6:51 pm #316847
    pelyon

    Thanks Yigit, that did it. I had this before without the !important. I should have known. Thanks again.

    -Pelyon

    September 10, 2014 at 6:53 pm #316850
    Yigit

    Hi!

    You are welcome Pelyon, glad we could help! Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘rounded corners in header and menu bar’ is closed to new replies.