Photoshop Question posted in
The official user guide can be found here.

How to align Google Custom Search box? – Photoshop

I want to align google custom search box to the left of my webpage. I’m using a website builder called imxprs. I use this code for my custom search box. 

<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

How can I do this?
Optional: And if anybody is using imxprs, do you know how to make search box on the same line with the H1 of the blog element like in the picture>>
Like this, I photoshoped it!

Tags:

2

Answers


  1. 0

    What you can do is wrap the <gcse:search></gcse:search> tags in a div and you can then apply properties on that div to meet your criteria like would do during normal course of development. Take a look at the code snippet

    #searchContainer {
width: 49%;
float: right;
display: inline-block;
}

#heading {
display: inline-block;
width: 49%;
}

.container {
display: flex;
align-items: center;
}
    <script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="container">
<h1 id="heading">Articles</h1>
<div id="searchContainer">
<gcse:search></gcse:search>
</div>
</div>
    Login or Signup to reply.
  2. 0 
    (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
    .container{
  width: 400px;
  float: right;
}

h1{
  float: left;
}
    <h1> Hello, World </h1>
<div class="container">
  <gcse:search></gcse:search>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search