Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Menu colours & generic title for blog posts

  1. habannah
    Member

    Hi all,

    Like so many others with questions, I'm new at CSS and though I've managed to figure out most of the changes I wanted, I'm stumped on a few points. I am using Coraline theme at http://www.frcic.wordpress.com.

    1) In the main navigation menu, I have set the text color to a golden yellow and the hover color to a deep red. I've also managed to change the text colour to red when someone is on that page, but only in the primary navigation menu. I would like the sub-menu text of the current page to be red, but the text of other current submenu pages to be yellow. I had this working yesterday before I went to bed but today it's not working :( Here is the menu-related code I've got in there so far. I'm guessing I've got conflicts somewhere or something... (I'm really sorry if I haven't formatted it properly for the forum -- I think I'm doing it right...)

    #access .main-navigation li.current-menu-item ul a {
	color: #edc515!important;
}

#access .current-menu-item a, #access .current_page_item a {
	background: none repeat scroll 0 0 #ffffff;
	color: #c52727!important;
}

.menu-item a {
	color: #edc515!important;
	font-size: 14px;
	background: none repeat scroll 0 0 #5b5145;
}

#access .children a, #access .sub-menu a {
	color: #edc515!important;
}

#access ul a:hover {
	color: #C52727!important;
}

#access ul ul a:hover {
	background: none repeat scroll 0 0 #ffffff;
	color: #C52727!important;
}

#access ul ul a {
	background: none repeat scroll 0 0 #ffffff!important;
}

#access {
	display: round;
}

    2) The blog posts are located at main menu FRCIC, sub-menu News. I would like the text for News in the sub-menu to be red when users are on any blog pages (categories, tags, archives, etc.). I've been completely unable to figure this one out.

    3) I would like "News" to be a generic title/header across the board for all blog pages, as listed above (in the same place page titles appear). From what I've found, it's not possible to add this, but I wonder if there's some type of backdoor work-around? For example, I saw somewhere that it's possible to move the date & author of a post above the post title -- would it then be possible to add extra text with padding to make it look like a page title?

    Any help with these questions would be so very much appreciated. Thanks in advance for your suggestions! General feedback on the site is also welcome.

    The blog I need help with is frcic.wordpress.com.

  2. habannah
    Member

    Oops! I just noticed that the last bit of menu code doesn't do anything at all. I was just trying to see if it was possible to change the boxiness of the menu tabs and forgot to delete it. If anyone knows code for how to do that, though, that would be awesome!

  3. habannah
    Member

    Related to my third question, I'd like the archive pages to have titles taht read "News Categories Archives" and "News Topics Archives" (I've titled my tags "topics" in the site footer). I've found that it's possible to hide these elements, so it must be possible to just make a slight adjustment to the text?

    Thanks!

  4. habannah
    Member

    Hi everyone,

    I hope someone will be able to get back to me soon. I've made a bit of progress since posting my questions initially, but I've still got a few problems.

    1) Background color of main menu items incorrectly displaying upon hovering over children pages (mouse over submenu items of any BUT the current page to see what I mean -- current page works).

    2) Current menu items not displaying the specified text color (main & sub menus)

    3) Have used a pseudo element to add text on archives pages, but now the first word of the "Next post" link is missing. Had to use white-space "pre" to effect the line break, but no matter how many spaces I add, the first word stays hidden. Same for the BACK arrow on "Previous post" link.

    Please help! Thanks :)

    Here is the menu-related code: 

    .current-page-item a {
	background-color: #948471!important;
	color: #c52727!important;
}

.current-menu-item a {
	background-color: #948471!important;
	color: #c52727!important;
}

.menu-item a {
	color: #edc515!important;
	font-size: 14px;
	background: none repeat scroll 0 0 #5B5145;
}

.current-page-ancestor a {
	color: #edc515;
	background-color: #948471!important;
}

.current-page-parent a {
	color: #edc515;
	background: none repeat scroll 0 0 #948471!important;
}

.current-page-children a {
	color: #edc515;
	background: none repeat scroll 0 0 #948471!important;
}

#access ul a {
	background: none repeat scroll 0 0 #5b5145;
	border-top-left-radius: .5em!important;
	border-top-right-radius: .5em!important;
	border-bottom-right-radius: .3em!important;
	border-bottom-left-radius: .3em!important;
}

#access ul ul a {
	background-color: #948471!important;
}

#access ul a:hover {
	color: #C52727!important;
	background-color: #948471!important;
	border-top-left-radius: .5em!important;
	border-top-right-radius: .5em!important;
	border-bottom-right-radius: .3em!important;
	border-bottom-left-radius: .3em!important;
}

#access ul ul a:hover {
	background-color: #948471!important;
	color: #C52727!important;
}

#access li:hover {
	background-color: #948471!important;
	color: #C52727!important;
	border-top-left-radius: .5em!important;
	border-top-right-radius: .5em!important;
	border-bottom-left-radius: .3em!important;
	border-bottom-right-radius: .3em!important;
}

