I added a search box to my wordpress website but since there are a lot of default styles in wordpress I can't seem to manage to get bot the box and the submit button aligned.
Currently the submit button is starting a little higher than my search box, though I haven't specified any margin or padding for my button..
The website is online here; http://sennheiser-apart.com
And these are the css lines I currently have for the search things in my child theme's css file.
button {
border:none;
padding:6px;
}
input {
height:28px;
border:none;
}
input[type="submit"]{
border:none;
background-color:#00AFDD;
height:28px;
color:#fff;
font-size:18px;
margin:0px;
}
input[type="submit"]:hover{
background-color:#ADAFB2;
}
Even searching on my page and looking for a line of styling in other files that wordpress uses doesn't help, I just can't find what's causing this. Does anyone have a clue? How can I fix this?
Without looking too much into detail, you can add this to the <form>-element:
padding: 5px 0 0 0;
and to both <input>-elements add:
vertical-align: top;
This should do the trick.
Related
I have installed a theme in my WordPress website.
On top of the theme, I have added bbPress (forum)... unfortunately the CSS render very badly the forum features...
for example, the picture below show how the search button overlap with the search box
Search box-button overlapping
If I look at the css I can see this:
element.style {
}
vlog-bbpress.css?ver=1.8.1:9
#bbpress-forums #bbp-search-form {
position: relative;
float: none;
}
bbpress.css?ver….5.14-6684:429
#bbpress-forums #bbp-search-form {
clear: left;
}
what should I change in the css??? (I have installed Simple Custom CSS plugin (https://en-ca.wordpress.org/plugins/simple-custom-css/)so I should not need to do any custom css, but I shoul just be able to add the custom CSS)
in case anyone of you want to have a look at the website, you can find it here (not live yet, just playing around)
http://italiancrypto.it/forums/
many thanks all
Regards
#bbpress-forums #bbp-search-form .button {
margin-top:0;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px;
}
You may need to include !important tags, depending on where your CSS overrides are injected. But only use if necessary.
eg:
#bbpress-forums #bbp-search-form .button {
margin-top:0 !important;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px !important;
}
Add the below CSS to solve alignment of button
#bbpress-forums #bbp-search-form .button {
margin: 0;
padding: 9px 20px;
}
Do some reading on using the Chrome inspect screen--I've added an image to help. To get this screen, right click on the search button.
You'll see the highlighted html code on the left (the input field). On the right, you'll see the css and their values for that field.
See the check mark next to each field>? I clicked on the margin setting to remove it. Then, I clicked on the plus sign in the upper right of the inspect screen.
That lets you key in a temporary value for a new parameter. I keyed in:
margin-top: 0;
You'll see that in the image I attached. Now the button is aligned. The css to place in your style sheet is just above the inserted margin-top field.
You'll see that the button is now aligned with the search field. So Mando's answer should work.
position: relative. That should work
After a bit of work I have successfully moved the "Sort By" option on the product listing page of my website from its original position up next to the limiter (for the amount of products shown on each page) without breaking it. However, I cannot seem to figure out how to change it's current alignment.
I've got it displaying inline with the limiter, but I would like to move it over to the right so it is directly next to the limiter (rather than being directly in the center as it is now).
You can see it's current position on the product listing page here: http://soundcherry.com/index.php/sound-effects.html
How do I achieve moving the "Sort By" option to the right? I feel like it's something incredibly obvious and I'm simply missing it due to my lack of experience.
Any help will be greatly appreciated. Thanks!
EDIT
This is the part of the styles.css page that I believe I need to change. What do I alter exactly? Every time I think I have it figured out, it doesn't produce the results I expect.
/* Sorter */
.sorter { font-size:11px; padding:1px 8px; }
.sorter .view-mode { float:left; margin:0; }
.sorter .sort-by { float: right; }
.sorter .sort-by label { vertical-align:middle; }
.sorter .sort-by select { padding:0 ; margin: 1px; vertical-align:middle; }
.sorter .link-feed {}
You can do it in simple way
As i change from firebug to add 2 small property to your sort-by class you can add like below with inline style or in you css if you want to get same features in all pages
just add below css
float: right;
margin-left: 15px;
EDIT
.pager .sort-by { float: right; margin-left: 15px;}
let me know if i can help you further.
I've been looking around and can't seem to find anyone with the same issue on here.
I'm rather new to CSS3, and I'm not sure what's up, but the text and links aren't working and you can't highlight the text. Here's the example:
http://503rephotography.com/_temp/test1.html
And I'm in the process of doing the rest correctly - right now there are a lot of workarounds using old HTML to position images, etc., so I'll fix all of that later! :)
If anyone has any ideas or tips, I would greatly appreciate any insight. Thanks in advance!
Trevor
The z-index is keeping the text below other items on your webpage.
If you change the z-index, for example, of your menu in main.css to 1 you should be able to highlight and click the links.
div.menu
{
font-family: CapsuulaRegular;
color:#fff;
line-height:54px;
width:22%;
height:100%;
padding:0px;
border:none;
border:0;
margin:0px;
background: transparent url('55.png');
font-size: 2.25em;
style=display:block;
position:fixed;
left:70px;
top:0;
bottom:0;
z-index:1;
}
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.