-
Posts
-
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
* 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)
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/
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:
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;
}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!
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>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/ADarlingAffairNo square brackets. :-)
You’re almost there!
Ah! Okay hahaha. Makes sense. Doh. I’ll give it a burl.
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>
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.
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.
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
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;
}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;
}
I copied and pasted that in – but the underline is still present in the footer widget.
Played with the code a little, all fixed – thanks. This thread should be fine to close.
The topic ‘Footer widgets and Header’ is closed to new replies.
Theme Support 