Adelle Search bar

  • Unknown's avatar
    lauraawolff · Member ·

    Hi
    I wonder how do I change the search bar adelle theme.
    I want to leave the straight edges of the button and the text bar, and also change the colors.
    Also wanted to change the zigzag lines of the side for straight lines.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • eurello · Staff ·

    Hi there,

    The wavy lines are background images:
    http://s2.wp.com/wp-content/themes/pub/adelle/images/side_bg.gif

    You could replace them by uploading an image of the type of straight line you want to your Media Library. The image should be 260x7px and have a transparent background. Then, you can add it with this CSS: 

    .widget {
background: url('URL of your image here') repeat-x center bottom;
}

    Or you could just remove the wavy lines and add a border to the bottom of the widgets: 

    .widget {
background: none;
border-bottom: 4px solid;
}

    I’m not clear on what you want to do with the search widget. Do you mean you want to change the button color? You can do that with the following: 

    button, html input[type="button"], input[type="reset"], input[type="submit"] {
background: #fa3dc4;
border: 1px solid #fa3dc4;
color: #000;
}

    The background changes the color of the button itself; color changes the color of the text on the button.

    Note that this will change the color of all the buttons in your widgets. Do you want them to match? If not, there’s likely a way to just change one.

    If you want to change the outline around the search form itself, try:

    input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
border: 1px solid #fa3dc4;
}

    Does this help?

  • Unknown's avatar
    francisbob · Member ·

    Hi !

    For the zigzag lines you can use this :

    .widget-area .widget{
  background:transparent;
}
.widget-area .widget-title{
  border-top: 2px #ccc solid;
  padding-top:30px;
  margin-top:-30px;
}
.widget-area .widget-title:first-child{
  border-top: 2px transparent solid;
  padding-top:30px;
  margin-top:-30px;
}

.widget-area .searchform{
  border-top: 2px #ccc solid;
  padding-top:30px;
  margin-top:-30px;
}

    I don’t quite understand what you want to do for the search widget, can you elaborate ?

  • Unknown's avatar
    francisbob · Member ·

    @eurello

    Oops didn’t see you posting..!

  • Unknown's avatar
    lauraawolff · Member ·

    @eurello yes you help me.
    But how do I change the text of the search button?

  • eurello · Staff ·

    But how do I change the text of the search button?

    The search box text is not something that can be changed on WordPress.com with CSS only, because that text is populated using Javascript and we don’t give you the option to change Javascript for security reasons.

    @francisbob – No worries! Much better two answers than none at all. :)

  • Unknown's avatar
    lauraawolff · Member ·

    is possible to decrease the search bar, so that the button bar and stay on one line?

  • eurello · Staff ·

    Try:

    @media screen and (min-width: 1200px) {
input[type="search"] {
width: 50%;
}

.widget #searchsubmit {
display: inline-block;
float: right;
margin-top: 2px;
}
}

    This decreases the width of the search bar and moves the button to the right and down a bit. The media query bit limits this to screens above 1200px because this CSS modification doesn’t look right on smaller screens.

  • Unknown's avatar
    lauraawolff · Member ·

    Thanks, it worked
    Only two more things.
    is possiver let air search button and the corners of the field of righteous quest?
    At the moment they are rounded…

    I’m still having trouble using an image of division in the sidebar.
    I load the image but it is larger than original.
    How can I configure it so that it is with 260px?

    Thanks

  • eurello · Staff ·

    Sure, you can make the search form have square corners in this way: 

    input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
border-radius: 0px;
}

    For the buttons, try:

    button, html input[type="button"], input[type="reset"], input[type="submit"] {
border-radius: 0px;
}

    I’m still having trouble using an image of division in the sidebar.
    I load the image but it is larger than original.
    How can I configure it so that it is with 260px?

    Best would be to resize your image so that it is exactly 260x7px using your image editing software before you upload it.

  • Unknown's avatar
    lauraawolff · Member ·

    The image with this 260px.
    But when I put it in the css gets bigger.

    I am using this code:

    .widget {
    background: url(https://shewolftrends.files.wordpress.com/2014/08/barra.gif) repeat-x center bottom;
    }

    looks like it was:

    http://shewolftrends.wordpress.com/

  • eurello · Staff ·

    Hi there,

    What are you trying to make it look like, that’s different from how it looks now? Can you describe a bit more?

    Do you want it to not run the full width of the sidebar? If so, add a margin, for example: 

    .widget {
background: url(https://shewolftrends.files.wordpress.com/2014/08/barra.gif) repeat-x center bottom;
margin-left: 10px;
margin-right: 10px;
}
  • Unknown's avatar
    designsimply · Member ·

    The image with this 260px.
    But when I put it in the css gets bigger.

    I am using this code:

    .widget {
    background: url(https://shewolftrends.files.wordpress.com/2014/08/barra.gif) repeat-x center bottom;
    }

    The “repeat-x” part of that that rule will make the barra.gif line repeat over and over. To stop that from happening, change “repeat-x” to “no-repeat”

  • The topic ‘Adelle Search bar’ is closed to new replies.