Getting an active menu banner thing

kai_zaper

So, I'm trying to get a menu item to an active state. That way you do know where you are.
In CSS I'm trying to make an .banner active code but that doesn't work.
Anyone know how to get this idea done?

I'm having the same menu on my normal site:
http://www.rebelationarmy.nl/

Regards,
Kai

peregrine

is that what you want in your custom.css

.Banner .Selected {
    background-color: blue;
    color: white;
}

vrijvlinder

I think what he wants is to make** a.Active** and a.Visited a different color so they know where they visited.

if the banner is a link then you would need the css code of a.banner:Active and the color you want it to be.

Kasper

@peregrine's solution is what you're looking for. However, Vanilla does not take into account navigation to child pages when applying the .Selected-class to the menu item.

@vrijvlinder: In CSS, a colon indicates a so called pseudo selector. The :active-pseudo-selector (notice that it's not with a capital "a") targets active elements, "active" meaning that the element is currently being clicked on. It can therefore not be used for navigation orientation but merely belongs to the same group of pseudo selectors as :hover and :focus. There are two pseudo-selectors that can be used for navigation orientation: :link and :visited where the former targets unvisited links and the latter targets visited links.

Hope this makes things a bit clearer.

vrijvlinder

I thought they just wanted the links to show where they visited already. Would like to hear if they solved it. Thanks for the correction

Kasper

No worries, we're all here to learn new stuff :-)

peregrine

yea, don't you love it - someone asks a question. has re-logged in again, so one assumes they saw the answers and they provide no followup. but perhaps they want to try it out first - so patience we must be, and its only been a day.

It's the questions that get asked, then answered, and still no response from questioner after weeks - those are the ones I wish I never responded to (like talking to a wall and no etiquette on part of questioner.).

But to be clear, in this case, we still have time, its only been a day.

vrijvlinder

I think people jump to get help too soon in desperation, then they figure it out and forget they asked a question. Would be nice if they at least post they fixed it . The suspense is killing me ....

@peregrine: don't regret responding because your advice keeps on giving even after the person has long gone or never came back. Others are helped by it. That is priceless.

kai_zaper

Thanks, it has worked for me. Now i'm fighting with the fact that it won't stay selected when i enter the forum.
I will make my way through this maze.

Thanks you all!!!!!!

vrijvlinder

Some of it could be cookies and or your browser, I think what you need to do is look at the style.css sheet and find all the selectors. Like these below and give them properties separately. There are times when the style.css and the custom.css may conflict . Not all the style.css code is used and altered in all custom themes and not all is overridden by the custom.css file. I changed so much in my theme it became a whole new theme because most of the original design changed. To look at the style.css use firebug inspect element and on the left panel you will see the assets you are using including all the sylesheets in play. Compare the custom.css to see what is missing or what is causing a conflict. Copy the relevant parts you need to change to the custom.css file.

.MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active

Kasper

@vrijvlinder: What's causing the problem described by the OP is the fact that Vanilla doesn't currently apply the .Selected class to child sections of the main navigation links. What the OP could do, is use jQuery to compare the current URL against a set list of URLs (or simply parts of the URLs) contained within each child section of any of the main navigation links.

As a sidenote, you should never rely on style.css when creating custom themes - best leave this file alone and not even look through it nor copy/paste contents from it to your custom.css file.
When I create themes, I usually create a completely fresh master view using none of the classes or IDs (well, a few of the original ones are actually good to keep, like #Body for example) from the default master view just to make sure that the default stylesheet doesn't make theming unnecessarily complicated. I then scaffold out some SCSS files and start building my theme just as I'd like it to be without having to worry about conflicts with the default styling. Relying on your own architecture and code (or pre-defined ones of your liking) if often the fatest and easiest way to build stuff, even when it comes to themes.

vrijvlinder

That is why you are a master and I am an apprentice !!

I personally do not rely on the style.css at all but I noticed there were things that were not responding to the custom.css likely because of what you mention, I guess naming classes the same as the default can become troublesome. Am I wrong in my assumption that the default style.css continues to play a part ? If it does not, why would it be called up as a style sheet along with all the other style sheets one has for plugins etc. ? (that may be a dumb question sorry in advance)

I personally don't want to change the way the default works, only the design and layout of my custom look. But if I wanted to in the future, say like you made metro from scratch , would the default style.css become obsolete or still play a part after such an overhaul?

Kasper

The default style.css supplies the basic CSS needed to keep the Vanilla front-end from falling "apart" so it will never really be rendered completely obsolete - you could try removing it temporarily using your browsers dev tools and you'll see how Vanilla looks without. You are indeed correct in your assumptions and your question would therefore seem perfectly valid had this not been the case - it wouldn't make sense calling an unused stylesheet.

What you achieve by removing some of the classes and IDs from the master view is that you get a much more basic looking "canvas" for you to start building your theme on as a lot of the default "skin"-related CSS will then become ineffective - as I try to stick with OOCSS-methods, it's rather important separating skin from layout in your code and this is a great way to do so. This is an example from the Barebones theme I wrote just to avoid having to write a bunch of boilerplate code each time I start building a new theme:

vrijvlinder

I guess I'm still boilerplating a bit here lol working on improvement, yea one can get muddled and go from 300 lines to 1300 if not careful . I looked into the jquery stuff and thought offering this link would be helpful, I know I still have much to learn and working with Apps like Vanilla sure help to learn hands on . Where do I donate?

http://docs.jquery.com/Tutorials:How_jQuery_Works

peregrine

the key to css is playing by the rules. Understanding precedence and inheritance

http://www.w3.org/TR/CSS21/cascade.html#specificity