Preview

  • Unknown's avatar
    raymondforte · Member ·

    Hey, I am thinking of buying CSS for my website. But first I want to request to get codes so I can simply preview what certain colours would be like in certain areas first.

    – The grey BG of the headings of ”Staff Bios”, ”WR Extra” ”RTR Returns…” etc to be blue. A blue shade like this: Shade
    – Keep the text white.

    So if you can please help that would be great.

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    thesacredpath will help you with CSS but I wanted to chime in and this is why. I am visually challenged and the blue color you link to above is shocking blue. It hurst my eyes and makes me squint. Perhaps another blue would be a better choice like hex color code > #2464BF

  • Unknown's avatar
    raymondforte · Member ·

    Hey, no problem…freedom of speech :)

    Thanks for that info, I never thought about that. sacredpath, please use the one timethief provided.

  • Unknown's avatar
    raincoaster · Member ·

    I suggest you tinker using the free Preview feature for CSS and once you’re able to make the changes you want, then and only then buy the upgrade.

  • Unknown's avatar
    raymondforte · Member ·

    That’s what I want to do but getting no help :( lol

  • Unknown's avatar
    timethief · Member ·

    @ourwweviews
    Staff are not available until Monday and we have only one Volunteer who regulalry provides his free services by helping others with CSS editing here on the WordPress.com forums when he has the time to as he does have his own clients. Please be patient. thesacredpath will help you when he can.

    If you click this link you may find your questions have been previously answered ? https://en.forums.wordpress.com/tags/itheme2

  • Unknown's avatar
    panaghiotisadam · Member ·

    That “shade” is not a shade, it’s pure unadulterated full blue. To turn the bg of your top menu to that, add this in the CSS editor: 

    #access {
background: #00f;
}

    For other hues and respective hex numbers see here:
    http://www.december.com/html/spec/color3.html

    The above code will give you a flat color. The original bg is a gradient. If you wish to retain that, first you need to copy this image:
    https://wpcom-themes.svn.automattic.com/itheme2/images/nav-bar-bg.png
    Then you need to edit the image in an image editing application to turn it blue but retain the gradient, upload it to your blog via Media > Add New, copy the file URL and use this code instead: 

    #access {
background: #00f url(IMAGE URL HERE) repeat-x;
}
  • Unknown's avatar
    raymondforte · Member ·

    Hey, I’m close to buying the CSS.

    [IMG]http://i1210.photobucket.com/albums/cc419/RayTheRambler/Capture-2.jpg[/IMG]

    Now if you look at that ScreenShott, you’ll see the what are grey border lines and the grey hoomepage little house icon.

    May I have the code to change the border to all black (so it matches the black) and for the icon to be white, please.

  • Unknown's avatar
    raymondforte · Member ·

    Didn’t realise the image wouldn’t visualise on the screen so here’s the SS.

  • Unknown's avatar
    raymondforte · Member ·

    Any help guys? Sorry to rush but I want to buy CSS this weekend and need to make sure everything will work for me

  • Unknown's avatar
    raincoaster · Member ·

    Well, obviously it’s not working for you. Don’t buy it yet until you’re able to make all the changes you want. CSS isn’t hard to learn, but it takes time.

    Also, just a tip: don’t make ANY purchases at Wp.com on a weekend, because staff sometimes take the weekends off and there you are stuck if anything goes wrong. Always wait for Monday, when they’ll have full staff on to help.

  • Unknown's avatar
    raymondforte · Member ·

    Thanks for the info, makes sense!

    I think it’s simple what I want done but just can’t explain it well.

  • Unknown's avatar
    designsimply · Member ·

    Here is the CSS that controls the home icon on the left side of the menu:

    #access div.menu > ul > li:first-child > a, #access li.menu-item-home a {
  background: url(http://s1.wp.com/wp-content/themes/pub/itheme2/images/home-icon.png) no-repeat 14px center;
  width: 16px;
  text-indent: -9000em;
}

    To change the icon to white, you would actually need to create a new graphic, upload it to your media library and adjust the CSS. Here is the direct link to the graphic if you’d like to download it and make changes to it: http://s1.wp.com/wp-content/themes/pub/itheme2/images/home-icon.png

    Alternately, if you wanted to switch the icon to text instead, you could add this to your Appearance → Custom Design → CSS page:

    #access div.menu > ul > li:first-child > a, #access li.menu-item-home a {
  background: none;
  width: auto;
  text-indent: 0;
}
#access div.menu > ul > li:first-child, #access li.menu-item-home {
  width: auto;
}

    Or you could just hide the home icon all together with this:

    #access div.menu > ul > li:first-child, #access li.menu-item-home {
  display: none;
}
  • Unknown's avatar
    designsimply · Member ·

    To turn off the background and border (which is actually a shadow in this case) from the iTheme2 theme on WordPress.com, use this CSS:

    #access {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display: block;
}
  • Unknown's avatar
    designsimply · Member ·

    I also see that you added this to your custom CSS:

    #access > div > ul > li:hover {
background:#FF0000;
}

    If you keep the home icon and you want to make the hover background color red, change that block to this:

    #access div.menu > ul > li:first-child.current_page_item:hover,
#access div.menu > ul > li:first-child.current-menu-item:hover,
#access li.menu-item-home.current_page_item:hover,
#access li.menu-item-home.current-menu-item:hover,
#access > div > ul > li:hover {
background:#FF0000;
}
  • Unknown's avatar
    designsimply · Member ·

    When you are on a page such as http://wrestlingrambles.com/videos/ if you want the current menu item background to be red, try adding this:

    #access .current_page_item, #access .current-menu-item {
background: #FF0000;
}
  • The topic ‘Preview’ is closed to new replies.