Re: [xwiki-users] Help needed with customizing of Toucan skin
Hi,
On Sat, Aug 28, 2010 at 12:06 PM, Kaya Saman kayasa...@gmail.com wrote:
Thanks very much for the advise and the links.
I read through them and now understand a bit more!!
However, since I attempted to customize the basic toucan.css file by
commenting out the old image code and adding new image code in. Eg:
body {
font-size: 87.5%; /* 10px */
font-family: sans-serif;
color: #222;
width: 100%;
padding: 0;
margin: 0;
min-width: 970px;
###background-image: url( images/colors/gray/H4x4-GRAY.png );
This is not the way CSS comments work. Because of the parsing error,
the browser ignores the the rule with the wrong syntax and the rule
after. You need to use this syntax:
/* comment on one line or
on multiple lines */
Raluca.
background-image: url($xwiki.getSkinFile(gpl.png));
background-color: #fff;
}
I am still lost as I'm not actually sure which image makes for the
background itself - not the default white area where the text goes but
the area behind the whole wiki that for generic Toucan skin is grey but
then is changed to purple on the http://platform.xwiki links.
As I've mention I managed to change the top left picture, and the logo
which was easy. However on my first attempt I did change the rest but
after altering again things started to go funny!!
I'm really lost with this one.
Regards,
Kaya
On 08/28/2010 11:32 AM, Raluca Stavro wrote:
Hello,
I tend to think that your CSS selectors are not specific enough. See
http://www.w3.org/TR/CSS2/cascade.html .
You have to make sure that your CSS rules are taken in account after
the default XWiki CSS rules (ex: CSS StyleSheet linked in the header
after the default ones that contain the rules that you want to change
= this can be done by using skin extensions
http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
) and you have to make sure that your selector's specificity is
correct.
Raluca.
On Sat, Aug 28, 2010 at 9:38 AM, Kaya Samankayasa...@gmail.com wrote:
Thanks Lockie for the suggestion only the same thing is happening!!
Firebug definitely shows the CSS alright but I alter what the screen is
telling and nothing happens even though Firebug reports the change after
a refresh
The issue is that the CSS is quite complex and am no CSS expert meaning
that if things are dependent on certain criteria I won't be able to see it.
Am back where I started I guess :-(
Regards,
Kaya
On 08/28/2010 03:51 AM, Lockie wrote:
Hi Kaya,
While I haven't worked with Toucan skin before, the easiest way to edit the
.css file of any skin is to get the Firebug addon for the Firefox browser.
Then its just a matter clicking on the html in the main panel, and seeing
what css is related to which part of the skin in the right panel.
http://getfirefox.com/
http://getfirebug.com/
Hope that helps,
Lockie
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
Re: [xwiki-users] Help needed with customizing of Toucan skin
Hello,
On Sat, Aug 28, 2010 at 4:21 PM, Kaya Saman kayasa...@gmail.com wrote:
Ok I actually managed to sort this out
First up I played around with the style.css file and used the @include
statement to include the css for the red background just to try out.
I then created a new css style sheet called bg-mod.css under
/usr/local/apache-tomcat-6.0/webapps/xwiki/skins/toucan/css/colors in my
FreeBSD jail which has this content:
body#body,
#allviewpanels .accordionTabContentBox{background-image: url(
../../images/colors/gray/H4x4-GRAY.png); }
body#body #xwikimaincontainer,
body.hideright #xwikimaincontainer,
body#body.hideright #xwikimaincontainerinner,
body.importbody #xwikimaincontainerinner,
body.exportbody #xwikimaincontainerinner,
body.adminbody #xwikimaincontainerinner,
body.hidelefthideright #xwikimaincontainerinner,
body#body.hidelefthideright #xwikimaincontainerinner
{ background-image :url( ../../images/colors/bg/gpl.png) ; }
#xwikimaincontainerinner,
body#body.editbody #xwikimaincontainerinner,
body#body.eportbody #xwikimaincontainer,
body#body.importbody #xwikimaincontainer,
body#body.adminbody #xwikimaincontainer,
body#body.hidelefthideright #xwikimaincontainer,
body#body.hideleft #xwikimaincontainer,
body#body.editbody #xwikimaincontainer
{ background-image :url( ../../images/colors/bg/gpl_right.png) ;}
body#body.editbody #globallinks,
#globallinks,
#rightPanels,
#editPanels.panels{ background-image: url(
../../images/colors/bg/gpl.png);}
#company { background-image: url( ../../images/colors/bg/gpl.png); }
I then created the subdir under images/colors called bg and uploaded
some files into it.
My style.css file now looks like so:
@import microformats.css;
@import toucan.css;
@import css/colors/bg-mod.css;
After that was done and tested I edited the toucan.css file generating
this code:
#companylogo {
padding: 0;
###background-color: #FFF;
###background-color: #666;
background-color: #transparent;
margin-right: 220px;
###margin-right: 0px;
height: 80px;
###background-image: url($xwiki.getSkinFile(sunv210mod.png));
}
What seems to not have been working is the
url($xwiki.getSkinFile(sunv210mod.png) line I got from here:
http://platform.xwiki.org/xwiki/bin/view/DevGuide/Skins#HD.OverridingtheSkincomponents
$xwiki.getSkinFile(sunv210mod.png) searches the image file like this :
1. in the current skin
1.1 in the specified Skin Document (
http://platform.xwiki.org/xwiki/bin/view/DevGuide/Skins#HA.CreatingaSkindocument
)
1.2 if no success, in the '/skins/myskin/' directory (in your
case: '/skins/toucan/')
1.3 if no success, in the '/resources/' directory
2. if no success, in the parent skin (if the current skin is a Skin
Document and has set a parent skin)
3. if no success, in the default base skin directory (the one set it
'xwiki.cfg')
So, do like you did with the other images - put it under the '/bg/'
directory and use a relative path for the url:
#companylogo {
background-image: url(../../images/colors/bg/sunv210mod.png);
}
or attach the image to the current Skin Document.
Raluca.
I mean either it does work or I just don't know how to use it but never
the less what I wanted to achieve is done to an extent :-)
Thanks for all the help and regards,
Kaya
On 08/28/2010 11:32 AM, Raluca Stavro wrote:
Hello,
I tend to think that your CSS selectors are not specific enough. See
http://www.w3.org/TR/CSS2/cascade.html .
You have to make sure that your CSS rules are taken in account after
the default XWiki CSS rules (ex: CSS StyleSheet linked in the header
after the default ones that contain the rules that you want to change
= this can be done by using skin extensions
http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
) and you have to make sure that your selector's specificity is
correct.
Raluca.
On Sat, Aug 28, 2010 at 9:38 AM, Kaya Samankayasa...@gmail.com wrote:
Thanks Lockie for the suggestion only the same thing is happening!!
Firebug definitely shows the CSS alright but I alter what the screen is
telling and nothing happens even though Firebug reports the change after
a refresh
The issue is that the CSS is quite complex and am no CSS expert meaning
that if things are dependent on certain criteria I won't be able to see it.
Am back where I started I guess :-(
Regards,
Kaya
On 08/28/2010 03:51 AM, Lockie wrote:
Hi Kaya,
While I haven't worked with Toucan skin before, the easiest way to edit the
.css file of any skin is to get the Firebug addon for the Firefox browser.
Then its just a matter clicking on the html in the main panel, and seeing
what css is related to which part of the skin in the right panel.
http://getfirefox.com/
http://getfirebug.com/
Hope that helps,
Lockie
___
users mailing list
users@xwiki.org
[xwiki-users] [Proposal][UX] Recent Changes Improvements
Hi, This is a page centric proposal for Recent Changes: * Partial Prototype (Firefox) http://incubator.myxwiki.org/xwiki/bin/view/Improvements/ActivityStreamP3D * Some screenhots http://incubator.myxwiki.org/xwiki/bin/view/Improvements/ActivityStreamV3 Any feedback is greatly appreciated. Thanks, Caty P.S: Older user centric proposal was http://incubator.myxwiki.org/xwiki/bin/view/Improvements/ActivityStreamV2 ___ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
[xwiki-users] FWD: Calendar Application on XE 2.4 - i18n characters and others
Hi Raluca/Lockie/XWiki Users, I have 3 questions: 1) How can I convert the XWiki.CalendarSheet from XWiki 1.0 to XWiki 2.0 syntax, so I can use Annotations on it? 2) Why international characters (like ç, õ, ã) are not displayed correctly only on the event title, both on the events list as well as on the calendar itself? They display correctly on all the other fields (description, category etc). 3) I would like to have independent Calendars for different Spaces. Only creating a page and including XWiki.CalendarSheet on it (like Main.EventCalendar) is the solution? Can I use Rights Access on this page as well? Thanks for all the help so far. Regards, Ramon Gomes Brandão ___ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
[xwiki-users] FWD: TAG Application with international characters
Hi, In the Tags Application at the bottom of Main.WebHome, all the assigned tags are displayed correctly with international characters (like í, ç, ô á etc). When Ii click on one of them to present the tagged documents, the tag appears all messed up due to the intl chars (such as Atilde; in place of í etc). Clicking on it, a Failed to execute velocity macro message appears (maybe due to the invalid URL, example for the word índio .../Main/Tags?do=viewTagtag=%C3%83%C2%ADndio). How can I fix that? Regards, Ramon Gomes Brandão ___ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
