Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 12, 2015 at 5:58 pm #502142
    nayc

    Hello,

    I followed the instruction about adding a widget area to the header. The side is fullwidth and I like to add two areas left and right of the header for social icons.

    So I created two widget areas (“header” and “social_header”) and added the following code to the functions.php:

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
	dynamic_sidebar( 'social_header' );
}

    It is working so far but there are creating a big white box trough the header. I tried to adjust them by css but nothing changes (#header .widget {…} ).

    Hope you can help! Thank you!
    Nico

    September 13, 2015 at 9:07 am #502233
    Rikard

    Hi Nico,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    September 13, 2015 at 1:06 pm #502298
    nayc

    Here they are.
    Kind regards,
    Nico

    September 14, 2015 at 4:25 am #502427
    Rikard

    Hi,

    It looks like the widget you are using there is causing some problems, how would you like the widget to be placed?

    Best regards,
    Rikard

    September 14, 2015 at 8:41 am #502522
    nayc

    Hi,

    thank you. That is good to know. If you do not feel responsible for this issue I can contact the support of Easy Social Share Buttons.

    If you dont mind I would like to have two widget areas, one on the left and one on the right of the header. They schould be aligned to the frame with a margin of a few pixel and sticky like the header. I think you can see how it is suppose to look like at the main page, just without the big white space. Are there two different css commands for the widget I created? I am not sure if that was the best approach to implement these social icons.

    September 14, 2015 at 5:35 pm #502933
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    div#essb_displayed_shortcode_1092317505 {
    width: 20%;
    float: right;
    margin-bottom: -40px;
    position: relative;
    top: 70px;
}
#essb_displayed_shortcode_1769816463 {
    width: 20%;
    float: left;
    margin-bottom: -60px;
    position: relative;
    top: 70px;
}

    Cheers!
    Yigit

    September 15, 2015 at 11:41 am #503230
    nayc

    Unfortunately, your code did not help. I managed to solve the problem but it is a very messy work around. For these with the same issue:

    I made two widget areas and added the social widget of Esay Social Share Buttons to it. Lets call them “social1” and “social2”. But this areas can not be implemented because the plugin produces strange layout problems.
    So I made another widget area according to this manual: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ . In this area I created two text areas where I included the “social1” and “social2” widgets with the plugin “widgets on pages”.
    To sum up:
    2 widget areas: each with a social plugin widget
    enfold header widget area: 2 text widgets with the shortcode [widgets_on_pages id=”social1/social2″]

    For CSS styling have a view at the live page and look for the div ID of the text areas. You can adjust the two text areas with this code:

    div#text-2 {
  left: 20px;
  padding-top: 0;
  position: absolute;
  top: 10px;
}
div#text-3 {
 right: 20px;
float: right;
  padding-top: 0;
  position: absolute;
  top: 10px;
}

    Kind regards,
    Nico

    September 15, 2015 at 11:43 am #503236
    Yigit

    Hey!

    Glad you figured it out! Let us know if you have any other questions or issues

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘two custom widgets in header and css styling’ is closed to new replies.