collective theme

  • Unknown's avatar
    alinefringer · Member ·

    Can anyone help me change the color of the balks in the main menu when a page is active (active = the page that is currently open; its balk usually has a different color than the rest of the banner)? As of right now the banner is in a light green, the hovering over the balks is in a darker green and the color of an active page is black. I’d like to have it in the color of the hovering though? I used the code below for the hovering part. What do I have to type in for the “active” part?

    .navigation-main li:hover > a {
    background-color: #….;
    }

    – Then I’d like to remove the “borders” at the bottom and top of the menu. I read somewhere to use the code below or just insert “none” instead of the color. I’m not too sure where to insert that “none” though. And if you can’t remove it, can you just make the size (height) of the banner a bit smaller? Will it go away then?

    .navigation-main {
    border-bottom: 1px solid #…;
    border-top: 1px solid #…;
    }

    – The balks in the submenu are bigger/longer than the ones in the main menu. When I made some changes for the main navigation, the submenu remained the same. How can I change the background, hover and active color (explained above) of the balks in the submenu? If you can have a look at my submenu, it’s kind of hard to explain. The text in the submenu is not in the center of the whole balk. The hovering also doesn’t cover the whole balk, only part of it. I don’t know how this happened. I’d like to have the text align on the left (only in the submenu), the balks the same size as the balks of the main menu (if possible) and the same colors (background, hovering, active) as well.

    – The first paragrah of the body text comes in a light grey and a bit bigger than the rest (seen on demo). How can I turn this off?

    – and I’m also curious if it is possible to upload a background image (instead of the white background like right now) and have the text in the middle accentuated on a white background? Kind of like the connect theme?

    Thanks in advance for the help.

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

  • Unknown's avatar
    designsimply · Member ·

    I tried checking http://baeren-seengen.ch/ just now, but I can only see an “under construction” message there: https://cloudup.com/cpp2yOaAgDY

    I used the code below for the hovering part. What do I have to type in for the “active” part?

    If you switch “:hover” to “:active” in the selector, it will affect the active state. Note that the order matters: http://css-tricks.com/almanac/selectors/a/active/

  • Unknown's avatar
    designsimply · Member ·

    I’d like to remove the “borders” at the bottom and top of the menu. I read somewhere to use the code below or just insert “none” instead of the color. I’m not too sure where to insert that “none” though.

    In the example you mentioned:

    .navigation-main {
border-bottom: 1px solid #...;
border-top: 1px solid #...;
}

    “none” would be the value, and you would add it like this:

    .navigation-main {
border-bottom: none;
border-top: none;
}

    Or you could use a shorthand version of “border” like this:

    .navigation-main {
border: none;
}

    This assumes your “.navigation-main” is the correct selector for the element you’re trying to affect and also that it really is a border you want to remove and not just extra spacing. I can’t tell for sure without a link to be able to see the site you are working on. I checked the Collective theme demo at https://collectivedemo.wordpress.com/ and I don’t see a top or bottom border on the main menu there.

  • Unknown's avatar
    designsimply · Member ·

    How can I change the background, hover and active color (explained above) of the balks in the submenu?

    First, I am not sure what you mean by balks (sorry! I think looks like a confusion in translation). Do you mean background when you say balks?

    CSS will need to be different for different themes. Since you mentioned the Collective theme in your subject line, I will look at https://collectivedemo.wordpress.com/ as a point of reference.

    Before you try changing colors manually with CSS, check to make sure you have tried the color palettes in the Appearance > Customize > CSS panel. Each theme at WordPress.com is setup to work with color palettes in a one-click color switch, which might be easier than targeted changes if the palettes will work for you.

    To change the background, hover, and active color of the entire menu in the Collective theme, start with this:

    #navigation .menu .current_page_item a,
#navigation .menu .current_page_ancestor a,
#navigation .menu .current-menu-item a,
#navigation .menu .current-cat a,
#navigation .menu li .current_page_item a, #navigation .menu li .current_page_item a:hover,
#navigation .menu li .current-menu-item a, #navigation .menu li .current-menu-item a:hover,
#navigation .menu li .current-cat a, #navigation .menu li .current-cat a:hover {
	background: gold;
	color: gray;
	}
#navigation .menu .current_page_item ul li a,
#navigation .menu .current-menu-item ul li a,
#navigation .menu .current-menu-ancestor ul li a,
#navigation .menu .current_page_ancestor ul li a,
#navigation .menu .current-cat ul li a {
	background: none;
	color: gray;
	}
#navigation .menu li.current-menu-ancestor a,
#navigation .menu li.current_page_ancestor a,
#navigation .menu .current_page_item ul li a:hover,
#navigation .menu .current-menu-item ul li a:hover,
#navigation .menu .current-menu-ancestor ul li a:hover,
#navigation .menu .current_page_ancestor ul li a:hover,
#navigation .menu .current-menu-ancestor ul .current_page_item a,
#navigation .menu .current_page_ancestor ul .current-menu-item a,
#navigation .menu .current-cat ul li a:hover {
	background: hotpink;
	color: gray;
	}
.menu ul.sub-menu, .menu ul.children {
	background-color: goldenrod;
	}
#wrap .menu a {
	color: gray;
	}
.menu a:focus,
.menu a:hover,
.menu a:active,
#wrap .menu a:focus,
#wrap .menu a:hover,
#wrap .menu a:active {
	background: yellow;
	color: gray;
	}
.menu li li a,
.menu li li a:link,
.menu li li a:visited {
	color: gray;
	}
.menu li li a:focus,
.menu li li a:hover,
.menu li li a:active {
	background: yellow;
	}
.menu li li a:hover,
.menu li.sfHover:hover a {
	color: lightgray;
	}
.menu li.sfHover:hover {
	background: #222222;
	}

    In this example, gold is the main menu background color, goldenrod is the submenu background color, and yellow is the hover color. The color codes seem complex, but it’s possible to work with them! I figured out what selectors to use by copying the Navigation section from the themes style.css file and deleting all the blocks and lines that did not contain a color code. The example above is what was left and then I changed the colors to names to illustrate how it could work. You should copy the code above into your Appearance > Customize > CSS editor and change the color names to color codes.

  • Unknown's avatar
    designsimply · Member ·

    The first paragrah of the body text comes in a light grey and a bit bigger than the rest (seen on demo). How can I turn this off?

    Let me answer this one by showing you how to do it in a video:
    https://cloudup.com/cqJrFu2LQU8

    I used the built in browser tools in Firefox to find an test the CSS rule. After that, the CSS still needs to change so once you’re done testing, the next step is to copy the CSS you’ve created from the browser into the Appearance > Customize > CSS editor in your WordPress.com blog.

    You might also consider looking at a tutorial if you are going to be doing a lot of CSS. Here is one I’ve found that people like:
    http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

  • Unknown's avatar
    designsimply · Member ·

    I’m also curious if it is possible to upload a background image (instead of the white background like right now) and have the text in the middle accentuated on a white background? Kind of like the connect theme?

    You can upload a background image through the Appearance > Customize > Colors panel (the long color bar at the top can be used to set a background image), however, the Collective theme displays backgrounds a little differently on the home page than for single posts. I can help you get started by providing an example for a single post:
    https://collectivedemo.wordpress.com/2013/10/08/the-importance-of-great-design/

    .article {
	background: #F9F9F9;
	margin-top: 24px;
	padding: 12px 24px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}

    This will turn the background for the main content area to white. In the demo site, the background for comments was already white. If you wanted to include the post title, you could change “.article” to “.postarea” to make the change to the parent element which covers more area.

  • The topic ‘collective theme’ is closed to new replies.