Adding social media icons to Ning Bar: HELP NEEDED - Ning Design Network2024-03-29T07:09:30Zhttp://design.ning.com/forum/topics/adding-social-media-icons-to-ning-bar-help-needed?xg_source=activity&feed=yes&xn_auth=noHi Lynette!
I would suggest u…tag:design.ning.com,2012-02-08:6330953:Comment:131222012-02-08T22:17:29.368ZFlorence Tsaihttp://design.ning.com/profile/FlorenceTsai
<p>Hi Lynette!</p>
<p>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:</p>
<p><strong><script type="text/javascript"></strong><br></br><strong>x$('#xn_bar_menu_tabs').after('</strong><br></br><strong><div id="socialicons"></strong><br></br> <strong><a target="_blank" href="#"><img src="/" /></a></strong><br></br> <strong><a target="_blank"…</strong></p>
<p>Hi Lynette!</p>
<p>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:</p>
<p><strong><script type="text/javascript"></strong><br/><strong>x$('#xn_bar_menu_tabs').after('</strong><br/><strong><div id="socialicons"></strong><br/> <strong><a target="_blank" href="#"><img src="/" /></a></strong><br/> <strong><a target="_blank" href="#"><img src="/" /></a></strong><br/> <strong><a target="_blank" href="#"><img src="/" /></a></strong><br/><strong></div></strong><br/><strong>');</strong><br/><strong></script></strong></p>
<p>^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).</p>
<p>Futher explanations for future reference:<br/>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.</p>
<p>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!</p> Thanks for replying to my pos…tag:design.ning.com,2012-02-07:6330953:Comment:134202012-02-07T10:19:29.503ZLynnette Evehttp://design.ning.com/profile/LynnetteEve
<p>Thanks for replying to my post!</p>
<p>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…</p>
<p>Thanks for replying to my post!</p>
<p>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!!!</p>
<p></p>
<p>Thank you!</p>
<p></p>
<p>My CSS is:</p>
<p><strong>#xn_bar ul {</strong><br/> <strong>list-style-type: none;</strong><br/> <strong>margin: 0px;</strong><br/> <strong>padding: 0px;</strong><br/> <strong>text-align: centre;</strong><br/><strong>}</strong></p>
<p><strong>#xn_bar ul li {</strong><br/> <strong>width: 110px;</strong><br/> <strong>float: center;</strong><br/> <strong>margin: 0px</strong><br/> <strong>border: 1px solid green;</strong><br/> <strong>display: inline;</strong><br/><strong>}</strong></p>
<p><strong>#xn_bar ul li a {</strong><br/> <strong>font-family: verdana, arial;</strong><br/> <strong>text-decoration: none;</strong><br/> <strong>display: block;</strong><br/><strong>}</strong></p>
<p>My code in custom code box:</p>
<p><strong><div id="xn_bar"></strong><br/><strong><ul></strong><br/> <strong><li><a href="#">one</a></li></strong><br/> <strong><li><a href="#">two</a></li></strong><br/> <strong><li><a href="#">three</a></li></strong></p>
<p><strong></ul></strong></p>
<p><strong></div></strong></p>
<p><br/> <cite>Florence Tsai said:</cite></p>
<blockquote cite="http://design.ning.com/forum/topics/adding-social-media-icons-to-ning-bar-help-needed?xg_source=activity#6330953Comment13217"><div><div class="xg_user_generated"><p>Hi Lynnette,</p>
<p>Your questions aren't stupid at all! </p>
<p>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.</p>
<p>In the custom code you don't need to include <header> or <body> along with your <div> tags.</p>
<p>Let me know if I missed anything if you need more clarification!</p>
</div>
</div>
</blockquote> Hi Lynnette,
Your questions a…tag:design.ning.com,2012-01-27:6330953:Comment:132172012-01-27T20:52:02.927ZFlorence Tsaihttp://design.ning.com/profile/FlorenceTsai
<p>Hi Lynnette,</p>
<p>Your questions aren't stupid at all! </p>
<p>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.</p>
<p>In the custom code you don't need to include…</p>
<p>Hi Lynnette,</p>
<p>Your questions aren't stupid at all! </p>
<p>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.</p>
<p>In the custom code you don't need to include <header> or <body> along with your <div> tags.</p>
<p>Let me know if I missed anything if you need more clarification!</p>