HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


"search" question

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#107157 (In Topic #20888)
Avatar

Well-settled

Can someone help me with adding the "search" function into my main navigation bar just like this websites'? I've attached photos that circle what I'm talking about.

Thanks in advance,
LocalMC



Back to the top
 
Posted
Rating:
#107161
Avatar

Community saint

The search box will be in the header in v10. To do this on the current version would require changing the search block template so that it displays correctly (horizontally rather than vertically) and then adding the block into the header template.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Chris GrahamLiked by Guest)  
Rating:
#107164
Avatar

Community saint

@KingBast, Thanks for the tip on the v10 header search box.

I took a quick look at it in the v10 branch of the github repository (https://github.com/chrisgraham/ocPortal/blob/v10/sources/blocks/top_search.php) and a couple of other files), and it might be able to be backported to v9 without too much work. I'll take a closer look at it this weekend.

@LocalMC, To expand on KingBast's idea, if you remove the main_search block from all pages of your web site (for example, from :panel_right and :panel_left panels), you could re-template it and put the main_search block in the header (in GLOBAL_HTML_WRAP.tpl) using this tempcode {$BLOCK,block=main_search} (you could add additional main_search block parameters to that tempcode as well). See the reference to the GLOBAL_HTML_WRAP.tpl code in the next paragraph for where that {$BLOCK} tempcode would go. I think you may even be able to grab the v10 BLOCK_TOP_SEARCH.tpl template (https://github.com/chrisgraham/ocPortal/blob/v10/themes/default/templates/BLOCK_TOP_SEARCH.tpl), rename it, and save it to themes\default\templates_custom\BLOCK_MAIN_SEARCH.tpl on your web site. Then you won't have to figure out what to modify in the existing template or code anything yourself. 

If you want to be able use the main_search block in other areas as it normally looks (vertically formatted inside a box), you won't want to use that re-templating idea. Instead, another option might be to examine the html source code (from within the web browser) of the main home page of localmc.com and copy just the html <form> from the search block on that page. It will need some minor edits (tweak the search options as needed and remove the submit button if you want just the search box like ocPortal.com), but that could then be pasted into the GLOBAL_HTML_WRAP.tpl template right next to the zone menu…somewhere within or near this block of code:

Code

            <div class="global_navigation">
               {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
            </div>
Back to the top
 
Posted
Rating:
#107169
Avatar

Well-settled

Thank you Jason and KingBast. I wish I knew more about coding lol.

@Jason… I'd like to try the new v10, BLOCK_MAIN_SEARCH.tpl suggestion you gave me but when I go into my file directory I don't have that t/l file in the templates_custom folder. You said to rename it so I assumed there would already be that file. Am I just confused?
Back to the top
 
Posted
Rating:
#107175
Avatar

Community saint

Maybe a little confused since it's not normal everyday ocPortal maintenance. Here's what you will need to do:

You will need to grab this v10 Top Search template from github and save it locally on your computer. I'm not familiar with Safari or Apple, but I'll assume Safari will have an option to save that web page locally. If not, just copy all of the text from that V10 Top Search template page into a new text document on your computer. The template name from that link is BLOCK_TOP_SEARCH.tpl, but you should save/rename it to BLOCK_MAIN_SEARCH.tpl when you save it to your computer. Once saved and renamed locally, you will need to change one thing before uploading to your web site. Find this bit of code (near the end of the first <input> line):

Code

class="buttons__search button_micro"


and change it to:

Code

style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" tabindex="-1"

That change should remove the submit button so you have just the search input box. Then you can upload the template to your web site templates_custom directory. I would put it in the themes\default\templates_custom directory. But before uploading, you can examine the template <form> code and make any other changes you want. For example, if you want the search input box to be twice as wide, you can change the size="20" in the first <input> line to size="40".

I checked the v10 GLOBAL_HTML_WRAP.tpl and see it uses some new CSS definitions that can be used within the that navigation bar in the header. I think if you load up your current GLOBAL_HTML_WRAP.tpl in your ocPortal template editor and find this code (starting somewhere at or near line 27):

Code

            <div class="global_navigation">
               {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
            </div>


and change it to:

Code

            <div class="global_navigation">
               {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
                  <div style="margin-right: 1em; float: right; vertical-align: middle;">
                     {$BLOCK,block=main_search}
                  </div>

            </div>
​​​​​​​​​

that might work, or at least get you close to what you are looking for.

You can adjust or add new CSS styles to the style= part of the second <div> line to tweak how the search input box displays on that navigation bar. The code above should put the search box to the right side of the navigation menu, leave a small 1em space/margin to the right of the search box, and align the box to the vertically in the middle.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Chris Graham)  
Rating:
#107194
Avatar

Community saint

OK, I've ported the Top Search block from v10 to v9. I only made a few changes:

I renamed search.php to search_top_search.php to avoid any possible conflict with any future search.php file that might be needed by the v9 Search module. I moved the Top Search language strings to their own top_search.ini file so search.ini won't potentially need manual maintenance with future v9 updates. In the template, I removed the submit button and added the word search in the search input box (so it appears just like it does here in the header at ocportal.com). I changed the function declarations in the top_search.php block file from public to standard functions. And lastly, I deleted the require_css line from search_top_search.php and updated the require_lang and require_code lines in search_top_search.php and top_search.php files to reference the proper required file names.

I did have some trouble getting things working in GLOBAL_HTML_WRAP.tpl to get the search box to display in the navigation bar. I eventually got it to display the menu on the right with the search box on the left using the default v9 GLOBAL_HTML_WRAP.tpl template. If you want it swapped (menu on the left with search box on the right), you will probably have to do some more significant alterations to the header section to get the HTML div's to work out correctly.

In GLOBAL_HTML_WRAP.tpl, I changed this bit of code (starting on or near line 27):

Code

    <div class="global_navigation">
        {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
    </div>

to this:

Code

    <div class="global_navigation">
        <div class="float_surrounder">
            <div style="float: right; width: 100%;">
                {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
            </div>
            <div style="margin-left: 1em; float: right; vertical-align: middle; position: absolute;">
                {$BLOCK,block=top_search}
            </div>
        </div>
    </div>


This is the result:


The attached .tar file is an archive of the backported Top Search addon. You can either extract the files and manually upload them to your web server (maintaining the directory structure in the archive), or you can import the .tar file from your AdminZone>Structure>Addons>Import Non-Bundled Addon(s) and then choose the upload option to upload the archive and install the addon.

Attachment
Top Search block addon for ocPortal v9
» Download: Top_Search-30032015-0003.tar (16 Kb, 82 downloads so far)
Back to the top
 
Posted
Rating:
#107216
Avatar

Well-settled

@Jason - I've tried to both upload the .tar file through the add ons in the admin zone as well as manually swapping the files in my directory but nothing seemed to work. I also cleared the website cache to be sure it wasn't that but still nothing. Any advice that'll help me get it to work?
Back to the top
 
Posted
Rating:
#107217
Avatar

Well-settled

Does the mod.inf file need to be uploaded to the public_html directory?
Back to the top
 
Posted
Rating:
#107218
Avatar

Well-settled

I changed out the global code and now the search is in the main nag bar but it's on the left not the right side.



The search box itself works perfectly but being on the left side it is covering some nav buttons. What can I do to make it appear on the right side?


Last edit: by Local Mc
Back to the top
 
Posted
Rating:
#107220
Avatar

Community saint

That's right where I got stuck. Some more of the header section of the GLOBAL_HTML_WRAP.tpl template will need to be altered to get it how you want it. There are several div's in the header that tie into several CSS classes that define how the header pieces all fit together. I would need more time to figure that part of the puzzle out.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jason Verhagen)  
Rating:
#107221
Avatar

Well-settled

Jason I truly appreciate your help with this. There is no way I could've figured it out on my own. You're awesome!
Back to the top
 
Posted
Rating:
#107240
Avatar

Community saint

OK, I think I've got a possible solution. I'm still not sure of a more appropriate way to handle the div's, but I did find one solution that should work for you.

In the GLOBAL_HTML_WRAP.tpl code I posted above, use the same block of code, but change this line:

Code

<div style="margin-left: 1em; float: right; vertical-align: middle; position: absolute;">

to this:

Code

<div style="margin-left: 812px; float: right; vertical-align: middle; position: absolute;">

​That will just change the left margin of the top search block and push the search input box over to the right by 812 pixels. That should put it centered above your Facebook, Twitter, and YouTube icons in the right column of your web site homepage.
Back to the top
 
Posted
Rating:
#107252
Avatar

Well-settled

Jason, that def put the search on the correct side but now the nag bar has gotten too big. Ive attach a screen shot.... Im thinking it may just be a <div> thing but before I experiment I wanted to get your take on it.

Back to the top
 
Posted
Rating:
#107254
Avatar

Community saint

I loaded up your site in Chrome and checked the page source code. It looks like a bunch of HTML non-breaking spaces (&nbsp;) got inserted in with the code. If you copied the code and pasted it, it looks like the spaces were translated to &nbsp; instead of just blank spaces. Double check the GLOBAL_HTML_WRAP.tpl code you added in the template editor and remove any &nbsp; references that might be there in that section of code.
Back to the top
 
Posted
Rating:
#107255
Avatar

Well-settled

Im not seeing any (&nbsp;) in that code. Here is a screen shot

Back to the top
 
Posted
Item has a rating of 5 (Liked by Jason Verhagen)  
Rating:
#107256
Avatar

Well-settled

I think I figured out what you were talking about and I may have it now. Check out these screen shots:

Safari:


Chrome:


Firefox:
Back to the top
 
Posted
Rating:
#107257
Avatar

Well-settled

This is what I did to the code:

Back to the top
 
Posted
Rating:
#107260
Avatar

Community saint

Odd. I'm not sure why those spaces were translated to non-breaking spaces today but they weren't when you first made the change yesterday. At least it's working now. I just want to make one mention that this solution works with your theme since it's a fixed-width theme. If you turn off the fixed-width theme option and go to a full screen theme, another solution will need to be found.
Back to the top
 
Posted
Rating:
#107261
Avatar

Well-settled

No worries. I plan on sticking with the fixed-theme anyway. One last note, I checked it out on a mobile device using Safari on my iPad and it seems to push the search below the nav bar slightly. I don't know if this is something we can adjust or I'll just have to live with it but for now thank you so much for your hard work. I cant tell you how much I appreciate it.

- Mike Carlson (LocalMC)


Last edit: by Local Mc
Back to the top
 
Posted
Rating:
#107283
Avatar

Community saint

I don't have an iPad to test with and the online iPad Safari emulators I tried didn't seem to have the problem you describe. But those emulators are a bit generic and limited. However, I think I was able to replicate your results in Chrome by using the Zoom function of the browser. By default, a web browser shows web pages at 100% zoom level (maybe not on smaller screen devices?). If I lowered that to 50% in Chrome on my Windows desktop, the nav bar shrunk in height more than the search input box. This caused the search input box to extend outside the bottom edge of the nav bar. I suspect that might be what you are seeing. I'm not sure if it's an automatic scaling thing on small screen devices, a Safari/iPad/tablet related thing, or maybe you have manually changed the zoom level in Safari? It might be fixable with CSS, but that will be getting into areas I haven't worked with yet (mobile device and viewport specific CSS). 
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: