Home › Forums › Automattic › Forefront › Footer widgets and Header
Tagged: footer, header, menu colour, widgets
-
AuthorPosts
-
A Darling AffairMemberHi, 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.comJune 4, 2014 at 11:13 am #152067
A Darling AffairMember* 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)
June 4, 2014 at 2:40 pm #152083
Kathryn P.Happiness EngineerFirstly 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/
June 4, 2014 at 2:43 pm #152084
Kathryn P.Happiness EngineerAlso, 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:
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;
}June 4, 2014 at 2:49 pm #152085
Kathryn P.Happiness Engineerwhat’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!
June 6, 2014 at 9:25 pm #152192
A Darling AffairMemberHi 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>
June 6, 2014 at 9:37 pm #152193
Kathryn P.Happiness EngineerYou 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!
June 6, 2014 at 9:52 pm #152194
A Darling AffairMemberAh! Okay hahaha. Makes sense. Doh. I’ll give it a burl.
June 6, 2014 at 9:57 pm #152195
A Darling AffairMemberOkay 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>
June 6, 2014 at 10:00 pm #152196
A Darling AffairMemberHaha – 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.
June 6, 2014 at 10:03 pm #152197
Kathryn P.Happiness EngineerHmm – 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.
June 6, 2014 at 10:03 pm #152198
Kathryn P.Happiness EngineerYou may also want to shrink down the graphics and re-upload them
I mean in a graphics program.
June 6, 2014 at 10:24 pm #152199
A Darling AffairMemberThanks – 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
June 6, 2014 at 10:26 pm #152200
A Darling AffairMemberI 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;
}June 9, 2014 at 3:50 pm #152265
Kathryn P.Happiness EngineerThe 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;
}June 9, 2014 at 10:30 pm #152279
A Darling AffairMemberI copied and pasted that in – but the underline is still present in the footer widget.
June 9, 2014 at 11:31 pm #152283
A Darling AffairMemberPlayed with the code a little, all fixed – thanks. This thread should be fine to close.
June 10, 2014 at 2:12 pm #152302
Kathryn P.Happiness EngineerGreat. 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.
-
AuthorPosts
The topic ‘Footer widgets and Header’ is closed to new replies.