.main-menu a:hover {
	background-color: #948471!important;
	color: #C52727!important;
	border-top-left-radius: .5em!important;
	border-top-right-radius: .5em!important;
	border-bottom-right-radius: .3em!important;
	border-bottom-left-radius: .3em!important;
}

.menu-item a:hover {
	background: none repeat scroll 0 0 #948471!important;
	color: #c52727!important;
}

.menu a:hover {
	background: none repeat scroll 0 0 #948471!important;
	color: #c52727!important;
}

.menu-item-ancestor a:hover {
	background: none repeat scroll 0 0 #948471!important;
	color: #edc515!important;
}

.menu-item-parent a:hover {
	background: none repeat scroll 0 0 #948471!important;
	color: #edc515!important;
}

#access ul a:active {
	color: #C52727!important;
	background: none repeat scroll 0 0 #948471!important;
}

  5. hmmurad24
    Member

    Thanks for that

  6. habannah
    Member

    Sorry -- thanks for what? I haven't posted a solution, but a problem! Have made even more progress now but will open a more specific discussion thread to hopefully get the attention of someone who can help...

  7. designsimply
    Staff

    One tip to start with is to try to avoid using "!important" if you possibly can. Sometimes it's needed, but most of the time if you get the selectors right, then you won't need it.

    You've posted a ton of info and a few separate questions all in one go, and I think it's much easier to help if you post separate questions in separate forum topics (i.e. one for menu colors, another for the title question, etc.). Could you post separate questions in separate topics in the future?

    Let's start with the menu colors question. It sounds like you've gotten a great start actually, and you've learned a few things but you haven't gotten a complete picture. What I like to do when editing menu colors is to find the original theme's menu CSS, copy it, strip out anything not color-related, and swap out the color codes. It's one way of making sure everything gets covered. Here is the stylesheet for the Coraline theme:
    https://s1.wp.com/wp-content/themes/pub/coraline/style.css?m=1355853386g&minify=false

    If you copy out everything that starts with "#access" (the menu) that's color-related, you'll get this:

    #access {
	border-top: 1px solid #ccc;
}
#access a {
	color: #000;
}
#access ul ul a {
	background: #000;
	color: #eee;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #000;
	color: #fff;
}
#access ul ul a:hover {
	background: #222;
}
#access .current-menu-item a,
#access .current-menu-ancestor a,
#access .current_page_item a,
#access .current_page_ancestor a {
	background: #000;
	color: #fff;
}

    I would like the sub-menu text of the current page to be red, but the text of other current submenu pages to be yellow.

    Okay, consider the hover color too. Here's the same CSS from above with some of your color codes swapped in. Hopefully this example will help you see where stuff gets change if you still want to mess around with the colors further:

    #access {
	border-top: none;
}
#access a {
	color: #edc515;
}
#access ul ul a {
	background: #5B5145;
	color: #c52727;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #5B5145;
	color: #edc515;
}
#access ul ul a:hover {
	background: #5B5145;
}
#access .current-menu-item a,
#access .current-menu-ancestor a,
#access .current_page_item a,
#access .current_page_ancestor a {
	background: #948471;
	color: #c52727;
}

  8. designsimply
    Staff

    2) The blog posts are located at main menu FRCIC, sub-menu News. I would like the text for News in the sub-menu to be red when users are on any blog pages (categories, tags, archives, etc.). I've been completely unable to figure this one out.

    Body class selectors will probably help with this one. If you look at the body tag for each type of page, you'll notice that they have different lists of classes, and you can use those to target different types of pages. So, to turn the "News" submenu link (which can be targeted with this "#access ul ul li.menu-item-645 a") green for the posts list "blog", single posts, and archives, try adding this:

    .blog #access ul ul li.menu-item-645 a,
    .single #access ul ul li.menu-item-645 a,
    .archive #access ul ul li.menu-item-645 a {
    color: green;
    }

    Once it's working as you expect, update the green color name to a color code instead.
    http://0to255.com/

  9. designsimply
    Staff

    3) I would like "News" to be a generic title/header across the board for all blog pages, as listed above (in the same place page titles appear). From what I've found, it's not possible to add this, but I wonder if there's some type of backdoor work-around? For example, I saw somewhere that it's possible to move the date & author of a post above the post title -- would it then be possible to add extra text with padding to make it look like a page title?

    Hm, I think you could hook into the page title's themselves and use the "content" property to append some text. Here is an example that adds "News: " to the beginning of titles on single posts:

    .single .post h1:before {
	content: "News: ";
}

    Change out ".single" to a different body class selector if you want to target a different type of page.

  10. designsimply
    Staff

    3) Have used a pseudo element to add text on archives pages, but now the first word of the "Next post" link is missing. Had to use white-space "pre" to effect the line break, but no matter how many spaces I add, the first word stays hidden. Same for the BACK arrow on "Previous post" link.

    Not sure what's going on there. If you're still having trouble, please provide a link. Including links and clear descriptions of where to find what you're trying to edit is really helpful.

  11. habannah
    Member

    Thanks, designsimply! Everything works as I want it to now :) There are a few new things I'm trying to figure out but I'll start a new thread... And thanks for the 0to255 link -- I was able to use it to improve my colour scheme :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags