We Are Here To Help

Follow

Managing the Branding of Finance Apps

 

The Branding page is located within the admin panel on admin.finance.socrata.com.

Note: While the Open Budgets app is pictured below, all apps contain a branding section.

Header: Updates to this tab impact the Browser Tab, Header Bar, and Links in the Header Bar.

In the Header Tab, you can customize not only the content and styles of the header bar, but also the way the site is represented in the browser tab. All editing is done by clicking in to the text boxes and changing the content. No changes will be pushed to your live site until you click “Save Changes” at the top of the page.

Browser Tab

In the Browser tab, you can edit the tab titling and the icon (or “favicon”, as it is called in web development).

The Tab Titling takes in a phrase detailing what the site is, you can think of it as how a user would know to navigate back to your page if they had many tabs open and were switching between pages in their browser.

The Tab Icon takes in the URL for a hosted image. Many Finance apps customers choose to host their images in the same Open Data Platform instance as the underlying data of the site. To get the hosted URL from an image, simply left click and choose “copy image URL”.

Header Bar

From the Header Bar section, you can adjust the Organization Name, the Background Color, and the Header Bar Logo.

The Organization Name takes in a text value, usually the name of your municipality. In cases where the Header Bar Logo includes the name of your municipality, you may see this field left blank.

The Background Color field takes in a HEX color code to adjust the header’s color. The text on top is white (a static, non-adjustable requirement of the SPF product), so we recommend using darker shades and colors for legibility.

The Header Bar Logo URL field takes in the URL for a hosted image. There is a height restriction of 38px, but width is more flexible, and many customers chose to use this as an opportunity to use custom fonts for their municipality’s title. Many SPF customers choose to host their images in the same Open Data Platform instance as the underlying data of the site. To get the hosted URL from an image, simply left click and choose “copy image URL”.

Header Bar Links

In the Header Bar Links section you can add up to five (5) links to the header section of the site. Many organizations use this to link to other Finance apps sites, their Open Data Platform, their City Website, or other relevant sites/documents for the Budget. The Link Name section will reflect the name of the link you are adding, and the Link URL is the end location you want users to reach.

Home Page: Changes in this tab impact the Title, the Home Page Introduction, the Read More page, Hero Image, Budget Section Headers, and Social Sharing text.

In the Home Page tab, you can customize the general look of the home page, including the predominant messaging and cover photo of your site. All editing is done by clicking into the text boxes and changing the content. No changes will be pushed to your live site until you click “Save Changes” at the top of the page.

Jumbotron

The items under the Jumbotron heading control the text that overlays the cover photo of the site.

The Home Page Title is the large, centered text that announces the name of your Finance site.

The Home Page Introduction section gives you a space to introduce your viewing audience to the site. Customers will use this for a range of purposes, from a simple introduction to distributing further information about the budget. It is limited to 800 characters and only accepts basic HTML.

The Read More section allows you to include more in-depth messaging around the budget into the site. It does not have a word limit, and it also supports more complex HTML, so it is a great place to include images, charts, and other more granular information around the budget. 

Hero Image

The Hero Image is the cover photo for your site and is an opportunity to showcase something unique or picturesque about your municipality. Darker images work best, as the text on top of the image is white, but you can adjust the tint of the image using the “Hero Image Tint” dropdown in this section.

The Hero Image URL takes in the URL for a hosted image to act as the main photo for the site. For best results, we recommend an image that is at least 1280x1024px. You may need to crop/adjust the image outside of the admin panel to get it framed to your liking in the live site. Many SPF customers choose to host their images in the same Open Data Platform instance as the underlying data of the site. To get the hosted URL from an image, simply left click and choose “copy image URL”.

Section Headers

This Header is the app-specific title above each module. This should be used to summarize what the sections represent.

Social App Share Text

Here you can set the default text associated with clicking the twitter icon in the header. Note that this does not dictate what users say when they use that social share aspect of the site, but you can use it to guide the conversation.

Home Page Cards: Changes in this tab impact the messaging on the individual tiles for each module of your sites.

In the Home Page Cards tab, you can customize the language and the messaging on each of the cards representing the modules of your finance apps. It is here that you can change their titling, if you choose, to represent other aspects of the budget.

 

Footer: Edits within in this tab will reflect in the footer links. 

The Footer Tab allows you to modify links in the footer of the site. Here, you can add and remove the links at the bottom of your site. By default, Socrata puts access to the admin panel and a link to the data in this space. This makes these two aspects easy to find in a pinch, and we recommend keeping them; however, if you wish to remove them you may. The site supports up to 5 links. The Link Name section will reflect the name of the link you are adding, and the link url is the end location you want users to reach.

 


 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk