-
Posts
-
Thanks! I was able to get the nav links to move right with adding the a… but it somehow added extra space below them, and I still can’t get the images to appear instead of the words. I’m sorry guys – so new at this!
http://dianelunamusic.files.wordpress.com/2012/05/screen-shot-2012-05-12-at-1-08-35-pm.png
and the little house photo for home went away too. I’ve seen that addressed in other posts though maybe I can go find it.
Hi Diane. There’s an extra ; in your CSS for the background image. DItch the ; inside of the parenthesis (facebook-ping.png should not have a semicolon after it). With regard to extra space below the image, that’s pretty tough to debug without seeing the live code, so try out the image issue first and let me know how it goes! Cheers.
Got the image to show – thanks for the good catch! Need to resize my image – it was too big – and try it again. Will post in a couple days how it went.
Thank you!
Getting closer but still having a couple problems.
1. I can get the images to show but I can’t tell if they are floating right since all the spacing is weird.
2. there is still tons of empty space below the menu now – I think the words are aligned with the top of my new images
3. I can’t get the iTunes image to work.
4. if I really had my dream I would remove the search box, have little social icons over to the right where the search box was, and have them the same height as the search box is.
Screen shot: http://dianelunamusic.files.wordpress.com/2012/05/screen-shot-2012-05-16-at-8-26-45-pm.png
my css I tried:
.site-nav li.itunes a,
.site-nav li.facebook a,
.site-nav li.twitter a{
float: right;
width: 60px;
}
.site-nav li.facebook a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/facebook-fabric-icon.png) no-repeat left center;
display: block;
height: 60px;
overflow: hidden;
text-indent: -9999px;
}
.site-nav li.twitter a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/twitter-fabric-icon.png) no-repeat left center;
display: block;
height: 60px;
overflow: hidden;
text-indent: -9999px;
}
.site-nav li.itunes a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/itunes-fabric-icon.png) no-repeat left center;
display: block;
height: 60px;
overflow: hidden;
text-indent: -9999px;
}
Hi Diane,
Would you mind enabling the menu items for iTunes, Twitter, and Facebook? You don’t need to add the CSS for them but if the menu items are there, it would make us to easier to suggest the CSS.
Ok – just enabled them. I had turned them off after each attempt, because I didn’t like how they looked just typed… but they’re up now.
Hi Diane,
Thanks for enabling them. I changed the order of those three items in order to make it work. Anyway, try the following CSS. I believe this results what you wished.
#branding #searchform {display: none;
}
.site-nav li.itunes,
.site-nav li.facebook,
.site-nav li.twitter {
float: right;
margin-top: -30px;
}
.site-nav li.itunes a,
.site-nav li.facebook a,
.site-nav li.twitter a {
display: block;
height: 60px;
margin-left: 20px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 60px;
}
.site-nav li.facebook a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/facebook-fabric-icon.png) no-repeat left center;
}
.site-nav li.twitter a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/twitter-fabric-icon.png) no-repeat left center;
}
.site-nav li.itunes a {
background: url(http://dianelunamusic.files.wordpress.com/2012/05/itunes-fabric-icon.png) no-repeat left center;
}
Hope it helps!
Hey that worked! Awesome! I am almost done tinkering…
Just have two remaining questions (I think):
1. if I make the FB, twitter, etc icons smaller in size, will they scoot closer together automatically? Meaning, would they always have the same space in between each icon regardless of how big or small the icon is? If not – I’d be asking how to write code to change the space in between them :)
2. the only thing aesthetically thats still bugging me is that now that the little house symbol for “home” is gone – it has been replaced with just the word “home” which is always highlighted in black:
screen shot: http://dianelunamusic.files.wordpress.com/2012/05/screen-shot-2012-05-18-at-11-35-07-am.png
How do I:
a) get rid of the black box when you hover & when you’re on a page?
b) do a rollover color instead for the text, which would remain the alt color to highlight the page you’re on?
thanks so much.
I figured out the icons & spacing.
Hi Diane,
I must say, your site is looking absolutely wonderful!!!! Great job on everything :)
Here is some code which should address the black background on current page links and hovering on all links:
#access a:hover,
#access li:hover > a,
#access .current-menu-item a,
#access .current_page_ancestor a {
background-color: transparent;
color: #0087bc;
}I’ll take a look into the home icon and see if I can find a fix for this too.
Getting the house icon to display is really easy. All you need to do is change the “Title” of this link to be “Home” like this:
Once you add this text and change the menu, you will need to add a few more lines of code to hide the black background for this link too:
#access a[title="Home"]:hover {
background-color: transparent !important;
}The hover style is provided by an image with a white house. I’m not sure what color you will be using for your current/hover state in the navigation. If you choose white, then all is ready to go, if not we will need to use another image.
Awesome. I messed around with the hover & colors – it all worked per your instructions. For now, I like it the best with the little house, and not changing the hover. I’ll be saving the instructions though :)
Thanks!! A million!!
Hey by the way regarding the social links which you guys helped me with so wonderfully…
Is there code I can add to get those to pop up in a separate window instead of taking people away from my website….???
You guys are the BEST! Could not do this without the help :)
You’re welcome! And thanks for your kind words :)
Unfortunately there is no way to force the links to open in a new window.
Hmm. Gonna have to think about that one! Don’t want people leaving the site so quickly :)
Hey make sure you all let me know when you make that featured slider a auto-rotating slider (hint hint)…. I’d be one HAPPY camper.
Got a question about links color. Which I thought I could take care of WITHOUT bothering you guys, but alas, nothing is ever easy.
My site currently:
Body text etc links color is blue.
Blog post tittles are Black, hover blue.
Blog post date is white, hover underline.
Navigation is black/white etc per the theme default.
All of which came with the theme.
I would like to change from blue to #8d1737 on ONLY the links that are currently blue on my site, and the hover to blue at blog post titles.
Basically, anything that is blue right now I’d like to change to a nice red or other blue.
I tried using the theme options in the dashboard – but when I changed the link color there, it changed the navigation AND the lines above and below the featured image.
I also tried basic css I found online… which changed all the links everywhere.
Grr :)
If this is super complicated, let me know if you would like me to re-post as a new subject?
Hi dianeluna,
The following CSS should accomplish what you are looking to do.
For post title hover link color:
.entry-title a:hover {color: #8d1737;
}
For the rest of the links that are currently blue:
.site-content a,.single .site-content nav a,
.widget a {
color: #8d1737;
}
“.site-content a” targets all links inside the left column. “.single .site-content nav a” targets the post navigation (e.g. the previous post and next post links). “.widget a” targets the links inside widgets.
Hope this helps!
The widget links changed color perfectly. The posts it turned everything red –
see screen shot http://dianelunamusic.files.wordpress.com/2012/05/screen-shot-2012-05-31-at-12-42-35-pm.png –
I was hoping to leave the post titles black and the dates white, and only change what is currently blue (the categories)
Here is exactly what I typed:
.entry-title a:hover {
color: #941720;
}
.site-content a,
.single .site-content nav a,
.widget a {
color: #941720;
}
Try this, Diane:
a,.entry-title a:hover { color: red; }All I’ve done is looked into the current CSS file of your site, located which styles contain blue, and changed them with the above rules. Let me know how that works out for you.
The topic ‘image instead of white inside the border?’ is closed to new replies.
Theme Support 
