Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP]Wyszukiwarka na logo forum
Forum PHP.pl > Forum > Przedszkole
freefragcs
Witam!
Od niedawna korzystam z skryptu forum jakim jest IPB. Chciałbym dodać wyszukiwarkę na logu.

Kod wyszukiwarki:
  1. <if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
  2. {parse template="quickSearch" group="global" params=""}
  3. </if>


Kod, który odpowiada za wyświetlanie logo:
  1. <div id='branding'>
  2. <div class='main_width'>
  3. <div id='logo'>
  4. <if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
  5. {parse template="overwriteHeader" group="{current_app}_global" params=""}
  6. <else />
  7. {parse template="defaultHeader" group="global" params=""}
  8. </if>
  9. </div>


CSS:
  1. #branding {
  2. background: #2E2C2A url({style_images_url}/bg.png);
  3. border-bottom: 0px solid #1b3759;
  4. min-height: 60px;
  5. }
  6.  
  7. #logo { display: inline;
  8. -webkit-transition: all 0.4s ease-in-out;
  9. -moz-transition: all 0.4s ease-in-out;
  10. position: relative;
  11. float: left;
  12. z-index: 2;
  13. }
  14.  
  15. #logo:hover {
  16. opacity: 1;
  17. filter:alpha(opacity=70);
  18. }

Myślałem, że jak zrobię tak:

  1. <div id='branding'>
  2. <div class='main_width'>
  3. <div id='logo'>
  4. <if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
  5. {parse template="quickSearch" group="global" params=""}
  6. </if>
  7. <if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
  8. {parse template="overwriteHeader" group="{current_app}_global" params=""}
  9. <else />
  10. {parse template="defaultHeader" group="global" params=""}
  11. </if>
  12. </div>

to będzie dobrze.... jednak to nie to sad.gif

Proszę o pomoc...
Luna_s20
"Nie jest dobrze" ponieważ wstawiasz div z logo DO wyszukiwarki, zamiast na odwrót.

Div z twoim logo to

  1. <div id='logo'>
  2.  
  3. <!-- zawartość logo -->
  4.  
  5. </div>



a div z wyszukajką to

  1. <div id='branding'>
  2.  
  3. <!-- zawartość szukaja -->
  4.  
  5. </div>


Żeby wyszukiwarka pojawiła się W LOGO a nie na odwrót, musisz wstawić div z jej zawartością POMIĘDZY
  1. <div id='logo'> ... </div>
freefragcs
Czyli mam wstawić to:
  1. <div id='branding'><if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
  2. {parse template="quickSearch" group="global" params=""}
  3. </if></div>


Pomiędzy divy loga?
Luna_s20
Źle spojrzałam - moja bardzo wielka wina.
Kod wyszukiwarki masz w swoim pierwszym poście:
  1. <if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
  2. {parse template="quickSearch" group="global" params=""}
  3. </if>


I to jego należy wkleić pomiędzy znaczniki 'div' twojego logo.

A gdzie dokładnie, czy na górze, czy na dole - nie mam pojęcia bo nie widzialam Twojej strony na oczy i nie wiem, jak to wygląda.
W każdym razie powinno wyszukiwarkę tam umieścić bez problemu, ale też nie piszesz na czym polega błąd.

