image instead of white inside the border?

Home Forums Automattic Funki image instead of white inside the border?

Viewing 20 posts - 21 through 40 (of 42 total)
  • Author
    Posts
  • #117663

    Diane Luna
    Member

    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

    #117664

    Diane Luna
    Member

    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.

    #117672

    philiparthurmoore
    Member

    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.

    #117823

    Diane Luna
    Member

    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!

    #117913

    Diane Luna
    Member

    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;

    }

    #117922

    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.

    #117939

    Diane Luna
    Member

    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.

    #117956

    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!

    #117964

    Diane Luna
    Member

    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.

    #118098

    Diane Luna
    Member

    I figured out the icons & spacing.

    #118099

    Michael Fields
    Member

    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.

    #118100

    Michael Fields
    Member

    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.

    #118108

    Diane Luna
    Member

    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!!

    #118109

    Diane Luna
    Member

    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 :)

    #118185

    Michael Fields
    Member

    You’re welcome! And thanks for your kind words :)

    Unfortunately there is no way to force the links to open in a new window.

    #118218

    Diane Luna
    Member

    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.

    #118220

    Diane Luna
    Member

    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?

    #118378

    Michelle

    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!

    #118479

    Diane Luna
    Member

    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;

    }

    #118613

    philiparthurmoore
    Member

    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.

Viewing 20 posts - 21 through 40 (of 42 total)

The topic ‘image instead of white inside the border?’ is closed to new replies.