Swap Logo and Search Box in Header

Hi,

I managed to align/position the Logo to the left but can't make the Search Box align/position to the middle... can you please help?

Thanks

Quote · 15 Aug 2014

 

Hi,

I managed to align/position the Logo to the left but can't make the Search Box align/position to the middle... can you please help?

Thanks

 

Any help?

Thanks

Quote · 16 Aug 2014

if using firefox or chrome, you can right click on the web page at the section that you need to change, and then select Inspect Element (make sure all caching is turned off). You should have a section that looks similar to my screenshot.

The section on the left is the code view of the page (html code), and the section on the right is the css styling. You can play with the right side until you have the changes you want without actually making changes to your site itself. Once you have what you want, take note of the page that you made the changes for and then apply to your site.

But before doing all of that - I would highly recommend creating a copy of your template - regardless if you are using the Uni, Alt, or a custom template. Then, set that new template as your default template, and make all changes in that new template. This way, if you screw something up, you can always fall back to your original template.

snapshot24.png · 325.6K · 220 views
caredesign.net
Quote · 17 Aug 2014

I usually use the Element Inspector of Firefox and tried a lot to make the Search Bar Align Center but no luck... I tried Float Center, Position Center... no luck...

I was able to make the Logo Align Left by removing text-align:center in:

div.sys_ml_wrapper {
    position: relative;

    text-align: center;

but the Search doesn't want to work:

div#sys_search input.input_main {
    color: #d4d4d4;
}
div#sys_search input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    outline: medium none;
    padding: 3px;
    width: 140px;

-----------------------------------


Quote · 17 Aug 2014

Remove any current changes to the search you may have made, and then do this. Because the search box is absolutely positioned, changing the position is a simple matter of adjusting it's position css settings.

Find this in general.css at about line 176

div#sys_search {
    position: absolute;
    top: 7px;
    left: 0px;
    background-color:#fff;  
}

Change to this

div#sys_search {
    position: absolute;
    top: 7px;
    left: 50%;
    margin-left: -70px;
    background-color:#fff;  
}

https://www.deanbassett.com
Quote · 17 Aug 2014

 

Remove any current changes to the search you may have made, and then do this. Because the search box is absolutely positioned, changing the position is a simple matter of adjusting it's position css settings.

Find this in general.css at about line 176

div#sys_search {
    position: absolute;
    top: 7px;
    left: 0px;
    background-color:#fff;  
}

Change to this

div#sys_search {
    position: absolute;
    top: 7px;
    left: 50%;
    margin-left: -70px;
    background-color:#fff;  
}

 

Thanks a lot for your help... I was able to do it... 

if you don't mind, how can I add a little "Search Icon" beside it so people click on to search instead of hitting ENTER?

Also, I need to insert a hyperlink "Advanced Search" right beside the search box without breaking the code but the link keeps going inside the search box... I appreciate your help...

Thanks

Quote · 21 Aug 2014
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.