Jeśli ci się ona rozjeżdża, poszukaj w pliku CSS swojego stylu linii odpowiedzialnej za styl wyszukiwarki i linii odpowiedzialnej za styl logo
(Jeśli np logo ma z góry określony rozmiar, dodatkowy element w nim może spowodować wyświetlenie się cudów. Podobnie wyszukiwarka może "nie pasować" do logo.
Czy po wstawieniu szukajki do logo, była ona wyświetlana? (Niektóre parametry w CSS jak "float", "left", "right", "top", "bottom" albo "margin" mogą ją wówczas przesunąć) Zresztą, pobaw się - to tylko pliki więc nie wybuchną. Odszukaj sobie tą templatę "quickSearch" i zobacz, co tam w niej masz ciekawego. Na pewno klasę CSS.
freefragcs
Obecnie wyszukiwarka wyświetla się pod logiem...

Mam taki kod CXSS odpowiedzialny za wyszukiwarkę i zbytnio nie wiem za którą część mam się zabrać :/
  1. /* SEARCH */
  2.  
  3. #search { margin: 0px 0; }
  4. #main_search {
  5. font-size: 11px;
  6. border: 0;
  7. padding: 0;
  8. background: transparent;
  9. width: 130px;
  10. outline: 0;
  11. color: #fff;
  12. }
  13.  
  14. #main_search.inactive { color: #bcb5b0; }
  15.  
  16. #search_wrap {
  17. position: relative;
  18. background: #5b5754;
  19. display: block;
  20. padding: 0 26px 0 4px;
  21. height: 26px;
  22. line-height: 25px;
  23. /*-moz-border-radius: 3px 4px 4px 3px;
  24. -webkit-border-top-left-radius: 3px;
  25. -webkit-border-top-right-radius: 4px;
  26. -webkit-border-bottom-right-radius: 4px;
  27. -webkit-border-bottom-left-radius: 3px;
  28. border-radius: 3px 4px 4px 3px;*/
  29. /*-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
  30. -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
  31. box-shadow: 0px 2px 4px rgba(0,0,0,0.2);*/
  32. min-width: 230px;
  33. }
  34.  
  35. #adv_search {
  36. width: 16px;
  37. height: 16px;
  38. background: url({style_images_url}/advanced_search.png) no-repeat right 50%;
  39. text-indent: -3000em;
  40. display: inline-block;
  41. margin: 4px 0 4px 4px;
  42. }
  43.  
  44.  
  45. #search .submit_input {
  46. background: #958474 url({style_images_url}/search_icon.png) no-repeat 50%;
  47. text-indent: -3000em;
  48. padding: 0; border: 0;
  49. border: 1px solid #958474;
  50. display: block;
  51. width: 26px;
  52. height: 26px;
  53. position: absolute;
  54. right: 0; top: 0; bottom: 0;
  55. /*-moz-border-radius: 0 3px 3px 0;
  56. -webkit-border-top-right-radius: 3px;
  57. -webkit-border-bottom-right-radius: 3px;
  58. border-radius: 0 3px 3px 0;*/
  59. -webkit-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  60. -moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  61. box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  62. }
  63.  
  64. #search_options {
  65. font-size: 10px;
  66. height: 20px;
  67. line-height: 20px;
  68. margin: 3px 3px 3px 0;
  69. padding: 0 6px;
  70. /*-moz-border-radius: 3px;
  71. -webkit-border-radius: 3px;
  72. border-radius: 3px;*/
  73. background: #44413e;
  74. display: inline-block;
  75. float: right;
  76. max-width: 80px;
  77. text-overflow:ellipsis;
  78. overflow: hidden;
  79. color: #9d968f;
  80. }
  81.  
  82. #search_options_menucontent { min-width: 100px; white-space: nowrap; }
  83. #search_options_menucontent input { margin-right: 10px; }
  84. #search_options_menucontent li { border-bottom: 0; border-top: 0; }
  85. #search_options_menucontent label { cursor: pointer; }
Luna_s20
Ja też nie wiem - ponieważ żeby to wiedzieć, musisz określić jaka klasa jest przypisana div'owi zawierającemu szukajkę.
W tym celu musisz podejrzeć plik templatki (znajdziesz go w folderze stylu), i zobaczyć co jest wpisane za "class=" lub "id="

Wtedy poszukaj tej nazwy notatnikiem w stylu css, będziesz mieć i kod html odpowiedzialny za wyświetlanie szukaja, i css odpowiedzialny za jego wygląd smile.gif
Z tego co widzę wstępnie w tym css, szukajka powinna się wyświetlać w logo bo kod nie ma "niespodzianek".

Zawsze łatwiej ci będzie przenieść kawałek html'a do templatki z logo, niż kombinować nie widząc, na czym działasz. Zresztą, zapoznanie się, przynajmniej pobieżne, z konstrukcją własnej strony da ci dużo i poza kwestią jednorazowej modyfikacji.
freefragcs
Naprawdę bardzo dziękuję Ci za pomoc i jasne wytłumaczenie wszystkiego smile.gif

Zrobiłem tak:
  1. #search {
  2. margin: 0px 0;
  3. float: right;
  4. position: absolute;
  5. bottom: 5px;
  6. right: 0px;
  7. }


I idealnie działa smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.