Footer widgets and Header

Home Forums Automattic Forefront Footer widgets and Header

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #111669 Resolve

    A Darling Affair

    Hi, I have a couple of queries,

    Firstly I’ve just added our social media icons to the footer as individual widgets – ideally I’d like to change the spacing between them and have them all situated on the one line.

    Also, with the header – my preference would be to customise the hight and positioning of the header image. Our logo is stacked, so a horizontal orientation is not ideal; it would be great if I could have the option to centre it as well. If the image cannot be moved or resized, it would be great to have it allign vertically with the menu.

    While I’m at it – what’s the code for changing the menu highlight/drop down colour?

    the blog I need help with is addarlingaffair.com

    TIA

    The blog I need help with is adarlingaffair.com
    #152067

    A Darling Affair

    * I should note that for now I’ve removed our twitter widget (so all widgets in the footer are currently on one line, but once it’s added it shifts to the next line)

    #152083

    Kathryn P.
    Happiness Engineer

    Firstly I’ve just added our social media icons to the footer as individual widgets – ideally I’d like to change the spacing between them and have them all situated on the one line.

    Instead of adding each icon as an image widget, you’ll have more layout control if you add all three icons within one text widget. Here’s a guide to doing that:

    http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

    #152084

    Kathryn P.
    Happiness Engineer

    Also, with the header – my preference would be to customise the hight and positioning of the header image. Our logo is stacked, so a horizontal orientation is not ideal; it would be great if I could have the option to centre it as well. If the image cannot be moved or resized, it would be great to have it allign vertically with the menu.

    This is what I see currently in your header area:

    A Darling Affair Wedding Fairs Sunshine Coast Gold Coast

    It looks very nice, so I’m not sure exactly what you’d like to tweak.

    By using CSS, you can certainly modify the logo or menu positioning.

    If you’d like to move the logo up slightly, you could try something like this:

    .site-branding img {
    margin-top: -15px;
    }

    #152085

    Kathryn P.
    Happiness Engineer

    what’s the code for changing the menu highlight/drop down colour?

    This is the portion of the CSS that handles the menu:

    /* =Menu
    
    */

    .navigation-main {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    }
    .navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }
    .navigation-main li {
    display: inline-block;
    position: relative;
    }
    .navigation-main a {
    color: #848984;
    display: inline-block;
    line-height: 2.77;
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;
    }
    .navigation-main ul ul {
    background-color: #1f251f;
    float: left;
    position: absolute;
    top: 2.7692307692em;
    left: -999em;
    z-index: 99999;
    }
    .navigation-main li li {
    display: block;
    }
    .navigation-main ul ul ul {
    left: -999em;
    top: 0;
    }
    .navigation-main ul ul a {
    color: #fff;
    line-height: 1.5;
    padding: 0.6153846153em 10px 0.6923076923em;
    white-space: normal;
    width: 170px;
    }
    .navigation-main ul li:hover > ul,
    .navigation-main ul li.focus > ul {
    left: auto;
    }
    .navigation-main ul ul li:hover > ul,
    .navigation-main ul ul li.focus > ul {
    left: 100%;
    }
    .navigation-main a:hover,
    .navigation-main a:focus,
    .navigation-main li.current_page_item > a,
    .navigation-main li.current-menu-item > a {
    color: #050705;
    }
    .navigation-main ul ul a:hover,
    .navigation-main ul ul a:focus,
    .navigation-main li li.current_page_item > a,
    .navigation-main li li.current-menu-item > a {
    background-color: #050705;
    color: #fff;
    }

    To modify the hover (rollover) colour, look for elements that have a:hover on them.

    Dropdown items are submenus, so a ul (unordered list) within a ul. That means modifying the hex colour here will change the rollover background colour:

    .navigation-main ul ul {
    background-color: #1f251f;
    }

    Just let me know if you need help with anything else. If you have new questions, please start a new thread rather than adding to this one. Thanks!

    #152192

    A Darling Affair

    Hi Kathryn,

    Thanks for all of this – a had a bash at the social media icons in a text widget, a few times as the guide instructs. I found that after I saved the widget, WP does some kind of re-customisation to the HTML code. I also find that my icons will not display and that when I click where the icon should be that the web address is not correct e.g. https://www.facebook.com/ADarlingAffair%5D – so the squared bracket is appearing in the address bar, which causes problems linking through.

    So the code I enter is this before I save it:

    <div><a href="[https://twitter.com/ADarlingAffair]"><img title="Twitter" src="[https://adarlingaffair.files.wordpress.com/2014/06/twitter.png]" alt="Twitter" width="35" height="35" /></a><a href="[http://www.pinterest.com/adarlingaffair]"><img title="Pinterest" src="[https://adarlingaffair.files.wordpress.com/2014/06/pinterest.png]" alt="Pinterest" width="35" height="35" /></a> <a href="[https://www.facebook.com/ADarlingAffair]"><img title="Facebook" src="[image URL for Facebook icon]" alt="Facebook" width="35" height="35" /></a> <a href="[http://instagram.com/adarlingaffair]"><img title="Instagram" src="[https://adarlingaffair.files.wordpress.com/2014/06/instagram.png]" alt="instagram" width="35" height="35" /></a></div>

    And then it becomes this after I save it:

    <div><a href="//twitter.com/ADarlingAffair]"><img title="Twitter" src="//adarlingaffair.files.wordpress.com/2014/06/twitter.png]" alt="Twitter" width="35" height="35" /></a><a href="//www.pinterest.com/adarlingaffair]"><img title="Pinterest" src="//adarlingaffair.files.wordpress.com/2014/06/pinterest.png]" alt="Pinterest" width="35" height="35" /></a> <a href="//www.facebook.com/ADarlingAffair]"><img title="Facebook" src="[image URL for Facebook icon]" alt="Facebook" width="35" height="35" /></a> <a href="//instagram.com/adarlingaffair]"><img title="Instagram" src="//adarlingaffair.files.wordpress.com/2014/06/instagram.png]" alt="instagram" width="35" height="35" /></a></div>

    #152193

    Kathryn P.
    Happiness Engineer

    You can’t have any square brackets in your HTML at all. :-) You should remove them all in your widget code.

    Sorry for the confusion:

    [full link to your Twitter]

    means something like:

    https://twitter.com/ADarlingAffair

    No square brackets. :-)

    You’re almost there!

    #152194

    A Darling Affair

    Ah! Okay hahaha. Makes sense. Doh. I’ll give it a burl.

    #152195

    A Darling Affair

    Okay so this is what I’ve got now (much better!)

    But for some reason the first two icons are super close together. Where as the others are nicely spaced? (Sorry, I’m such a novice!)

    <div><a href="https://twitter.com/ADarlingAffair"><img title="Twitter" src="https://adarlingaffair.files.wordpress.com/2014/06/twitter.png" alt="Twitter" width="35" height="35" /></a><a href="http://www.pinterest.com/adarlingaffair"><img title="Pinterest" src="https://adarlingaffair.files.wordpress.com/2014/06/pinterest.png" alt="Pinterest" width="35" height="35" /></a> <a href="https://www.facebook.com/ADarlingAffair"><img title="Facebook" src="https://adarlingaffair.files.wordpress.com/2014/06/facebook.png" alt="Facebook" width="35" height="35" /></a> <a href="http://instagram.com/adarlingaffair"><img title="Instagram" src="https://adarlingaffair.files.wordpress.com/2014/06/instagram.png" alt="instagram" width="35" height="35" /></a></div>

    #152196

    A Darling Affair

    Haha – never mind – I just added a “space”….literally. All good, and the header is perfect too now. I decided to leave the menu highlight as is.

    Thanks very much.

    #152197

    Kathryn P.
    Happiness Engineer

    Hmm – they look fairly evenly spaced to me, this is what I see in Firefox and Chrome: https://cloudup.com/cy-TQ0D4s01

    What browser and version are you using?

    You may also want to shrink down the graphics and re-upload them, instead of letting the browser shrink them down, as the shapes are a little bit jagged in Firefox.

    #152198

    Kathryn P.
    Happiness Engineer

    You may also want to shrink down the graphics and re-upload them

    I mean in a graphics program.

    #152199

    A Darling Affair

    Thanks – will do. Also one final thing. I see when I hover over the icons, an “underline” appears behind the icon. I’m not sure what code I should use to fix that

    #152200

    A Darling Affair

    I have already applied this code earlier, which fixed the problem everywhere else:

    a:hover,
    .entry-content a:hover,
    .comment-content a:hover,
    .entry-content a,
    .comment-content a {
    border-bottom: none;
    }

    #152265

    Kathryn P.
    Happiness Engineer

    The reason that code doesn’t work on the widget link underlines on hover is that it applies to the classes entry-content (post and page content) and comment-content (comments). Widgets aren’t included in those two classes, links in widgets still have the underlines on hover.

    Adding a new class in the above CSS that applies to the footer widget area should do the trick:

    a:hover,
    .entry-content a:hover,
    .comment-content a:hover,
    .entry-content a,
    .comment-content a,
    .footer-widget-area a:hover {
    border-bottom: none;
    }

    #152279

    A Darling Affair

    I copied and pasted that in – but the underline is still present in the footer widget.

    #152283

    A Darling Affair

    Played with the code a little, all fixed – thanks. This thread should be fine to close.

    #152302

    Kathryn P.
    Happiness Engineer

    Great. I’ll mark this thread as resolved and close it, but feel free to start a new one if you need help with anything else.

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Footer widgets and Header’ is closed to new replies.