Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
If you are using or experimenting with Ning 3.0, and need help on small tweaks, add them here. Or, if you would like to share tweaks, we'd love to hear them. Please keep this discussion for simple tweaks. If you want to add a Ning 3.0 Tip, feel free to create new Discussion.
Tags:
I have to go to bed so I can't thank you like I want to :-( but I will be back tomorrow morning with a proper thank you! LOL good night :)
Hi ISN,
This will get the first 2, and I'll look at the others tomorrow evening. Change your bottom border and color for the Ningbar to your choice of color and width.
/* Ningbar Background color and border */
.ningbar {
background-color:#495c49!important;
border-bottom: 3px solid #ffffff;
}
/* Increase Site Header Height */
.site-header {
height:150px!important;
}
Best Regards,
Jen
Hi Jen! thank you SO much :) this has improved my thoughts about 3.0 SO much :) hmm what happened to your donate button? I was going to donate but can't find it. Also I have one more final question..how can you make the gap/space with no color the same color as the wrapper? this is the place where the below header box is...and you can see the background, I don't want the background visible/transparent. When I use it to add my google ads.
Hi ISN,
I left part of the answer on this one, and realized we have a problem with width of Top HTML box for responsive views. I deleted the partial answer. If I have time, I'll look at this some more next week. I'll have to eventually, for design clients. Just so happens, this hasn't come up yet.
BTW: Your header logo is not responsive. It gets cut off badly on mobile devices. That will take some research and work. :\
On the donation button, I probably removed it a while back. You can always hit me up via a private message for PayPal email account. BUT, I wanted this one to be on me, but pretty much failed with the width issue, due to time.
Best of luck,
Jen
If I may please ask a question about the header logo and the mobile view. I don't currently have a smart phone. Is there a way to capture a mobile view of my site that I can link to - both for myself and members?
Warmly,
Susan Daniels
Hi Susan,
Do you mean a screen shot image, just to see what it looks like? In Ning 3.0 you won't have a link to a "mobile view". It automatically formats your site for each device, for example: desktop, tablet, smartphone. This is called responsive design.
Looks to me that you are in pretty good shape. I have a tool that I use to check all views, and all is well on the home page. This is what most will see on mobile view:
Best,
Jen
Okay,
Since the top HTML box is not contained within a specific container, let's try a completely different approach. I am modifying the container above it, instead. You'll need more code if you don't add the "Below Header HTML Box" to all pages.
We need a container that is already responsive, or a way to set the width for both desktop and mobile device views. This is why I am utilizing an existing container that fits all of these requirements: div.header-container .container
div.header-container .container {
background:#F6F6EE;
margin-bottom:-60px;
padding-bottom:120px;
}
Make sure your menu tabs work properly, no subtabs being covered up by my little trick code. We may have to change z-index on something (layer or stack order of container or element). Also, be sure to check cross-browsers.
Best,
Jen
Thanks Jen. I overlooked your response on my last visits. I really appreciate your answer. Because I missed this...and not sure where we are with this...I will copy your coding and check it first thing in the am. I'm about done for the day. Thank you so much. You are a darling! Warmly, Susan
Also...I've discovered a tool in the File menu of Mozilla that lets me look at all "responsive design" layouts and sizes. I keep calling it "relational designs" - people don't know what I'm talking about. LOL!
Great! Yeah, I use it continuously. I use Ctrl Shift M,not sure if that's an add-on I installed, or if part of Mozilla.
I learned yesterday that it is an add-on, because it went away when I tried to reduce the load on my computer with a new-to-me utility tool but it reconfigured a little bit too much, and I have un-installed it - not a huge problem but I have to figure out which Add-on I used for that great little feature. Thanks Jen.
Welcome to
JenSocial: Social Web Directory and Ning Tips
Posted by JenSocial on May 7, 2018 at 8:35pm 9 Comments 1 Favorite
Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments 1 Favorite
Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments 0 Favorites
Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments 1 Favorite
Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments 0 Favorites
Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)
Started by Ning.spruz.com in Ning 3.0 Feb 19. 0 Replies 0 Favorites
Started by Evelina in Ning 3.0 Aug 30, 2023. 0 Replies 0 Favorites
Started by Evelina in Ning 3.0 Aug 27, 2023. 0 Replies 0 Favorites
© 2024 Created by JenSocial. Powered by
© Copyright JenSocial.