← Back to team overview

ubuntu-touch-coreapps team mailing list archive

Re: "[Ubuntu-phone] Tabs component styling

 

Hi Tim,

I've tried to use a custom theme for the MainView Header backgroundColor
attribute but it resulted in failure:

- The tabs header disappeared
- The following error appeared on the logs:

file:///usr/share/themes/Ambiance/qmltheme/NewTabsDelegate.qml:71:9: QML
NewTabBar: Cannot anchor to an item that isn't a parent or sibling.


The qmltheme I'm using (app-theme.qmltheme):


@qml-import(Ubuntu.Components 0.1);

.header {
backgroundColor: "blue";
}


And the main document:


MainView {


 Tabs {
id: tabNav

// News tab
Tab {
id: newsTab
title: i18n.tr("Facebook News")
page: NewsPage {
id: newsPage
anchors.margins: units.gu(2)
tools: mainActions
}
}

}


Component.onCompleted: {
Theme.loadTheme(Qt.resolvedUrl("app-theme.qmltheme"));
}

}

Thanks again !
Hugo.

2013/5/20 Hugo Lima <hmiguellima@xxxxxxxxx>

> Hi Tim,
>
> Thanks, I wasn't looking in the right place, I saw the NewTabsDelegate
> before but didn't fully understood how it was all integrated.
>
> So the MainView has a Header component, and the Tabs component provides a
> specialized delegate (NewTabsDelegate) for the Header contents.
>
> I'll look some more into this and try to use this to theme the Facebook
> app !
>
> Cheers,
> Hugo.
>
>
>
>
> 2013/5/17 Tim Peeters <tim.peeters@xxxxxxxxxxxxx>
>
>>  Hi Hugo,
>>
>> Tabs don't have a special header, they are a header just as any other
>> header (created by the MainView).
>> The header background is already themable via the theme's .header
>> backgroundSource and backgroundColor properties.
>> See
>> http://developer.ubuntu.com/api/ubuntu-12.10/qml/mobile/theming-components.htmlfor more information about changing theming properties.
>>
>> Making it transparent is not recommendable because then you would see the
>> contents of the page behind the text, but setting the background of the
>> mainview and of the header to the same image/color will give the illusion
>> of having a transparent header background.
>>
>> Greets,
>> Tim.
>>
>>
>> On 05/16/2013 01:41 AM, Hugo Lima wrote:
>>
>>   Hi,
>>
>>  I'm in the Facebook app team, and I'd like to ask if is there any plans
>> to be able to theme the Tabs component header background color or make it
>> transparent. (or if it's already possible, how)
>>
>>  This backgroundColor property or just backgroundImage will be great to
>> add a more branded look into the Facebook app.
>>
>>  Cheers,
>>  Hugo.
>>
>>
>>
>>
>

References