Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Aside widget bar: problem with sprites


  #1  
Old Mar 8, 2013, 02:17 AM
bdebossoreille
 
11 posts · Mar 2013
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

Last edited by bdebossoreille; Mar 8, 2013 at 02:20 AM.
  #2  
Old Mar 8, 2013, 05:28 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 8, 2013, 06:13 AM
bdebossoreille
 
11 posts · Mar 2013
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
  #4  
Old Mar 8, 2013, 06:26 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I said
Quote:
everywhere you see '.widget > h3' you could add, just before it '.widget div > h3,'
you replaced it
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 8, 2013, 08:00 AM
bdebossoreille
 
11 posts · Mar 2013
I forgot to change one indeed. I changed it, but result remains the same.
  #6  
Old Mar 11, 2013, 03:50 AM
bdebossoreille
 
11 posts · Mar 2013
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!
  #7  
Old Mar 11, 2013, 04:57 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 12, 2013, 04:47 AM
bdebossoreille
 
11 posts · Mar 2013
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.
  #9  
Old Mar 12, 2013, 05:07 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go to dashboard->appearances->Montezuma Options (mto)->Export Import->Current Montezuma Settings:
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Mar 12, 2013, 06:50 AM
bdebossoreille
 
11 posts · Mar 2013
OK thanks :-)
Here is the file attached.
Attached Files
File Type: txt Montezuma-apericut.txt (73.0 KB, 403 views)
  #11  
Old Mar 12, 2013, 07:50 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
*/
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Mar 12, 2013, 09:15 AM
bdebossoreille
 
11 posts · Mar 2013
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
  #13  
Old Mar 12, 2013, 10:23 AM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Mar 12, 2013, 01:37 PM
bdebossoreille
 
11 posts · Mar 2013
OK thanks for your help.
Boris
  #15  
Old Mar 13, 2013, 04:04 AM
bdebossoreille
 
11 posts · Mar 2013
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...

Bookmarks

Tags
sprites, widget area

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] 2 Issues: Missing Sprites and Linked Images Won't Resize chicknlil Montezuma Theme 13 Oct 26, 2012 06:07 PM
how to use linked image sprites using css? over_cloud9 Center area post/pages 1 Jul 25, 2012 10:44 AM
[SOLVED] Trying to use CSS sprites in widget aeriph Sidebars & Widgets 1 Jul 21, 2012 12:18 AM
Sociable sprites not used in Atahualpa sidejack Plugins & Atahualpa 2 Sep 17, 2011 09:35 AM


All times are GMT -6. The time now is 08:15 PM.


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