{"id":26,"date":"2015-04-24T07:57:04","date_gmt":"2015-04-24T07:57:04","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/?p=26"},"modified":"2025-09-10T09:32:38","modified_gmt":"2025-09-10T09:32:38","slug":"custom-css","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/custom-css\/","title":{"rendered":"Custom CSS"},"content":{"rendered":"<p>Editing CSS is now handled in Glow Blogs without the use of Jetpack.<\/p>\n<p>See the <a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/glowbloghelp\/how-to\/css\/\">main help site CSS page<\/a> for details<\/p>\n<p>&nbsp;<\/p>\n<p><del>Custom CSS adds a sub menu to the Appearance menu in the Dashboard sidebar.<\/del><\/p>\n<p>There you can add custom styles which will change the appearance of your blog.<\/p>\n<p>To use the CSS module:<\/p>\n<p><del>Activate the Jetpack Plugin (<strong>Dashboard-&gt; Plugins<\/strong>)<\/del><br \/>\n<del>Activate the CSS module\u00a0in the <strong>Dashboard<\/strong>-&gt;<strong>Jetpack section<\/strong><\/del><\/p>\n<p><del>Edit the CSS in\u00a0<strong>Dashboard<\/strong>-&gt;\u00a0<strong>Appearance<\/strong> -&gt; <strong>Edit CSS<\/strong><\/del><\/p>\n<p>For example on this blog I&#8217;ve changed the colour of the Headers with:<br \/>\n<code>.entry-title{color:#0080FF}<\/code><\/p>\n<p>So all of the post titles should be blue unless you are on mobile.<\/p>\n<p>You can find out more about CSS:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\">CSS | MDN<\/a><\/p>\n<p>It might be a good idea to remember that the theme developers know a lot about design and CSS before changing things too much.<\/p>\n<p>Here is a wee snippet to get rid of auto hyphens in the TwentyFourteen theme:<\/p>\n<pre><code>.entry-content,\r\n.entry-summary,\r\n.page-content,\r\n.nav-links,\r\n.comment-content,\r\n.widget\r\n {\r\n   -webkit-hyphens: none;\r\n   -moz-hyphens:    none;\r\n   -ms-hyphens:     none;\r\n   hyphens:         none;\r\n}<\/code><\/pre>\n<p>If you add that to the custom css there will be \u00a0no automatically hyphenating your text.<\/p>\n<p>&nbsp;<\/p>\n<p>and this code makes the menu on this blog transparent:<\/p>\n<pre><code>.menu-item-type-custom,.menu-item-object-category {\r\nbackground: #000;\r\nopacity: .7;\r\n}\r\n\r\nmenu-item-type-custom,.menu-item-object-category a {\r\nopacity: 1;\r\nfont-weight: bold;\r\n}\r\n\r\nmenu-item-type-custom,.menu-item-object-category a:hover {\r\ncolor: yellow;\r\nopacity: 1;\r\nfont-weight: bold;\r\n}<\/code><\/pre>\n<p>This snippet will change the menu and post titles from ALL caps to title case on TwentyFourteen.<\/p>\n<pre><code>\r\n .site-navigation, .entry-title, .entry-header a {\r\ntext-transform: capitalize;\r\n}\r\n\r\n.site-navigation a {\r\ntext-transform: capitalize;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Editing CSS is now handled in Glow Blogs without the use of Jetpack. See the main help site CSS page for details &nbsp; Custom CSS adds a sub menu to the Appearance menu in the Dashboard sidebar. There you can add custom styles which will change the appearance of your blog. To use the CSS &hellip; <a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/custom-css\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Custom CSS<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[113808],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-css-2"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":12,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/posts\/26\/revisions\/449"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/jetpack\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}