|
#1
![Old](images/bytesforall/statusicon/post_old.gif)
Mar 8, 2013, 02:17 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Mar 8, 2013, 05:28 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Mar 8, 2013, 06:13 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Mar 8, 2013, 06:26 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Mar 8, 2013, 08:00 AM
|
|
I forgot to change one indeed. I changed it, but result remains the same.
|
#6
![Old](images/bytesforall/statusicon/post_old.gif)
Mar 11, 2013, 03:50 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Mar 11, 2013, 04:57 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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
|
#9
![Old](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 05:07 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 06:50 AM
|
|
OK thanks :-)
Here is the file attached.
|
#11
![Old](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 07:50 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 09:15 AM
|
|
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](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 10:23 AM
|
![juggledad's Avatar](image.php?s=c56666c48529ae6d8d3a1964efc8e150&u=675&dateline=1243595674) |
|
|
23,765 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](images/bytesforall/statusicon/post_old.gif)
Mar 12, 2013, 01:37 PM
|
|
OK thanks for your help.
Boris
|
#15
![Old](images/bytesforall/statusicon/post_old.gif)
Mar 13, 2013, 04:04 AM
|
|
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...
|
|