Wordpress Themes - WP Forum at BFA - [SOLVED] Aside widget bar: problem with sprites

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - [SOLVED] Aside widget bar: problem with sprites (http://forum.bytesforall.com/showthread.php?t=19846)

[SOLVED] Aside widget bar: problem with sprites

Hi there,

I'm still loving montezuma theme but here you'll find 2 problems I am now facing:

1) I have added a new widget to the side bar: songkick widget (http://wordpress.org/extend/plugins/...and-festivals/) and it seems that one does not accept the montezuma formatting: it does not have the font color (title) nor the sprite as expected with <h3>.

Here is the result: www.apericut.com ("prochains concerts").
Is there a way to force (again) the widget to use the right formatting from the CSS?

2)I've been trying to modify the icons for other widgets using the values defined in the CSS settings/using menu icons sections but I don't get the expected icons in the end.

For instance:

Code:

.widget_loginradius > h3 i                                 { background-position: -120px -2352px }

.widget_loginradius:hover > h3 i                                 { background-position:  -96px -2352px }

Indeed I get a wrench instead of an avatar...
Is there an offset I should consider? Or something else?

Thanks for your kind help!

Boris

the theme is using '.widget > h3' to style the widget, but in this widget there is an extra 'div' between the 'aside' that has the class 'widget' and the 'h3'
you can go into the 'widget.css and everywhere you see '.widget > h3' you could add, just before it '.widget div > h3,'. Where you see '.widget > h3 i', you need to add '.widget div > h3 i,'

the comma is important.

Hi juggledad,

Thanks. I did the modification you suggested me. However it has changed all my widgets titles style to the same as my Songkick widget. Even if it is now consistent (black and grey without the sprite) :-), my original request was to keep the same Montezuma style (with the sprite and same font color - Black and blue).

Do you any suggestion?

Thanks.
Boris

I said

Quote:

everywhere you see '.widget > h3' you could add, just before it '.widget div > h3,'

you replaced it

I forgot to change one indeed. I changed it, but result remains the same.

Hi,

I reloaded the original css file and did again the modifications in order to make sure there is no mistake. Then played a bit more with the css file but I still get the same result...
Even if it is not so bad :-), I am still wondering how I could apply the theme correctly.

Thanks for your kind help!

1) where did you get the widget - url please
2) go to mto->export import - copy yout settings to a TEXT file and attach them to a reply

Sorry for my late reply.

1) Here is the URL for the pluggin : http://wordpress.org/extend/plugins/...and-festivals/

2) Which settings do you need? I don't really get what you are asking... :-(

Thanks.

go to dashboard->appearances->Montezuma Options (mto)->Export Import->Current Montezuma Settings:

OK thanks :-)
Here is the file attached.

Replace your 'widget.css' with the following

HTML Code:

/********************************************************************

        WIDGET CONTAINER

        <aside id="categories-3" class="widget widget_categories cf">

********************************************************************/



/* Widget container, contains all parts of a widget */

.widget {

        font-size: 14px;

        line-height:                 1.3;

        color:                                 #666666;

        margin-bottom:         30px;

}



/* Widget container, when hovered */

.widget:hover { 

          color:                                 #000000;

}





/********************************************************************

        Links inside Widgets

********************************************************************/



/* All links inside widgets */

.widget a { 

          color:                                 #000000;

}



/* Links inside widgets, when parent .widget is hovered */

.widget:hover a { 

          color:                                 #0090d3;

}





/********************************************************************

        WIDGET TITLES

        <h3><i></i><span><span class="firstpart">Widget</span> Title</span></h3>

********************************************************************/



/* Widget title h3 container, contains all parts of widget title */

.widget div > h3,

.widget > h3 {

        color:                                 #0090d3;

        margin:                                 0 0 15px 0; /* turning off default h3 margins, leaving only margin-bottom */

        font-size:                        32px;

        line-height:                 29px;

}



/* Widget title h3 container, when parent .widget is hovered */

.widget:hover div > h3,

.widget:hover > h3 { 

          color:                                 #000000;

}



/* Widget title text */

.widget div > h3 > span,

.widget > h3 > span {

}



/* First part of widget title text */

.widget h3 span .firstpart {

        color:                                 #000000;

        text-decoration:         none;

}



/* Global widget title icon */

.widget div > h3 i,

.widget > h3 i {

        display:                         inline-block;

        width:                                 24px;

        height:                                 24px;

        margin-right:                 15px;

        background-color: #ffffff;

        background-image: url( %tpldir%/images/icons.png );

}



/* Individual widget title icons */ 

