Adding social media icons to Ning Bar: HELP NEEDED
Hi there,
I need to add social media icons to the Ning Bar (top right) to a clients Ning site.
An example of the icons can be seen on the linkin Park pages... http://www.linkinpark.com/main
I have knowledge of both CSS and html but am in no way expert. I would be able to do this easily in html pages I have written myself but just don't seem to understand how I get the CSS to talk to the HTML in Ning.
My questions are:
1. If I write the CSS for the inline unordered list does it have to be named in a specific way to link to the #xn_bar?
2. In the custom code which html tags do I need to include? Everything from <header> to <body> with my new <DIV> tags?
Sorry if this is a dumb question but this is the first Ning I've had to skin and I just don't get it! I'm sure this is easy I just need to know how the CSS and html get linked really.
Thanks in advance, I hope someone can help!
Lynne
Views: 1324
Replies to This Discussion
-
Permalink Reply by Florence Tsai on
-
Hi Lynnette,
Your questions aren't stupid at all!
The way that Linkin Park added their icons was to insert a new <div> and give it its own class/id using Javascript/JQuery (can insert this JS code in Custom Code). If you want to write CSS for the unordered list in #xn_bar, #xn_bar ul li should work. Note that if you target #xn_bar ul li that it will include the member's name and the sign out link in the #xn_bar as well.
In the custom code you don't need to include <header> or <body> along with your <div> tags.
Let me know if I missed anything if you need more clarification!
-
Permalink Reply by Lynnette Eve on
-
Thanks for replying to my post!
I have tried this and I can't get it to work... it just puts the links in a bar at the bottom of the page. I've tried putting the code within <div> tags as shown in the documentation... I've experimented with other tags to see if it's just an issue with the ning bar but anything I add just goes to the bottom and I'm guessing outside of the Ning theme. I've tried adding to the masthead within the xg_theme class etc. Nothing works. It's driving me crazy! Any extra clarification you could give would be great!!!
Thank you!
My CSS is:
#xn_bar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: centre;
}#xn_bar ul li {
width: 110px;
float: center;
margin: 0px
border: 1px solid green;
display: inline;
}#xn_bar ul li a {
font-family: verdana, arial;
text-decoration: none;
display: block;
}My code in custom code box:
<div id="xn_bar">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li></ul>
</div>
Florence Tsai said:Hi Lynnette,
Your questions aren't stupid at all!
The way that Linkin Park added their icons was to insert a new <div> and give it its own class/id using Javascript/JQuery (can insert this JS code in Custom Code). If you want to write CSS for the unordered list in #xn_bar, #xn_bar ul li should work. Note that if you target #xn_bar ul li that it will include the member's name and the sign out link in the #xn_bar as well.
In the custom code you don't need to include <header> or <body> along with your <div> tags.
Let me know if I missed anything if you need more clarification!
-
-
Hi Lynette!
I would suggest using JQuery to insert the HTML. If you're unfamiliar with JQuery, I can provide you the code since this is an easy one. Just add into the custom code box:
<script type="text/javascript">
x$('#xn_bar_menu_tabs').after('
<div id="socialicons">
<a target="_blank" href="#"><img src="/" /></a>
<a target="_blank" href="#"><img src="/" /></a>
<a target="_blank" href="#"><img src="/" /></a>
</div>
');
</script>^what this code is doing is targeting the div with the id "xn_bar_menu_tabs" and attaching HTML (the <div id="socialicons">...</div>)to it afterwards. You'll have to mess with the CSS to get things to look the way you want, but the basic template for what you want to do is there! You can freely edit the HTML you want to add so feel free to change it to suit your needs (i.e. adding classes, etc).
Futher explanations for future reference:
Ning's Design Studio doesn't allow designers to directly alter the HTML structure, only CSS. Creative workarounds include utilizing the Instant Ad Boxes (Above/Below Header and Below Footer) since you can insert HTML in there. I suggested using JQuery for this, but if you're not using the Instant Ad Box above the header, you can also insert your HTML in there (call it something other than "xn_menu_tabs" since it already exists) and play with the absolute and relative positioning until you get the result you want.Also: any HTML inserted into the custom code box gets loaded at the end of the web page. So if you have HTML that you want to add before that, try using JQuery or the ad boxes. The custom code box can have JS/JQuery inserted in there, but if you do that, make sure you always have the <script> tags around it! Hope this was helpful and let us know if there's anything else!
Forum
Features Layout on Non-Main Pages 7 Replies
Started by Nathan Stearns in Questions and Answers. Last reply by JFarrow Sep 13, 2012.
Tabbed Panel 1 Reply
Started by James Kelly in Questions and Answers. Last reply by Tobias Selzer May 15, 2012.
Adding a submenu to header? 17 Replies
Started by Linda Carter in Questions and Answers. Last reply by Tobias Selzer Mar 6, 2012.
Adding social media icons to Ning Bar: HELP NEEDED 3 Replies
Started by Lynnette Eve in Questions and Answers. Last reply by Florence Tsai Feb 8, 2012.
Documentation Section Down 3 Replies
Started by Nathan Stearns in Questions and Answers. Last reply by Jen Sep 24, 2011.
© 2024 Created by Ning Advocacy.
Powered by
