Mikeonhisboat Posted January 3, 2020 Share Posted January 3, 2020 As per below image - how do I get the coloured titlebar to extend full width of screen? In titlebar.xml i have it pointing to exact same appearance image as I use for my tab bar. And that tab bar image does fit the screen. So the issue isn't about resizing the image. I think it's because the 'titlebar' itself does not extend the full width of the screen as the stuff to te right - fm, world, continue etc buttons I think are all in a separate container and the header bar is split between the container for the titlebar and the one for these right hand buttons. But I can't figure out how to solve that. How do I get everything in header into one container with one background image? Or as a workaround, how do I set a background image for the righthand buttons (if I use same image as titlebar it'll all look as if it's just one image) On a separate note. Is there any way to increase the opacity of this image? Via the image's paper file I imagine? But what would I add in there to increase opacity? Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 The container of the paper graphic need extending, its closed off before the buttons in the code. Just move the </container> to the very end of the code Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 Ah I tried that - but that then covers the right hand side buttons (or possibly pushes them off the page). I just et a wall of colour extending out to the right edge. With no other buttons visible. Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 Copy the container appearance to the 2nd container as well. Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 Still no dice. Have tried copying appearance="boxes/custom/interface/tab bar/paper" into each other obvious line with no impact. This is my titlebar.xml. Where am I going wrong with the copy-pasting? <!-- normal header container used on all screens except the match screen --> <panel> <container navigation_container="true" > <layout class="stick_to_sides_attachment" alignment="all" /> <attachment_group class="horizontal_arrange" horizontal_alignment="right,extend" horizontal_gap="-15"/> <container class="bordered_box" appearance="boxes/custom/interface/tab bar/paper" red_replacement="primary" blue_replacement="background" green_replacement="black"> <layout class="arrange_horizontal_attachment" alignment="left,extend" offset="0" gap="-10" /> <layout class="fit_children_attachment" alignment="vertical" offset="0" gap="0" /> <layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" /> <!-- Back Button --> <widget class="screen_history_button" id="back" fixed="true" width="50" appearance="buttons/custom/interface/navigation bar/button" icon="icons/26px/back" icon_alignment="centre" gamepad_icon_alignment="top,centre_x"> <attachment class="get_global_attachment" get_property="hnpt" set_property="itms" /> <record id="click_event" event_id="GOTO" event_target="brow" scin="-3" /> <string id="controller_button" value="left_shoulder" /> <attachment class="test_global_attachment" get_property="MnuS" mode="1" value="true" set_property="hidn" skip_if_null="true" /> </widget> <!-- Next Button --> <widget class="screen_history_button" id="forw" fixed="true" width="50" appearance="buttons/custom/interface/navigation bar/button" icon="icons/26px/forward" icon_alignment="centre" gamepad_icon_alignment="top,centre_x"> <attachment class="get_global_attachment" get_property="hnit" set_property="itms" /> <record id="click_event" event_id="GOTO" event_target="brow" scin="-2" /> <string id="controller_button" value="right_shoulder" /> <attachment class="test_global_attachment" get_property="MnuS" mode="1" value="true" set_property="hidn" skip_if_null="true" /> </widget> <widget class="picture" file="chrome/patterns/title stripes" width="36" image_alignment="centre" red_replacement="secondary"/> <boolean id="should_force_refresh" value="true" /> <container height="50"> <layout class="arrange_horizontal_attachment" alignment="right,extend" offset="4" gap="-15" /> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" apply_to_children="true" /> <!-- main logos container --> <container id="MnLg"> <layout class="arrange_horizontal_attachment" alignment="left,extend" offset="8" gap="0" /> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" apply_to_children="true" /> <!--left sided main logo and quick flicks--> <container id="flik" width="80"> <layout class="arrange_horizontal_attachment" layout="-1,20" gap="6" /> <!-- Primary Logo --> <widget class="picture" id="lgtF" scale_picture="true" keep_aspect_ratio="true" image_alignment="centre"> <layout class="stick_to_sides_attachment" alignment="vertical" inset="4" /> <attachment class="test_setting_attachment" get_setting="show_badges" default_value="true" set_property="hidden"> <boolean id="value" value="false" /> </attachment> <!-- tells the picture to listen to the 'main picture' global property being set, and set its own file property from it --> <record id="object_property"> <integer id="get_property" value="mnpc" /> <integer id="set_property" value="file" /> </record> </widget> <!--quick flicks--> <container> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" /> <widget class="quick_flick_button" id="flkl" auto_size="all" appearance="icons/16px/up" icon_enabled="true" cached="true" step="-1" red_replacement="secondary" > <layout class="stick_to_sides_attachment" alignment="left,top" inset="16,0,0,0" /> <attachment class="get_global_attachment" get_property="stPQ" set_property="click_event" /> </widget> <widget class="quick_flick_button" id="flkr" auto_size="all" appearance="icons/16px/down" cached="true" step="1" red_replacement="secondary" > <layout class="stick_to_sides_attachment" alignment="left,top" inset="30,0,0,0" /> <attachment class="get_global_attachment" get_property="stNQ" set_property="click_event" /> </widget> </container> </container> <!--object name and search bar--> <widget class="titlebar_search_panel" id="Tits"> <record id="object_property"> <integer id="get_property" value="objt" /> <integer id="set_property" value="objt" /> </record> </widget> </container> <!--in game editor edit object button--> <container width="40"> <attachment class="test_global_attachment" get_property="gset" value="false" set_property="hidn" /> <attachment_group class="horizontal_arrange_autosize_vertical_centre" horizontal_gap="-15" /> <widget class="edit_object_icon_button" id="edit" fixed="true" cant_be_toggled="true" icon="icons/16px/edit" icon_alignment="centre" appearance="chrome/buttons/items/button" auto_size="none" multiline="false" width="40" height="42" secondary_icon_enabled="false"> <record id="primary_icon_properties" red_replacement="secondary" /> <attachment class="flash_colour_attachment" auto_start="false" rate="850"> <colour id="first_colour" red="49" green="52" blue="63" /> <colour id="second_colour" red="46" green="103" blue="182" /> <flags id="colour_property" value="bkcl" /> </attachment> </widget> </container> </container> </container> <!-- Group of buttons in the top right --> <container > <attachment_group class="horizontal_arrange_autosize_vertical_centre" horizontal_gap="-15" /> <!-- World dropdown --> <widget class="world_popup_button" id="wrld" width="58" height="39" icon="icons/26px/world" appearance="chrome/buttons/items/button" secondary_icon_enabled="false" icon_alignment="centre" alignment="centre" > <attachment class="test_multiple_globals_attachment" default_value="true" > <list id="get_properties"> <record get_property="gset" test_mode="equal" value="false" /> <record get_property="iVMg" test_mode="equal" comparison_mode="or" value="true" /> </list> <integer id="set_property" value="hidn" /> </attachment> </widget> <!-- Comment this out if the tutorial is disabled --> <!-- Help button --> <widget class="icon_button" id="hlpB" appearance="chrome/buttons/items/button" hidden="true" icon="icons/26px/help" width="58" height="39" disable_wheel="true" icon_alignment="centre" click_event="ohlp" > <translation id="hint" translation_id="466619" type="use" value="Help[COMMENT: Help button on titlebar]" /> </widget> <!-- FM button --> <widget class="popup_button" id="fmst" fixed="true" appearance="chrome/buttons/items/button" icon="icons/26px/fm" width="58" height="39" disable_wheel="true" secondary_icon_enabled="false" icon_alignment="centre_left" controller_button="start_button" gamepad_icon_alignment="centre_right"> <event id="click_notification_event" event_id="FM" item="NULL" /> <event id="menu_layout_notification_event" event_id="mlne" event_target="fmst" /> <record id="items" file="menus/game" /> <translation id="hint" translation_id="292829" type="use" value="Options[COMMENT: menubar game options button]" /> </widget> <!-- change manager button --> <widget class="popup_button" id="ChMN" appearance="chrome/buttons/items/button" disable_wheel="true" height="39" auto_size="horizontal" text="-" style="semi_bold" > <event id="click_notification_event" event_id="FM" item="NULL" /> <event id="menu_layout_notification_event" event_id="mlne" event_target="ChMN" /> <attachment class="get_global_attachment" get_property="Hmen" set_property="itms" /> <attachment class="get_global_attachment" get_property="HmeV" set_property="Shwn" skip_if_null="false"/> <attachment class="get_global_attachment" get_property="HmeD" set_property="disa" skip_if_null="false"/> <attachment class="get_global_attachment" get_property="CHum" set_property="slct" /> <attachment class="test_screen_size_attachment"> <list id="properties"> <record> <flags id="alignment" value="horizontal" /> <integer id="min_value" value="1366" /> <integer id="max_value" value="10000" /> <symbol id="set_property" value="auto_size_maximum_width" /> <integer id="true_value" value="200" /> <integer id="false_value" value="60" /> </record> </list> </attachment> </widget> <container width="20" /> <!--calendar button--> <widget class="current_game_date_widget" id="cgdw" height="60"> <attachment class="test_global_attachment" get_property="cont" set_property="disa"> <list id="value"> <integer value="-5" /> </list> </attachment> </widget> <!-- continue button --> <container id="ctnu" file="generic/continue" height="60" width="150"> </container> </container> </container> </panel> Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 <container class="bordered_box" appearance="boxes/custom/interface/tab bar/paper" red_replacement="primary" blue_replacement="background" green_replacement="black"> to replace <!-- Group of buttons in the top right --> <container > Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 Awesome! Thankyou - that worked. 1 Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 Next question! How do I change the opacity of this image? Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 Just now, Mikeonhisboat said: Next question! How do I change the opacity of this image? boxes/custom/interface/tab bar/paper edit that graphic file Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 And another question - how do I move the back/next and up/down quick flicks arrows about? Looking again at titlebar.xml above, what text controls their positioning in terms of height and distance across the page? I don't have any settings re/these arrows in header.xml. Only in titlebar.xml as above. Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 24 minutes ago, Mikeonhisboat said: And another question - how do I move the back/next and up/down quick flicks arrows about? Looking again at titlebar.xml above, what text controls their positioning in terms of height and distance across the page? I don't have any settings re/these arrows in header.xml. Only in titlebar.xml as above. Its written in the above. Primary Logo / Quck Flicks / Search bar is above each container. the position will be controlled with the inset="x,x,x,x" values Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 3, 2020 Author Share Posted January 3, 2020 Ah thanks - sorry should have seen that. That works re/quick flicks but I can't see anything positionally re the back and next arrows? Actually all I want to do is move the next arrow further to the left closer to the back arrow. Link to post Share on other sites More sharing options...
wkdsoul Posted January 3, 2020 Share Posted January 3, 2020 <layout class="arrange_horizontal_attachment" alignment="left,extend" offset="0" gap="-10" /> for the space and the width is in the first line or the arrow code. Link to post Share on other sites More sharing options...
TCSSkin Posted January 5, 2020 Share Posted January 5, 2020 Good to see you fixed it, was gonna comment yesterday but never got round to it. Personally, what I would've done is moved the contents of the panel into a container so it looks like <panel> <container> <attachment_group class="horizontal_arrange" horizontal_alignment="right,extend" horizontal_gap="-15"/> titlebar stuff </container> </panel> then i'd add a <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true"/> underneath the panel tag. This basically lets us layer stuff on top of eachother. Then I'd use <container class="bordered_box" appearance="boxes/custom/interface/tab bar/paper" red_replacement="primary" /> above the titlebar container (as when stuff is being layered, it works in a descending order, meaning it looks like so. <!-- normal header container used on all screens except the match screen --> <panel> <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true"/> <container class="bordered_box" appearance="boxes/custom/interface/tab bar/paper" red_replacement="primary" /> <container> <attachment_group class="horizontal_arrange" horizontal_alignment="right,extend" horizontal_gap="-15"/> <container> <layout class="arrange_horizontal_attachment" alignment="left,extend" offset="0" gap="-10" /> <layout class="fit_children_attachment" alignment="vertical" offset="0" gap="0" /> <layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" /> <!-- Back Button --> <widget class="screen_history_button" id="back" fixed="true" width="50" appearance="buttons/custom/interface/navigation bar/button" icon="icons/26px/back" icon_alignment="centre" gamepad_icon_alignment="top,centre_x"> <attachment class="get_global_attachment" get_property="hnpt" set_property="itms" /> <record id="click_event" event_id="GOTO" event_target="brow" scin="-3" /> <string id="controller_button" value="left_shoulder" /> <attachment class="test_global_attachment" get_property="MnuS" mode="1" value="true" set_property="hidn" skip_if_null="true" /> </widget> <!-- Next Button --> <widget class="screen_history_button" id="forw" fixed="true" width="50" appearance="buttons/custom/interface/navigation bar/button" icon="icons/26px/forward" icon_alignment="centre" gamepad_icon_alignment="top,centre_x"> <attachment class="get_global_attachment" get_property="hnit" set_property="itms" /> <record id="click_event" event_id="GOTO" event_target="brow" scin="-2" /> <string id="controller_button" value="right_shoulder" /> <attachment class="test_global_attachment" get_property="MnuS" mode="1" value="true" set_property="hidn" skip_if_null="true" /> </widget> <widget class="picture" file="chrome/patterns/title stripes" width="36" image_alignment="centre" red_replacement="secondary"/> <boolean id="should_force_refresh" value="true" /> <container height="50"> <layout class="arrange_horizontal_attachment" alignment="right,extend" offset="4" gap="-15" /> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" apply_to_children="true" /> <!-- main logos container --> <container id="MnLg"> <layout class="arrange_horizontal_attachment" alignment="left,extend" offset="8" gap="0" /> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" apply_to_children="true" /> <!--left sided main logo and quick flicks--> <container id="flik" width="80"> <layout class="arrange_horizontal_attachment" layout="-1,20" gap="6" /> <!-- Primary Logo --> <widget class="picture" id="lgtF" scale_picture="true" keep_aspect_ratio="true" image_alignment="centre"> <layout class="stick_to_sides_attachment" alignment="vertical" inset="4" /> <attachment class="test_setting_attachment" get_setting="show_badges" default_value="true" set_property="hidden"> <boolean id="value" value="false" /> </attachment> <!-- tells the picture to listen to the 'main picture' global property being set, and set its own file property from it --> <record id="object_property"> <integer id="get_property" value="mnpc" /> <integer id="set_property" value="file" /> </record> </widget> <!--quick flicks--> <container> <layout class="stick_to_sides_attachment" alignment="vertical" inset="0" /> <widget class="quick_flick_button" id="flkl" auto_size="all" appearance="icons/16px/up" icon_enabled="true" cached="true" step="-1" red_replacement="secondary" > <layout class="stick_to_sides_attachment" alignment="left,top" inset="16,0,0,0" /> <attachment class="get_global_attachment" get_property="stPQ" set_property="click_event" /> </widget> <widget class="quick_flick_button" id="flkr" auto_size="all" appearance="icons/16px/down" cached="true" step="1" red_replacement="secondary" > <layout class="stick_to_sides_attachment" alignment="left,top" inset="30,0,0,0" /> <attachment class="get_global_attachment" get_property="stNQ" set_property="click_event" /> </widget> </container> </container> <!--object name and search bar--> <widget class="titlebar_search_panel" id="Tits"> <record id="object_property"> <integer id="get_property" value="objt" /> <integer id="set_property" value="objt" /> </record> </widget> </container> <!--in game editor edit object button--> <container width="40"> <attachment class="test_global_attachment" get_property="gset" value="false" set_property="hidn" /> <attachment_group class="horizontal_arrange_autosize_vertical_centre" horizontal_gap="-15" /> <widget class="edit_object_icon_button" id="edit" fixed="true" cant_be_toggled="true" icon="icons/16px/edit" icon_alignment="centre" appearance="chrome/buttons/items/button" auto_size="none" multiline="false" width="40" height="42" secondary_icon_enabled="false"> <record id="primary_icon_properties" red_replacement="secondary" /> <attachment class="flash_colour_attachment" auto_start="false" rate="850"> <colour id="first_colour" red="49" green="52" blue="63" /> <colour id="second_colour" red="46" green="103" blue="182" /> <flags id="colour_property" value="bkcl" /> </attachment> </widget> </container> </container> </container> <!-- Group of buttons in the top right --> <container > <attachment_group class="horizontal_arrange_autosize_vertical_centre" horizontal_gap="-15" /> <!-- World dropdown --> <widget class="world_popup_button" id="wrld" width="58" height="39" icon="icons/26px/world" appearance="chrome/buttons/items/button" secondary_icon_enabled="false" icon_alignment="centre" alignment="centre" > <attachment class="test_multiple_globals_attachment" default_value="true" > <list id="get_properties"> <record get_property="gset" test_mode="equal" value="false" /> <record get_property="iVMg" test_mode="equal" comparison_mode="or" value="true" /> </list> <integer id="set_property" value="hidn" /> </attachment> </widget> <!-- Comment this out if the tutorial is disabled --> <!-- Help button --> <widget class="icon_button" id="hlpB" appearance="chrome/buttons/items/button" hidden="true" icon="icons/26px/help" width="58" height="39" disable_wheel="true" icon_alignment="centre" click_event="ohlp" > <translation id="hint" translation_id="466619" type="use" value="Help[COMMENT: Help button on titlebar]" /> </widget> <!-- FM button --> <widget class="popup_button" id="fmst" fixed="true" appearance="chrome/buttons/items/button" icon="icons/26px/fm" width="58" height="39" disable_wheel="true" secondary_icon_enabled="false" icon_alignment="centre_left" controller_button="start_button" gamepad_icon_alignment="centre_right"> <event id="click_notification_event" event_id="FM" item="NULL" /> <event id="menu_layout_notification_event" event_id="mlne" event_target="fmst" /> <record id="items" file="menus/game" /> <translation id="hint" translation_id="292829" type="use" value="Options[COMMENT: menubar game options button]" /> </widget> <!-- change manager button --> <widget class="popup_button" id="ChMN" appearance="chrome/buttons/items/button" disable_wheel="true" height="39" auto_size="horizontal" text="-" style="semi_bold" > <event id="click_notification_event" event_id="FM" item="NULL" /> <event id="menu_layout_notification_event" event_id="mlne" event_target="ChMN" /> <attachment class="get_global_attachment" get_property="Hmen" set_property="itms" /> <attachment class="get_global_attachment" get_property="HmeV" set_property="Shwn" skip_if_null="false"/> <attachment class="get_global_attachment" get_property="HmeD" set_property="disa" skip_if_null="false"/> <attachment class="get_global_attachment" get_property="CHum" set_property="slct" /> <attachment class="test_screen_size_attachment"> <list id="properties"> <record> <flags id="alignment" value="horizontal" /> <integer id="min_value" value="1366" /> <integer id="max_value" value="10000" /> <symbol id="set_property" value="auto_size_maximum_width" /> <integer id="true_value" value="200" /> <integer id="false_value" value="60" /> </record> </list> </attachment> </widget> <container width="20" /> <!--calendar button--> <widget class="current_game_date_widget" id="cgdw" height="60"> <attachment class="test_global_attachment" get_property="cont" set_property="disa"> <list id="value"> <integer value="-5" /> </list> </attachment> </widget> <!-- continue button --> <container id="ctnu" file="generic/continue" height="60" width="150"> </container> </container> </container> </panel> Does essentially the same thing, just different (and a bit easier to understand to me). That's what I love about skinning, multiple ways of doing the same thing. Link to post Share on other sites More sharing options...
Mikeonhisboat Posted January 6, 2020 Author Share Posted January 6, 2020 Thanks man - super helpful! Getting there! Link to post Share on other sites More sharing options...
TCSSkin Posted January 6, 2020 Share Posted January 6, 2020 As bigheaded as it sounds, take a look through some of my code in TCS, I comment it fairly throughouly (if I can remember), match title bar.xml is a good example 1 Link to post Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now