1 Topic by hoang83vu (edited by hoang83vu 2011-12-20 21:29)

  • Registered: 2011-12-20
  • Posts: 180

Topic: How-to: edit the advanced search page tips div?

Hello supporters,

I want to add an image into the tips div and make it float left, pushing all texts to the right. I cant find the html code for that particular part anywhere. Can anyone show me how?

Much appreciate.

link: http://vphansite.com/forum/search.php?advanced=1

  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

Am I confusing people?

3 Reply by Kushi

  • Kushi
  • Kushi
  • Style creator & Extension Developer
  • Offline
  • From: Poland
  • Registered: 2011-10-26
  • Posts: 243

Re: How-to: edit the advanced search page tips div?

You mean like that?
http://i.minus.com/ibs1E9zHXVv0kf.PNG

Add to your .main-content .info-box { ( Oxygen.min.css line 549 )

width: 20%; //or some else
float: left;
If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.
  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

Thank you for replying. But, that is not what I need. Notice the box where it says

"You may search for a single keyword or for multiple keywords separated by spaces.
You may use AND, OR and NOT to refine your searches by keyword.
Use the wildcard character * for partial keyword or username matches.
By default all forums are searched. You may narrow your search by selecting one or more forums to search."

I want to add an image into that box and style with float:left. That is it. I do not wish to change the layout.

Thanks.

5 Reply by Kushi

  • Kushi
  • Kushi
  • Style creator & Extension Developer
  • Offline
  • From: Poland
  • Registered: 2011-10-26
  • Posts: 243

Re: How-to: edit the advanced search page tips div?

I don't really know if I can understand You, but perhaps You meant something like this
http://i.minus.com/ibvegPBu5Ay2ec.png
?

Then add to the end of your css

#brd-search .ct-box .info-list{
background: url(http://loungelettings.co.uk/includes/tng/styles/img_not_found.gif) no-repeat; //of course change the url
padding-left: 130px; //change the paddings whatever You want
}
If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.
  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

Thank you Kushi,

This is exactly what I want to do; however, instead of using css background and padding is there a way I can inject a div?

7 Reply by Kushi (edited by Kushi 2011-12-22 17:21)

  • Kushi
  • Kushi
  • Style creator & Extension Developer
  • Offline
  • From: Poland
  • Registered: 2011-10-26
  • Posts: 243

Re: How-to: edit the advanced search page tips div?

Perhaps there is some way, but while it's too complicated it's not worth trying

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.
  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

I understand, but being a site stylist everything comes to every single detail right big_smile I will try to figure it out then post the answer here. Thanks for looking Kushi smile

9 Reply by Kushi

  • Kushi
  • Kushi
  • Style creator & Extension Developer
  • Offline
  • From: Poland
  • Registered: 2011-10-26
  • Posts: 243

Re: How-to: edit the advanced search page tips div?

If you would make it properly, nobody could see the difference. Btw. you've got padding: and width: 100% in your .brd which causes displaying horizontal scrollbar.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.
  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

I have done it. Take a look if you can see it

http://vphansite.com/forum/search.php?advanced=1

  • Registered: 2011-12-20
  • Posts: 180

Re: How-to: edit the advanced search page tips div?

Basically what I did was go to "search.php" at line 606.

Add <div id="info-img"></div> in between <div class="ct-box info-box"> and <ul class="info-list">

Finally go to css and style it.

#info-img{
     background:url(../../../img/images/alert_img.gif) 0 center no-repeat;
     padding: 4.5em 1em;
     width:50px;
     float:left;
     margin-right:2em
}