{"id":1277,"date":"2022-09-13T17:40:24","date_gmt":"2022-09-13T21:40:24","guid":{"rendered":"https:\/\/wpdocs.bu.edu\/cds\/?page_id=1277"},"modified":"2023-06-26T10:31:17","modified_gmt":"2023-06-26T14:31:17","slug":"apply-brand-styles","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/cds\/custom-features-for-your-theme\/apply-brand-styles\/","title":{"rendered":"Applying Brand Styles to Post Content"},"content":{"rendered":"<ul>\n<li><a href=\"#widget-intro\">Branding Organization Widget<\/a><\/li>\n<li><a href=\"#spark-section\">Formatting a Section of a BU Landing Page<\/a><\/li>\n<li><a href=\"#spark-box\">Formatting a Promo Box of a BU Landing Page<\/a><\/li>\n<li><a href=\"#spark-event\">Formatting an Event<\/a><\/li>\n<\/ul>\n<p><span id=\"widget-intro\"><\/span><\/p>\n<h2>Branding Organization Widget<\/h2>\n<p>A special Widget has been included in the Faculty of Computing &amp; Data Sciences theme in an effort to apply a distinguished visual experience for sub-branded organizations of CDS (such as BU Spark!).<\/p>\n<h3>Where can the widget be used?<\/h3>\n<p>It&#8217;s accessible from every editable page, post, program, story, statistic, and profile type within the WordPress admin.<br \/>\nThe widget itself is labeled <strong>Branding Organization<\/strong> and looks like this:<\/p>\n<p><img loading=\"lazy\" src=\"\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM-1024x648.png\" alt=\"\" width=\"1024\" height=\"648\" class=\"aligncenter size-large wp-image-1476\" srcset=\"https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM-1024x648.png 1024w, https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM-300x190.png 300w, https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM-768x486.png 768w, https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM-1536x972.png 1536w, https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-3.10.57-PM.png 1657w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Select Branding<\/h3>\n<p>Select an organization from the dropdown to apply its visual branding to the page, post, <a href=\"https:\/\/wpdocs.bu.edu\/cds\/template-and-content-examples\/cds-degrees-programs\/\">program<\/a>, <a href=\"https:\/\/wpdocs.bu.edu\/cds\/custom-features-for-your-theme\/stories-a-custom-post-type\/\">story<\/a>, <a href=\"https:\/\/wpdocs.bu.edu\/cds\/custom-features-for-your-theme\/bu-stats-plugin\/\">statistic<\/a> or <a href=\"https:\/\/wpdocs.bu.edu\/cds\/template-and-content-examples\/profiles\/\">profile<\/a> you may be editing. Your setting will apply upon selecting the <strong>Publish\/Update<\/strong> button on the admin page.<\/p>\n<p style=\"padding-left: 40px;\"><em><strong>NOTE:<\/strong><\/em> If you&#8217;re editing a parent, page with sub-pages nested within, the branding you select here will apply to all nested pages by default.<\/p>\n<h3>Ignore Inherited Branding?<\/h3>\n<p>Checking the &#8220;<em>Select to ignore the branding inherited from ancestor pages.<\/em>&#8221; checkbox will override and default to the CDS visual branding.<span id=\"spark-page\"><\/span><\/p>\n<p><span id=\"spark-section\"><\/span><\/p>\n<h2>Format a BU Landing Page Section or Promo Box (BU Spark! as an Example)<\/h2>\n<p>On BU Landing Page templates ONLY: Promo Boxes and entire sections can also be visually-styled to align with CDS partners and brands such as Spark!. Essentially: if there&#8217;s a <strong>Custom CSS Class<\/strong> input text field within a part or section of the BU Landing Page, it can be made Spark!.<\/p>\n<p>Here&#8217;s an example of how to adjust a section of BU Landing Pages and how to adjust an individual Promo Box:<\/p>\n<h3>Landing Page Sections<\/h3>\n<h5>1. From the <a href=\"https:\/\/www.bu.edu\/cds\/wp-admin\">WordPress Admin<\/a>: navigate to the BU Landing Page in question that you would like to alter sections or Promo Boxes to be branded Spark!<\/h5>\n<figure style=\"width: 610px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" src=\"https:\/\/images.tango.us\/public\/image_1717a7a7-713e-4b33-b76d-cdd5d4547e5a.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.5000&amp;fp-y=0.5000&amp;fp-z=1.0000&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1294\" width=\"600\" alt=\"From the WordPress Admin: navigate to the page in question that you would like to style entirely as BU Spark!\" height=\"824\" \/><figcaption class=\"wp-caption-text\"><em>(Research + Impact is being used as an example page.)<\/em><\/figcaption><\/figure>\n<h5>2. Click on Promo Space #1.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/edited_image_f8a2aeda-2d34-4b6b-9723-52448599525a.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.5000&amp;fp-y=0.5000&amp;fp-z=1.0000&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=904%3A595\" width=\"600\" alt=\"Click on Promo Space #1.\" \/><\/p>\n<\/div>\n<h5>3. In the Promo Space Custom Class(es) text input field, type in &#8220;<code>spark<\/code>&#8220;.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_244a750d-c20d-4ac3-bd5a-878e35dcd656.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.3429&amp;fp-y=0.6124&amp;fp-z=2.0586&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"In the Promo Space Custom Class(es) text input field, type in &quot;spark&quot;.\" \/><\/p>\n<\/div>\n<h5>4. Click on Update.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_fd283ce5-63dc-4c8c-8175-54a89095727e.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.9650&amp;fp-y=0.2780&amp;fp-z=3.0797&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Click on Update.\" \/><\/p>\n<h5>5. Click on View page.<\/h5>\n<\/div>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_844eadf2-fb33-48a6-bdb0-336e9dfe198f.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.1712&amp;fp-y=0.0849&amp;fp-z=2.9990&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Click on View page.\" \/><\/p>\n<\/div>\n<h5>6. Observe how the Promo Space #1 has adjusted to visually align with BU Spark.<\/h5>\n<div>\n<p>NOTE: This adjustment can be made to any of the other BU Landing Page sections with a similar text input field.<\/p>\n<p><img src=\"https:\/\/images.tango.us\/public\/image_7eadd6e0-cc11-489e-808d-73564787be37.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.5000&amp;fp-y=0.5000&amp;fp-z=1.0000&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1883%3A1295\" width=\"600\" alt=\"Observe how the Promo Space #1 has adjusted to visually align with BU Spark.\" \/><\/p>\n<\/div>\n<h3><span id=\"spark-box\"><\/span>Promo Boxes<\/h3>\n<h5>1. To adjust and edit only individual Promo Boxes: Click on Edit Page.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_6780de9a-8bc6-47a4-9973-e4d463a9720b.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.4204&amp;fp-y=0.0124&amp;fp-z=2.8408&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"To adjust and edit only individual Promo Boxes: Click on Edit Page.\" \/><\/p>\n<\/div>\n<h5>2. Remove the word &#8220;spark&#8221; from the Promo Space Custom Class(es) text input field.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_16c903f6-280a-4f25-a3d6-2c31149959b8.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.3429&amp;fp-y=0.5297&amp;fp-z=2.0586&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Remove the word &quot;spark&quot; from the Promo Space Custom Class(es) text input field.\" \/><\/p>\n<\/div>\n<h5>3. On one of the Promo Boxes within this Promo Space #1, click the arrow on the right side to expand for more options.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_7496b40c-d81d-444f-acd2-78a22ad9c708.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.7068&amp;fp-y=0.6772&amp;fp-z=3.0946&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"On one of the Promo Boxes within this Promo Space #1, click the arrow on the right side to expand for more options.\" \/><\/p>\n<\/div>\n<h5>4. Within this Promo Box: In the Custom Class(es) field, type in &#8220;spark&#8221;.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_f48a757d-7b05-4078-a388-abd4df14b3a2.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.3354&amp;fp-y=0.7571&amp;fp-z=2.0586&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Within this Promo Box: In the Custom Class(es) field, type in &quot;spark&quot;\" \/><\/p>\n<\/div>\n<h5>5. Click on <strong>Update<\/strong>.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_64005d37-f38a-4e06-a439-91060026544a.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.9650&amp;fp-y=0.2780&amp;fp-z=3.0797&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Click on Update\" \/><\/p>\n<\/div>\n<h5>6. Click on <strong>View page<\/strong>.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/screenshot_74a8ae4c-16e0-4461-8ce3-be45c7811d86.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.1712&amp;fp-y=0.0849&amp;fp-z=2.9990&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1884%3A1295\" width=\"600\" alt=\"Click on View page\" \/><\/p>\n<\/div>\n<h5>6. Observe how an individual Promo Box has now been updated to appear as Spark! branded.<\/h5>\n<div>\n<p><img src=\"https:\/\/images.tango.us\/public\/image_eabdf161-51b5-45e5-b866-a92ec7c44dc5.png?fm=png&amp;crop=focalpoint&amp;fit=crop&amp;fp-x=0.5000&amp;fp-y=0.5000&amp;fp-z=1.0000&amp;w=1200&amp;mark-w=0.2&amp;mark-pad=0&amp;mark64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmsucG5n&amp;ar=1885%3A1294\" width=\"600\" alt=\"Observe how an individual Promo Box has now been updated to appear as Spark! branded.\" \/><\/p>\n<\/div>\n<p><a href=\"https:\/\/app.tango.us\/app\/workflow\/e331ee56-4f0e-4bad-b885-441d9a603676?utm_source=magicCopy&amp;utm_medium=magicCopy&amp;utm_campaign=workflow%20export%20links\" target=\"_blank\" rel=\"noopener noreferrer\"><em><\/em><\/a><\/p>\n<h2><span id=\"spark-event\"><\/span>Format a Calendar Event to be Branded Spark!<\/h2>\n<p>To add the brand styling to an event, simply save the event in BU Calendar with a topic that represents the brand or organization. In this case, take a relevant event in BU Calendar and save it with a <strong>TOPIC<\/strong> of &#8220;<code>Spark<\/code>&#8220;. Due to updating infrastructure speeds, the resulting branding should render on the event in question in all instances where it appears on the sites theme within 30 minutes, to an hour.<\/p>\n<p><img loading=\"lazy\" src=\"\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-5.33.19-PM.png\" alt=\"\" width=\"528\" height=\"647\" class=\"aligncenter size-full wp-image-1495\" srcset=\"https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-5.33.19-PM.png 528w, https:\/\/wpdocs.bu.edu\/cds\/files\/2023\/02\/Screen-Shot-2023-02-07-at-5.33.19-PM-245x300.png 245w\" sizes=\"(max-width: 528px) 100vw, 528px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Branding Organization Widget Formatting a Section of a BU Landing Page Formatting a Promo Box of a BU Landing Page Formatting an Event Branding Organization Widget A special Widget has been included in the Faculty of Computing &amp; Data Sciences theme in an effort to apply a distinguished visual experience for sub-branded organizations of CDS [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":1242,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/pages\/1277"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/comments?post=1277"}],"version-history":[{"count":11,"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/pages\/1277\/revisions"}],"predecessor-version":[{"id":1542,"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/pages\/1277\/revisions\/1542"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/pages\/1242"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/cds\/wp-json\/wp\/v2\/media?parent=1277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}