.widget div > h3 i                                                 { background-position: -120px -216px }

.widget > h3 i                                                 { background-position: -120px -216px }

.widget_archive > h3 i                                 { background-position: -120px -24px }

.widget_tag_cloud > h3 i                         { background-position: -120px 0px }

.widget_recent_comments > h3 i         { background-position: -120px -72px }

.widget_links > h3 i                                { background-position: -120px -96px }

.widget_pages > h3 i                                 { background-position: -120px -120px }

.widget_recent_entries > h3 i         { background-position: -120px -144px }

.widget_meta > h3 i                                         { background-position: -120px -192px }

.widget_categories > h3 i                         { background-position: -120px -168px }



/* Individual widget title icons, when the parent .widget is hovered */ 

.widget:hover div > h3 i                                                 { background-position: -96px -216px }



.widget:hover > h3 i                                                 { background-position: -96px -216px }

.widget_archive:hover > h3 i                                 { background-position:  -96px -24px }

.widget_tag_cloud:hover > h3 i                         { background-position:  -96px 0px }

.widget_recent_comments:hover > h3 i         { background-position:  -96px -72px }

.widget_links:hover > h3 i                                 { background-position:  -96px -96px }

.widget_pages:hover > h3 i                                 { background-position:  -96px -120px }

.widget_recent_entries:hover > h3 i         { background-position:  -96px -144px }

.widget_meta:hover > h3 i                                         { background-position:  -96px -192px }

.widget_categories:hover > h3 i                         { background-position:  -96px -168px }





/********************************************************************

        "UL" Unordered lists inside WIDGETS

        Widgets displaying lists of something usually print them as "UL" list, e.g. 

        these default WP widgets: Recent Posts, Categories, Recent Comments, Pages...

********************************************************************/



/* All UL lists, including 2nd+ levels */

.widget ul {

        list-style:                         none;

        margin-top:                         0px;

        margin-bottom:                 0px;

        margin-left:                         0px;

        padding-left:                         0;

}



/* Only 1st level UL */

.widget > ul { 

          border-top:                         solid 1px #eeeeee 

}



/* 2nd+ level UL's */

.widget ul ul {

        padding-left:                         0px;

        margin-left:                         0px;

}



/* LI's of first level UL's */

.widget > ul  > li {

        margin:                                         0;

        padding:                                 7px 0 8px 0;

        border-bottom:                 solid 1px #eeeeee;

}





/* Uncomment to have a > character in front of LI items. Using CSS ISO codes and 

the :before or :after pseudo selectors. An alternative to images. For other CSS ISO codes 

see http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ */ 

.widget > ul > li:before {

        content: '\203a \00a0\00a0'; 

        margin-left: -10px;

}

.widget > ul  > li {

        padding-left: 10px;

}





/* All LI's on hover */

.widget li:hover { 

          background:                         #f7f7f7 

}



/* 2 columns for widgets that usually have rather short links 

and are (or can be: categories) displayed as flat list */

.widget_categories > ul > li, 

.widget_archive li, 

.widget_meta li {

        float:                                         left;

        width:                                         50%;

}

@media only screen and (max-width: 959px) {        

.widget_categories > ul > li, 

.widget_archive li, 

.widget_meta li {

        float:                                         none;

        width:                                         auto;

}

}



/********************************

 Uncomment to add icons to list items:

 ********************************/

/*

.widget > ul  > li {

        padding-left:                         20px;

}

.widget ul li i {

        display:                                 inline-block;

        width:                                         12px;

        height:                                 12px;

        background:                         transparent url("%tpldir%/images/icons.png") 0 -120px no-repeat; 

        margin-right:                         8px;

        margin-left:                         -20px;

        vertical-align:                 -1px;

}

*/

Hi Juggledad!

Thanks now I understand. In the end this is not really clean: if I need to modify the icon for a given widget, I need to apply to ".widget div > h3 i" and ".widget > h3 i"...
but it works perfectly!

However, how does it work for the mapping with .png including all the icons?

Again thanks for the tweaks!
Boris

you have to know the location of all the sprite in the image and tehn identify teh widget class that will uniquely identify the widget. in outer words, you need to know some css and how to read a html page or use a code examiner like firebug. And reading the on screen documentatin for 'Using Menu Icons' in the 'Editing CSS' section

OK thanks for your help.
Boris

Just to close the topic: by default, widget.css use sprites from another png file (icons.png) compared to the other menu icons (menu-icons-0090d3.png)... That's the reason why I was not getting the expected icons for my widget bar.

Again thanks for your kind help...