Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

New Search Bar

Great to have a Ning search bar, and I am happy where it is. However, the magnifying glass is outlined in blue, which is illegible on my charcoal grey background. All other text is white - can I change it to white too?  Also, the searchbox is too short, as somebody else has mentioned.

Thanks

Annabel

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Hi Annabel, you can change the magnifying glass to white using a little css added into you design studio custom css section

    /* Change magnifying glass to white */

    .globalsearch-button::before {
        border: solid 1px white;
    }
    .globalsearch-button::after {
        background-color: white;
    }


    Also if you want to change the acutal background colour behind the magnifying glass you can do so with this, the first line is the colour of the button and the second line is the button when hovered over. You can add hex colours as I have done on the first line or just type the colour you want for instance .globalsearch-button { background-color: darkblue; } again this goes in your css section.

    .globalsearch-button { background-color: #2628e0; }
    .globalsearch-button:hover{ background-color:black }

    • Annabel I added a tip here to change the size of the search bar and shared the  link below. The problem with just changing the width as when the screen size change all the other ning bar links can get a bit screwed up especially if the member has a long name. This tip will move the bar aove those links so they have their own space to move in.

      Make your search bar bigger

      • Hi John,

        I have forgotten to mention this before so I will correct this terrible mistake as of now. Nice to see you are back on creators, hope you are doing fine.

        Best wishes,

        Ning Team.

        P.S. Sorry for off-topic

  • I'm headed out the door so this is off the top of my head; someone else may chime in on this but her goes.  You can adjust the size #s below as needed.  Place the in the CSS section of Design Studio:

    /* widen search box */
    .globalsearch {width: 300px;}

    /* adjust search border */
    .globalsearch-button {border: 1px solid green;}

    You can even consider changing the background, if it helps


    /*change search background */
    .globalsearch-button {background-color: black;}

    /* search background on hover */
    .globalsearch-button:hover {background-color: green;}

  • Buwahahaha!  We hit this at the same time.  Awesome John!

    • We sure did, just one note that the search border you mentioned will only change the border around the button not the actual magnifying glass.

  • This reply was deleted.
    • Hi George, you would need to add this for the stem

      .globalsearch-button::after {
          background-color: white;
      }

      And this for the circle

      .globalsearch-button::before {
          border: solid 1px white;
      }

  • Great!  Thank you so much everyone for all these suggestions. I will try them.

    • Works a treat - thanks.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Suzie Nielsen replied to Suzie Nielsen's discussion
Cookie/ banner/pop up
"So now what?"
3 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Cookie/ banner/pop up
"Well, I finally got my report from Cookiebot and it says I am NOT compliant!! GGGRRRRR... look at a…"
3 hours ago
Matthew Aukai Wright replied to dave's discussion
Chat Box New Look with Apple iPhone style messages
"I love this but how can I make it be rainbow? Like with a rainbow Border? "
8 hours ago
Annabel Gregory replied to Bizz ( John )'s discussion
How To Make Your Feature, Add, Edit Buttons At The Top Of Pages Stand Out Better (Updated 08/01/17)
"Thanks for this - I was just about to ask that very question!  Have had complaints that just having…"
11 hours ago
Matthew Aukai Wright replied to Jen's discussion
Add Member Account Box Links/Notifications to NingBar (Collaborative Efforts: Jen and Elson)
"Hey Michael. Would you mind sharing the code since you said it works now please :) "
18 hours ago
Matthew Aukai Wright replied to Fabricio Giugni's discussion
Chat help
"I would love to be able to have the chat ping even when it is closed along with push notifications. "
yesterday
Kos replied to ⚡JFarrow⌁'s discussion
Tip N2 or N3: Customizable Multi-panel Hero Template For Driving Engagement
"How cool is that.  Thanks for sharing JF!"
yesterday
Matthew Aukai Wright replied to Bizz ( John )'s discussion
How To Make Your Feature, Add, Edit Buttons At The Top Of Pages Stand Out Better (Updated 08/01/17)
"Hey there. How can I add a rainbow background picture to the buttons? "
yesterday
Suzie Nielsen replied to Rowald's discussion
Ning not GDPR compliant
"new Question same Topic... what if I remove google analytics altogether... that's all I use... coul…"
yesterday
⚡JFarrow⌁ commented on Rosas † Negras's blog post Bar Skysa into 3.0
"Yes, skysa works.... you'll want to put it inside the Custom Code Footer box in 3.0... hope this he…"
yesterday
Fabricio Giugni replied to Fabricio Giugni's discussion
Chat help
"Hi,
   The only problem is that I can not make it work even if there is lot's of people. No one get…"
Friday
Thisisbully replied to Fabricio Giugni's discussion
Chat help
"on mobile the chat notifications do not show "
Friday
More…

Meanwhile, you can check our social media channels