Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Strange behavior on sidebar widgets with Flexi Pages


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Aug 22, 2009, 11:43 AM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
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;
}
  #2  
Old Aug 23, 2009, 02:44 PM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
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
  #3  
Old Aug 23, 2009, 04:07 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
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.
  #4  
Old Aug 23, 2009, 04:52 PM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
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;
}
  #5  
Old Aug 23, 2009, 06:31 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
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.
  #6  
Old Aug 27, 2009, 10:40 AM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
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
  #7  
Old Aug 27, 2009, 11:00 AM
Flynn's Avatar
Flynn
 
3,745 posts · Oct 2008
Munich, Germany
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;
}
  #8  
Old Aug 27, 2009, 11:54 PM
ScottKarlins's Avatar
ScottKarlins
 
16 posts · Apr 2009
Atlanta, GA
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.
  #9  
Old Oct 25, 2009, 07:21 AM
blueprairie
 
94 posts · Feb 2009
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!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
strange thing in sidebar ciocchi New Versions, & Updating 4 Aug 6, 2009 03:21 AM
[SOLVED] Different sidebar and/or widgets for different pages jszei Sidebars & Widgets 2 Jul 30, 2009 03:32 PM
How to display page excerpts and images on sidebar (or, strange widget behaviour) reallylost Sidebars & Widgets 5 Jun 4, 2009 07:27 AM
Strange behavior when editing bfa_header_config.php jacoblo Header configuration & styling 2 Mar 24, 2009 04:45 AM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 05:11 AM


All times are GMT -6. The time now is 03:22 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.