I upgraded from 3.32 to the latest version of your great Atahualpa, version 3.4.2. I am also running version 1.5.3 of Flexi Pages Widget, and after updating Atahualpa to version 3.4.2, I am seeing some strange behavior in the Flexi Pages Widget. The small border-left: solid of 5 pixels used to highlight the built-in border-left: solid item within the Atahualpa theme. NOW, it is adding a second border-left: solid and highlighting that one! Here is the CSS Insert I am using, which is one you helped me on earlier this year. My site is at http://scottkarlins.com/ Please if you can, have a look and assist!:

/* DEFAULT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited {
background: #ffffff !important;
border-left: solid 5px #cccccc !important;
color: #666666 !important;
}
/* For HOVER */
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 5px #000000 !important;
color: #000000 !important;
}
/* For CURRENT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited,
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 5px #000000 !important;
color: #000000 !important;
}
/* Reset children of CURRENT */
div.flexipages_widget ul li.current_page_item ul li a:link,
div.flexipages_widget ul li.current_page_item ul li a:visited {
background: #ffffff !important;
border-left: solid 5px #cccccc !important;
color: #666666 !important;
}
div.flexipages_widget ul li.current_page_item ul li a:active,
div.flexipages_widget ul li.current_page_item ul li a:hover {
background: #ffffff !important;
border-left: solid 5px #000000 !important;
color: #000000 !important;
}

Remove all border-left... lines from your custom CSS.

It may even work if you remove your custom CSS altogether.

The border is on the <LI> element now, in the newest Atahualpa version, for all widgets that have only one level of <LI> (most widgets) instead of the <A> element, for a more streamlined appearance throughout different widgets (twitter, recent comments etc...)

On the multi level widgets (Pages, Categories) the border is on the <A>.

Bascially, <LI> is the default now because it covers much more widgets, and <A> is the exception

Thanks for the speedy reply Flynn!

If I remove all the border-left lines, the text stays highlighted on the active pages, but, I no longer get the solid block to stay highlighted. Any way to make it work?

Thanks, Scott K.

For the flexipages widget:

div.flexipages_widget ul li.current_page_item {
border-left:5px solid #000000 !important;
}

For the categories widget

div.widget_categories ul li.current-cat {
border-left:5px solid #000000 !important;
}

To make the cat widget link black when current

div.widget_categories ul li.current-cat a:link,
div.widget_categories ul li.current-cat a:visited,
div.widget_categories ul li.current-cat a:active,
div.widget_categories ul li.current-cat a:hover {
color: #000000 !important;
}

Flynn,

Nice! All working on the Flexi Pages Widget now. Thank you!

On the Category Widget though, I see 2 borders. A black one, and right next to it, a grey one. I inserted this into CSS Inserts as you typed it:

For the categories widget

div.widget_categories ul li.current-cat {
border-left:5px solid #000000 !important;
}

To make the cat widget link black when current

div.widget_categories ul li.current-cat a:link,
div.widget_categories ul li.current-cat a:visited,
div.widget_categories ul li.current-cat a:active,
div.widget_categories ul li.current-cat a:hover {
color: #000000 !important;
}

Why is it doubling it up here?

Thanks! Scott K.

See next post instead of this one

Sorry I contradicted myself here. As mentioned (but not followed through) the border is on the <A> for pages and categories because they can have multiple levels

Instead of

div.widget_categories ul li.current-cat {
border-left:5px solid #000000 !important;
}

To make the cat widget link black when current

div.widget_categories ul li.current-cat a:link,
div.widget_categories ul li.current-cat a:visited,
div.widget_categories ul li.current-cat a:active,
div.widget_categories ul li.current-cat a:hover {
color: #000000 !important;
}

use

div.widget_categories ul li.current-cat a:link,
div.widget_categories ul li.current-cat a:visited,
div.widget_categories ul li.current-cat a:active,
div.widget_categories ul li.current-cat a:hover {
color: #000000 !important;
border-left:5px solid #000000 !important;
}

Please post a URL with the error in action in case this doesn't work either. It appears that the category widgets is currently not active on your site

I just realized that the flexipages widget would still behave unexpected if you display multiple page levels.

The pages and the category widget get a whole bunch of extra CSS In Atahualpa. The fleixpages_widget currently doesn't, but I will add it for the next release.

Instead of adding huge amounts of CSS (which you would have to manually change if you change the colors etc. in the admin area) I suggest that for now you apply the default widget_pages style to flexipages_widget like so:

Edit js.php, right after:

jQuery(document).ready(function(){

add:

jQuery('.flexipages_widget').addClass('widget_page s');

Now the flexipages_widget should be styled like the default widget_pages. If it doesn't try this instead:

jQuery('.flexipages_widget').addClass('widget_page s').removeClass('flexipages_widget');

Remove the space in or after widget_pages - Vbulletin puts that there for whatever reason .


Only the "current" style is missing for both flexipages and categories now. A current style is not included in Atahualpa for the sidebar widgets atm. CSS Insert

div.widget_categories ul li.current-cat a:link,
div.widget_categories ul li.current-cat a:visited,
div.widget_categories ul li.current-cat a:active,
div.widget_categories ul li.current-cat a:hover {
color: #000000 !important;
border-left: solid 5px #000000 !important;
}

div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:visited,
div.flexipages_widget ul li.current_page_item a:hover {
border-left:5px solid #000000 !important;
}

Or, if you had to remove the flexipages_widget class in the jQuery code above, then use this as the second part of the CSS Insert (instead of the div.flexipages_widget ul li.current_page_item a:link etc. code block above)

div.widget_pages ul li.current_page_item a:link,
div.widget_pages ul li.current_page_item a:active,
div.widget_pages ul li.current_page_item a:visited,
div.widget_pages ul li.current_page_item a:hover {
border-left:5px solid #000000 !important;
}

Flynn,

Thank you for all the great info!

I changed the Category Widget to "Show as dropdown", due to the double border issue. I will incorporate your code shortly and let you know how it works.

Great to know you will be adding extra CSS for Flexi Pages! I look forward to trying it out!

Thank you for all the great support!
Scott K.

THANK YOU!

Thank you for posting this question as it was my question too, and Flynn, thank you for having a forum that is so easy to use and for providing the solution to the problem.

I LOVE ATAHUALAPA!