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
Related
I am new to WordPress theme customization. I am using a theme with woocommerce. when i navigate to the products page click on some item for details it show the woocommerce widgets on right side. I am trying to place that side bar on the left side by changing css. It is working but i am facing this issue.
Before changing css add to quote button working fine.
After changing css add to quote button stop working.
Changes in css
.with_aside .sections_group {
width: 77%;
float: right;
}
.with_aside .four.columns {
float: left;
width: 23%;
}
Changing css through inspect element
Kindly help me what i am doing wrong.
Edited
URL
Add following CSS
.column.one-second.summary.entry-summary {
position: relative;
z-index: 99;
}
You can view the page I'm working on here: http://stats.escalatehosting.com/whois.php
The problem I'm having is that I just can't figure out what CSS needs to be changed to center the page numbers located at the top and bottom of the page. I've tried changing everything I can think of but it always ends up off-center when you start clicking to pages with larger numbers...
I'm not really sure what needs to be changed, if anyone has any suggestions, that would be greatly appreciated.
As you commented, center is not a valid value for float property, either you can use left, right or none which is default.
On creative2tables line 167 change your CSS as provided below..
#ct1_pager_container, #ct2_pager_container {
margin-bottom: 15px;
clear: right; /* Not sure if required */
width: 300px;
}
And in the same stylesheet on line 174 change the below as
#ct1_pager, #ct2_pager {
clear: both;
list-style: none;
}
I've changed the above properties to center your pagination, please do check if you are using these id's for any other element as well.
You need to update below Class.
#ct1_pager_container, #ct2_pager_container{
width:100%;
}
#ct1_pager, #ct2_pager{
float:none;
text-align:center;
}
Update only given element. don't update whole CSS. keep everything else as it is.
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 saw a page today which has a little detail, which I find, is very neat.
http://www.songkick.com/feedback
If you have a look at the right upper corner you see:
I tryed to inspect the element, to how this is done and I only get this code:
We <strong><span>love</span></strong> feedback
Where is the magic? I don't see a reference to a picture for the heart or something. Where does the heart come from?
Open up Firebug. Then right click on the heart image and click on "Inspect Element" in the context menu.
If you are in the HTML or CSS views in Firebug then in the small pane to the right it will show the CSS rules, which are as follows (copied from Firebug):
#header #header-nav ul #feedback strong {
background-image: url("http://www2.sk-static.com/images/layout/heart-small.png?20110728085037");
background-position: 0 2px;
background-repeat: no-repeat;
display: inline-block;
height: 10px;
width: 10px;
}
So, background-image is the "heart".
Happy coding.
And to answer "where did 'love' go?", click on the <span>love</love> in the HTML view (it is not selected by the above approach, presumably because it is hidden):
#header #header-nav ul #feedback strong span {
display: none;
}
The Computed tab is also helpful to see the actual applied rules.
The <strong> tag has this CSS: background-image: url(http://www2.sk-static.com/images/layout/heart-small.png?20110728085037);, applied from this CSS rule: #header-nav ul #feedback strong :)
Using firebug, it's an image in their css.
http://www2.sk-static.com/images/layout/heart-small.png?20110728085037
How do I create a similar “search” element to the one in this site?
If we view source, he has one textbox followed by a <span> tag.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Where do I get a similar "magnifying glass" image?
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.
What you need to do is add a wrapper div around the input:text and input:submit.
The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.
You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
.search {
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"] {
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"] {
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you’ll be able to see the CSS used to achieve this effect.
If you’re not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide’.
A site like Iconspedia has a number of free icons that are similar.
Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.
If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:
http://jsfiddle.net/Lzm1k4r8/23/
You can adjust left: position to be left or right side of the search box.
To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:
.search:hover {
cursor:pointer;
}
I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request.
It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.
For instance:
$('#search-field').iconfield( {
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
$('#search-form').submit()
}
I would love to get some feedback on my work.