Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #658500

    Hi guys,

    I’ve successfully used your documentation to add a new, custom widget to the header area (i’ve named them header1 and header2).
    The code in the functions.php file for the two headers are:

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    if(is_front_page()){
    	dynamic_sidebar( 'header1' );
    	dynamic_sidebar( 'header2' );
    }
    }

    However, the two custom widgets needs to be located two different places, but for some reason the CSS code wont work properly since both custom widget headers are only affected by the #header2 .widget code (below):

    /* Header clock CSS */
    #header1 .widget {
    left: 91%;
    padding-top: 0px;
    position: absolute;
    top: 80%;
    padding-bottom: 0px;
    z-index: 1;
    }
    
    /* Header ticker CSS */
    #header2 .widget {
    left: 75%;
    padding-top: 0px;
    position: absolute;
    top: 90%;
    padding-bottom: 0px;
    z-index: 1;
    }
    #658507

    Hey Dbertelsen,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Yigit

    #658516

    Hi Yigit,
    Yes of course. I’ve provided it in the Private Content section

    #659332

    Hi,

    authentication login is needed and credentials you’ve provided do not work for it. Please check.

    Best regards,
    Andy

    #659333

    Oh sorry,
    Try again now

    • This reply was modified 8 years, 5 months ago by Dbertelsen.
    #659351

    Hi,

    I can see one header widget only. Where is the 2nd?

    Best regards,
    Andy

    #659383

    Hi Andy,
    If you go to Appearance -> Widgets -> You will see two headers named header1 and header2. One contains a clock and another contains a tiny stock ticker (shortcode) :)

    Andin the functions.php file I have the following code:

    // Below code is to only show header clock on front page
    
    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    if(is_front_page()){
    	dynamic_sidebar( 'header1' );
    	dynamic_sidebar( 'header2' );
    }
    }

    And I have the following Custom CSS styles:

    /* Header Widget header1: clock CSS */
    #header .widget {
    left: 91%;
    padding-top: 0px;
    position: absolute;
    top: -100%;
    padding-bottom: 0px;
    z-index: 1;
    }
    
    /* Header Widget header2 Stock Ticker */
    #header2 .widget {
    left: 50%;
    padding-top: 0px;
    position: absolute;
    top: -20%;
    padding-bottom: 0px;
    z-index: 1;
    }
    
    #659755

    Hi,

    Please update the theme to the latest version. That should fix any issues you are currently experiencing :)

    To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)

    If that does not help, feel free to reply here and we will take a closer look at the issue. In that case please also add your WordPress login credentials (in the “private data” field) so we can take a look at your admin area

    Best regards,
    Andy

    #660504

    Hi Andy,
    Wont an update override my current modifications/settings/designs? I am running in a child theme, but still?

    #661586

    Hi,

    The “#header2 .widget” selector is incorrect. Use “#header #text-8” instead. This is the proper selector for the stock ticker.

    Best regards,
    Ismael

    #663341

    Thanks a lot Ismael! You’re the man!

    #663363

    Hi,

    glad Ismael could help you. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Custom CSS for two custom widget headers?’ is closed to new replies.