Ok really odd title I know but couldn't think of a better way to put it *lol*
Anyway this was inspired by a post Jesse added to the CEO post about having a sub heading under the main site heading. So had a little play around with it to come up with a few solutions which turned out to be quite interesting and useful.
Demos on these pages
Homepage shows all three versions in the header
Members Page
Shows one module version and the css one as the css one shows on every page
http://bizzssite.ning.com/members
So let's get started with first just adding a sub heading under our main site name. As we are doing this via css this will show up on every page. So here is the CSS and this would go in your design studio custom css section.
Before we go any further one thing to bear in mind if you are using the themes layout with the sidebar at the side of the screen be aware that adding content into the header adds length to it and so your menu get's pushed down. If you have a fixed menu with quite a few page links then on some tablet screens they might not all be shown on the screen. This is a bit of a flaw with the side menu layouts set in fixed positions and maybe something the new Ning team can look into.
/* Header Sub Title Using Css*/
.header-siteName:after{content:"This is Bizz's Demo Site, Member Site Coming Soon ( css version shows on every page)";display:block;font-size:14px; padding:5px 0px 20px}
TIP: You can add a css one and also module ones. So the css one shows all the time but module ones are page by page. So you could have one main subHeading then various other ones with some other message depending on the page you are on.
The content is what we want our message to be and the font-size is how large we want our text to be. The padding you may have to adjust depending on your site. So to add your own message just replace the text in bold. This text becomes part of the main site name and so takes on the click event of the site name so if you want to add some links to the text to go somewhere else then the options below main suite you better.
Next we can create some modules to add our message so we do not have to keep going back to the code to adjust it, also in the modules we can add more things like images etc. One important thing to remember by adding modules they will only show on the page they have been added to which In my mind worked out better.
For example suppose on the homepage you want a particular message to promote something or just to make it easier to add a sub heaading just for that page. Now we can go to another page, add a module with something else in it or if you want the same message as the homepage one just copy that message into the module on the new page ( see my home page and members page ). So as you can see you can do so many different variations it would take an age to write them all here
Below are two versions of modules, the first is to add a subHeading to a page and the second one is one we can add a heading but also be able to have clickable items in like links etc ( see my homepage as an example with a link to Creators )
First we need to add a little custom code and this only needs to be done once, so copy both set's of code so you have the code for both types of module. This code goes in your site&pages custom code end of page section.
<script>
// Sub Heading By Module
x$(document).ready(function(){
x$('.module-name:contains("SubHeading")').closest('.section-html').addClass('Site-SubHeadingAdmin');
x$('.Site-SubHeadingAdmin .entry-content').clone().appendTo('a.header-siteName').addClass('Site-SubHeading');
x$('.Site-SubHeadingAdmin').hide();
});
</script>
<script>
// Sub Heading By Module under site name not part of the click event
x$(document).ready(function(){
x$('.module-name:contains("SiteHeading")').closest('.section-html').addClass('Site-HeadingAdmin');
x$('.Site-HeadingAdmin .entry-content').clone().appendTo('.header-siteNameLogo').addClass('Site-Heading');
x$('.Site-HeadingAdmin').hide();
});
</script>
Next we need a little css for these modules
/*Sub Heading Using Module*/
.Site-SubHeading {margin-bottom:0px; font-size:16px;padding:10px 0px }
/* Under Site Name Version, contents are available to add links etc*/
.Site-Heading {margin-bottom:0px;margin-top:10px;font-size:16px;padding:0px 0px 10px 30px; color:white}
.Site-Heading a{ color: gold }
@media only screen and (max-width:771px){
.Site-Heading {padding:10px}
}
You may need to adjust the css depending on how big you want the text ( font-size ) or the text color ( color:white ). Also if you are going to add links then the Site-Heading a{ color: gold } sets the colour of the links.
Ok so that's all the code for both types of module and that's it for the code, once added no need to add it again.
How to add the modules.
This is really easy to do and is much the same as when you add any other module, the only important bit to remember is to give the module the correct title for the module type you want to use. You can add the modules wherever you want on the page as it's does not make any difference. The modules are hidden on the page. You just go back to site&pages, click on the module to edit the contents if needed or if you want to remove it etc.
Ok so how do we add them to a page, well the way to do it is the same for both modules as it's only the title of the module that needs to be different depending on the one you want to add. You can of course add both or all the types described in this post. You can see on my demo site I have done just that to show you each type.
TITLE TO USE
SubHeading
Sub heading is for adding content under your site name and becomes part of it so you cannot add links to this, just text or images
SiteHeading
Site heading is to add content under the site name section, this one allows you to add links etc.
- Go to site&pages then click on the page you want to add a module to.
- Click on the Add Content button, leave it on the html option
- IMPORTANT BIT: Add a title for the module you want to use, the titles are above, they must be added exactly as shown
- Type in your content you want
- Click the Add button
That's it the module has been added and if you go to that page you will see the content in the header.
Here is an example of how ad module looks to add to a page, take note of the title section.
Well that's it, sounds complicated but do it once and you will see you can add them in seconds.
Have fun
John :-)
Replies
awesome!