{"id":4637,"date":"2012-04-16T14:56:40","date_gmt":"2012-04-16T14:56:40","guid":{"rendered":"http:\/\/help-o.ning.com\/?p=4637"},"modified":"2012-04-16T14:56:40","modified_gmt":"2012-04-16T14:56:40","slug":"using-images-as-module-headers","status":"publish","type":"post","link":"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/","title":{"rendered":"Using Images as Module Headers"},"content":{"rendered":"

You don’t always have to use regular text as a header for your modules. Using CSS you can use a graphic as your module header as well. Here’s how.<\/p>\n

\n
\n

First, you’ll want to upload the graphic to Ning server. Because we’re uploading the graphic in a non-standard way, we’ll be using a work-around: We’ll upload the image from a blog post. Once that image is uploaded, it will always be on the server, even if you delete the blog post. We’ll use that file to<\/p>\n

1. Create a new blog post and use the “upload file” button to upload your graphic file. You can use all the standard graphic image types: JPG, GIF and PNG files all work well.<\/p>\n

2. You should see a link to the file inserted into your blog entry that starts with this: http:\/\/api.ning.com\/files\/ Copy that link and delete the blog post.<\/p>\n

3. Now that we have the image, we can actually add the CSS that will replace the header with the graphic. But first, we’ll need class name of the module of the graphic you want to replace:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Module Name<\/th>\nClass Name<\/th>\n<\/tr>\n
Blog<\/td>\n.module_blog<\/td>\n<\/tr>\n
Members<\/td>\n.module_members<\/td>\n<\/tr>\n
Photos<\/td>\n.module_photo<\/td>\n<\/tr>\n
Groups<\/td>\n.module_groups<\/td>\n<\/tr>\n
RSS<\/td>\n.module_feed<\/td>\n<\/tr>\n
Forum<\/td>\n.module_forum<\/td>\n<\/tr>\n
About this network (right column)<\/td>\n.module_about<\/td>\n<\/tr>\n
Recent Activity<\/td>\n.xg_module_activity<\/td>\n<\/tr>\n
HTML Textbox<\/td>\n.html_module<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

4. Got that? Good. Now insert the following CSS in the Appearance > Advanced > Custom CSS box on the Manage section of a network. You’ll have to do some light edits: Replace [image url] with the URL of the image you uploaded in step 2. I also use .module_forum as an example, but replace that with with the CSS class in your following example.<\/p>\n

.module_forum .xg_module_head {\r\nbackground-image:url([image url]);\r\nbackground-repeat:no-repeat;\r\nheight:21px;\r\n}\r\n.module_forum .xg_module_head h2 {\r\ntext-indent:-9999px;\r\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
You don’t always have to use regular text as a header for your modules. Using CSS you can use a graphic as your module header as well. Here’s how.<\/p>\n
First, you’ll want to upload the graphic to Ning server. Because we’re uploading the graphic in a non-standard way, we’ll be using a work-around: We’ll upload the image from a blog post. Once that image is uploaded, it will always be on the server, even if you delete the blog post. We’ll use that file to
\n1. Create a new blog post and use the “upload file” button to upload your graphic file. You can use all the standard graphic image types: JPG, GIF and PNG files all work well.
\n2. You should see a link to the file inserted into your blog entry that starts with this: http:\/\/api.ning.com\/files\/ Copy that link and delete the blog post.
\n3. Now that we have the image, we can actually add the CSS that will replace the header with the graphic. But first, we’ll need class name of the module of the graphic you want to replace:<\/p>\n
Module Name
\nClass Name<\/p>\n
Blog
\n.module_blog<\/p>\n
Members
\n.module_members<\/p>\n
Photos
\n.module_photo<\/p>\n
Groups
\n.module_groups<\/p>\n
RSS
\n.module_feed<\/p>\n
Forum
\n.module_forum<\/p>\n
About this network (right column)
\n.module_about<\/p>\n
Recent Activity
\n.xg_module_activity<\/p>\n
HTML Textbox
\n.html_module<\/p>\n
4. Got that? Good. Now insert the following CSS in the Appearance > Advanced …<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[62,53],"tags":[965,531,576],"yoast_head":"\nUsing Images as Module Headers | Ning Help Center<\/title>\n<meta name=\"description\" content=\"Using Images as Module Headers | Ning Help Center\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Images as Module Headers | Ning Help Center\" \/>\n<meta property=\"og:description\" content=\"Using Images as Module Headers | Ning Help Center\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/\" \/>\n<meta property=\"og:site_name\" content=\"Ning Help Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ning\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-16T14:56:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@Ning\" \/>\n<meta name=\"twitter:site\" content=\"@Ning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ning.com\/help\/#website\",\"url\":\"https:\/\/www.ning.com\/help\/\",\"name\":\"Ning Help Center\",\"description\":\"The place to look for help with the details of your Ning Network.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ning.com\/help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/#webpage\",\"url\":\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/\",\"name\":\"Using Images as Module Headers | Ning Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/www.ning.com\/help\/#website\"},\"datePublished\":\"2012-04-16T14:56:40+00:00\",\"dateModified\":\"2012-04-16T14:56:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.ning.com\/help\/#\/schema\/person\/6b9fc38f44f8734ab165bfdebda41275\"},\"description\":\"Using Images as Module Headers | Ning Help Center\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ning.com\/help\/using-images-as-module-headers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ning.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Images as Module Headers\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ning.com\/help\/#\/schema\/person\/6b9fc38f44f8734ab165bfdebda41275\",\"name\":\"joanna\",\"url\":\"https:\/\/www.ning.com\/help\/author\/joanna\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/4637"}],"collection":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/comments?post=4637"}],"version-history":[{"count":1,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/4637\/revisions"}],"predecessor-version":[{"id":4638,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/posts\/4637\/revisions\/4638"}],"wp:attachment":[{"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/media?parent=4637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/categories?post=4637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ning.com\/help\/wp-json\/wp\/v2\/tags?post=4637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}