Back in the dayz I made themes for spruz. I was able to export css and html all in the same file for users to use. The same with ning 2.0 but the elements of 3 seem to be giving me issues.
1. I can export a file, but the html, txt or css does not re-import anywhere else, nor will the guts of the file, i.e. the css or html go back into another theme on site or elsewhere. Is the exporter broken?
2. I am looking for css to put about the avatar image. I want to make it glow. I think I am wanting a css style effect but I can find it no where.
3. I also want to make the layout wrap/per glow also, like have a whitish or greyish glow, gives one the feels of ghosts.
I know how to add others' css codes to the layout, but inspect element nor page source gives me the code needed for others in 3.0 if I want to share that layout with them. Skemanon generator is no use because it is not made for 3 and I did not build my theme like that. It would be great if css flow effects but be added to the design studio for all nings.
I am currently on a chromebook but I do have a windows laptop where I could use firebug, but that never made any sense to me.
Replies
The import/export in the design studio does not work the way you are thinking it's supposed to. This is used to either create your own css layouts using the design studio and css if added which you can then save the text file as like a backup or then import that file back into the design studio as a custom theme which you can use.
For example when you choose a theme for your site from Nings preset ones you then alter it according to what you want using the design studio ie the colours etc etc and also can add css as well in the css theme section if required. Now what you can do is then using the export option export that design to a text file ( note: this only copies out any theme css added and your design studio choices your have made ) and then you now have a copy of the site design. Now what you can do is import that file and give it a name and add a thumbnail if you want to replace the old Glam Media thumbnail and this will now show in your list of themes with Nings preset ones.
Why would you do this you ask ? Well it's a good way to have a copy of your theme you created as now you can select that theme in your list in the design studio rather than Nings preset ones, you can still make changes to that theme as you would with the others and still switch between them. Some ideas for using this is let's say you want a special design for an event in the year like Christmas and want a Christmas style theme to use for a few days but don't want to keep altering your current site to a Chrstimas theme then back again. So what you could do is first export you current site then import it back in and say call it Christmas, then select that theme and make your changes to it for the Christmas look, one happy just go back to your other theme. Then once Christmas arrives all you need to do is select that Christmas theme. As you are a Pagan site you might want to have different looking themes for particular pagan event dates so you can add as many as you want to the list.
Note that only CSS in the design studio Theme section will be copied with also the design studio options you have chosen.
Global css is as it says and any css added in the global section stays and works with all themes.
Custom code is the same added in the Social Site builder as this works globally.
HTML code added in text box's, above footer and below footer is global as these boxes exist no matter which them you choose.
The export and import is only available to the site creator so not available for members or admin to use or make changes to but the members of course will see the design.
Why was this added ?
When Ning 3 first became available it was asked if theme design created by NC's could be shared to other NC's because of Nings 3's versatility of how it be be customized, so this option was added for other NC's to share their design with others to use. So what used to happen was NC's would created a Nice theme for another NC as a sort of starter then share the text file to that NC. That NC would then import the file which would then give them all the settings fo the design studio etc used. The that NC could then customize further. This is much like the way you would have started with Nings presets and it works the same way.
TIP
By the way this is also a good way to back up your design and theme css by using the export. You can export everynow and then which woulg give you a copy of that design studio setting and css, you can then save these files to your computer as backups. Also another good way is to copy them to your Ning Site File Manager as then you have a copy/copies saved on the servers so if you loose your computer or your hard drive fails etc you have copies saved.
Hope this helps, feel free to ask any quesitons about it.
Bizz :-)
👍
Bizz Thanks for your words on this. I pretty much knew all this because I also theme for proboards and they also have an import file and export forum theme. I knew how the export and so on works. But what I do not get is the copy of the .txt or the ,html or the .css, which when you export it you can choose to call it .txt, .css or .html if you didn't know.
Now if I were to open these files I'd see the "guts" of my site. Now if I take it and try and add it to a new theme as css on another theme it does not work. It also will not allow me to import the file I just exported back in.
Like the themes on skemanon for example, the premades, if you want to offer the codes of your ning site, like say I make a theme for someone, if the exported files won't import to another ning site as you suggested, how could I supply the code for the theme so another could use it? This is where I am at and stuck. There is the extension of inspect element and page source but they don't tell me what I need to for the layout. Any help would be appreciated.
I looked at it again this evening and the conclusion is that HTML and CSS design has marched on while 3.0 has basically sat here. What if the type of CSS we are working with on ning does not exist elsewhere on the web?! So anyone new starting out on ning, outside of a few tips and tricks sites, we are it for this type of cms. That's strangely depressing. lol
I can not even find the correct version of the CSS I want for an avatar glow, nor the xg.wrapper I want to put a glow border on it and I can't find it anywhere. I found css over at skemanon that I modified for buttons. But still.
If you want you can take a look at https://pagangoththemes.ning.com and one of the themes here: angels1.txt Try it on one of your sites and you'll see what I mean. If you need the .css file here that is too AngelsGothica.css anyone else can try it as well and see the layout on my site here. It can not be imported and the css when uploaded to the css theme section or what not does not work.
I lloked at both those files and the css is not included which is why the css added was not taking affect. Any custom css you want to include MUST be added to the Theme section css in your design studio and then it will get included. If you look at your files above you will see at the bottom it says /*Start Css*/ and /*End Css*/ and there is no css in between which shows the css was not included.
When you use the export and import it just need to be the .txt file, you do not need to add css extension etc.
HTML and CSS is a universal language so it's no different on Ning than any other website. All you need to add are the correct classes for what you are trying to change and of course the correct code to make the change. 90% of what a Ning user would need is in the design studio options but custom css can be added to the design studio custom css area and also custom code like javascript and jquery can be added to the social site builder custom code box.
Actually Ning is actually very versatile on making changes with css and code which not a lot of other cms allow you to do. It's just a matter of getting used to Ning digging deeper in what you can do with it.
The beauty is that you can add multiple instances of things like forums, photo pages etc etc is that you can change them to whatever you need design wise using css etc, just because it's say's a blog page it does not have to be used as such.
When ever you create a new instance of something ( ie a page in your social site builder like a forum or atricles page etc ) a css class is automatically given to that page so you can target specific page with your css.
For instance let's say I create a new forum and call it bizzforum, this would them get a class of bizzforum added to it so I can target that forum like this
.page-bizzforum
Now let's suppose I want to add a red border, some padding and border radius to each entry in the list page only for this forum instance created, i could then write
.page-bizzforum .discussionListPage-entry{
border: solid 2px red;
padding: 10px;
border-radius: 10px;
}
And this will give me this
Thank you Bizz I understand what you are trying to say.
However, what I wanted to do was be able to build themes and share just the regular old code that I created from the design studio, not adding much third party coding from another site because that wouldn't be my code, but since css is a universal language of coding technically it's not copyrighted even if someone says that's my hard work in and my code.
Other than that, I am looking for the class and code or css that allows me to having a glowing effect to my xg.wrapper on ning. I can not find the right glow effect. I did find a div but it was messy looking so I did not use it. Coding has changed lots since I did website design themes.
Still Bizz it is interesting you can use .txt, .css or .html or even .theme.liquid files here (I also work with hiveflare platform and they use ruby on rails and phusion passenger and theme.liquid we had to use this at one time to add chat bar modules to the theme.liquid because we had no custom coding for third party javascript.
Thanks for your help.
I was wondering about a code that when someone mouses or hovers over an a button (say in the navs) instead of seeing the word/standard button one could apply something like say a cloud image or a ghost image to the button overlay? I think this would be neat!
There is a site called grepper.com he has lots of css styles. They work on the website, but when I bring them here to my site they don't work. He has some great glow around a button css. How could you adapt it for ning.
Share that glow code you like and I will show you how to get it to work on Ning.
That is easy enough to do with some css, yes you can use other css from other sites but to get it to work you would have to change the classes before the css to match the Ning classes of the thing you are trying to change or target unless you are applying it site wide as a universal change then you can use a css univesal selector, the actual lines of css to do stuff ie the styles being applied after those classes will work on any website.
There are many things like buttons, nav etc which can be changed just by using the html name for example
button{ background-color:blue; color:white }
but to change only certain buttons a class would be added. Some classes are shared so depending on what you are trying to do you might have to be more specific in your code.
Let's take our main navbar as an example, if you wanted to change it using css rather than the design studio you could target the nav like this
.site-header .mainTab-item a {
The above line targets the actual link in the nav bar. The .mainTab-item is the nav li
So to change the colour you would use this
.site-header .mainTab-item a {
color:red;
background-color:blue;
padding:10px;
}
Then for hover etc you would then do this
.site-header .mainTab-item > a.hovered,
.site-header .mainTab-item:hover > a,
.site-header .mainTab-item.active > a {
color:white;
background-color:black;
}
So let's say you want to add an image on hover to the nav buttons, you could add it like this
.site-header .mainTab a:hover{
background-image:url('https://storage.ning.com/topology/rest/1.0/file/get/8677811?profile=original');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
If you go here to my demo site and hover over the nav items you will see the image appear
https://jr-images.ning.com/
-
1
-
2
-
3
of 3 Next