WordPress.org

Forums

[resolved] How to align my header widget to the right? (9 posts)

  1. dandanwoo
    Member
    Posted 1 year ago #

    I've been reading all the "how to align the header widget to the right?" topic, but seems none works for my page.

    I spent few days learning to make my social icons widget from the sidebar to the header area, finally I did it. But now I really can't find a solution for moving it to the right side of the header. Please help me!!!

    My site: http://www.icaruscrossfit.com

    Please let me know which file and where exactly I should change the code.

    Thanks in advance!

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    the section is causing invalid html code;
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.icaruscrossfit.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Error Line 51, Column 18: Element li not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

    what code did you use to integrate the header widgets?

    once you have fixed the invalid <li> tag, try to add something like this to the styles:

    #header .block-content { float: right; margin-top: -80px; }

  3. dandanwoo
    Member
    Posted 1 year ago #

    Hi alchymyth, thanks for your quick replies.

    you meant the header.php or the plugin files?

    the header code is here:
    "
    <?php /* Mystique/digitalnature */ ?>
    <!DOCTYPE html>
    <html <?php language_attributes('html'); ?>>

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php wp_title('|', true); ?></title>

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php if(is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?>

    <?php wp_head(); ?>

    </head>
    <body <?php body_class('col-2-right fixed'); ?>>

    <?php
    wp_nav_menu(array(
    'container_class' => 'nav nav-top',
    'menu_class' => 'menu page-content clear-block',
    'theme_location' => 'top',
    'fallback_cb' => '',
    ));
    ?>

    <!-- page -->
    <div id="page">

    <div id="page-ext">

    <!-- header -->
    <div id="header">
    <div class="page-content">
    <div id="site-title" class="clear-block">
    <?php mystique_logo(); ?>
    <?php if(get_bloginfo('description')): ?><div class="headline"><?php bloginfo('description'); ?></div><?php endif; ?>
    </div>

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-2') ) : ?>
    <?php endif; ?>

    </div>

    <div class="shadow-left page-content">
    <div class="shadow-right nav nav-main">
    <?php
    wp_nav_menu(array(
    'menu_class' => 'menu fadeThis clear-block',
    'theme_location' => 'primary',
    'fallback_cb' => 'mystique_page_menu', // default menu
    'link_after' => '<span class="p"></span>', // pointer arrow on 1st level
    ));
    ?>
    </div>
    </div>

    </div>
    <!-- /header -->

    <!-- main -->
    <div id="main" class="page-content">
    <div id="main-ext" class="clear-block">"

    social media plugin i'm using is Nino Social, it has a bunch of Plugin Files

    nino-social-connect/nino-social.php
    nino-social-connect/includes/social-form.php
    nino-social-connect/includes/admin-page.php
    nino-social-connect/includes/ninosocial_widget.php
    nino-social-connect/includes/display-functions.php
    nino-social-connect/readme.txt

  4. dandanwoo
    Member
    Posted 1 year ago #

    the plugin files also include

    admin-page.php
    display-functions.php
    ninosocial_widget.php
    social-form.php
    nino-social-style.css
    style.css

  5. dandanwoo
    Member
    Posted 1 year ago #

    The errors in the link you showed me, I don't know how to fix any of them…. :((
    I'm original a graphic designer, only know very limited knowledge of web code thing. Please help.

  6. dandanwoo
    Member
    Posted 1 year ago #

    I found that code in function.php

    function mystique_widgets_init(){

    // one sidebar, even though the theme supports 3 columns (because there's no interface to switch the layout)
    register_sidebar(array(
    'name' => __('Primary Sidebar', 'mystique'),
    'id' => 'sidebar-1',
    'before_widget' => '<li class="block"><div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="title"><h3>',
    'after_title' => '</h3><div class="bl"></div><div class="br"></div></div>'
    ));

    register_sidebar(array(
    'name' => __('Head Area', 'mystique'),
    'id' => 'sidebar-2',
    'before_widget' => '<li class="block"><div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="title"><h3>',
    'after_title' => '</h3><div class="bl"></div><div class="br">

    </div></div>'
    ));

    }

    But how to fix it?

  7. dandanwoo
    Member
    Posted 1 year ago #

    I copied you code into style.css under /*** BLOCKS (usually widgets) ***/

    And it works. But I didn't fix the error, don't know if it will cost problem later...

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    change this section in the register code of the second sidebar:

    'id' => 'sidebar-2',
    'before_widget' => '<li class="block"><div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',

    to:

    'id' => 'sidebar-2',
    'before_widget' => '<div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',

    and probably increase the margin in the new style to at least -45px

  9. dandanwoo
    Member
    Posted 1 year ago #

    Hi alchymyth, thanks for your help these days, now the problem solved!

    the code #header .block-content { float: right; margin-top: -80px; } under /*** BLOCKS (usually widgets) ***/ works better.

    Appreciate it!!

Topic Closed

This topic has been closed to new replies.

About this Topic