I try to style WP-filebase pagination in a page. I have used WP-pagenavi in blog articles and I got it to look as I wanted: The numbers are in boxes side by side.
As I haven't found the way to use WP-pagenavi with WP-filebase (I also read that it doesn't work with pages in WP) I have tried to style the pagination in WP-filebase to look the same, but I only get the numbers in boxes side by side BUT white space between them.
I tried to use margin-left to get rid of the white space, but then I got other problems. The border while hovering is not showing on the right. It seems that the boxes are overlapping each other on the right-side. How to fix this with css?
My css looks like this:
.tablenav-pages {
clear: both;
border-radius: 0;
font-family: 'Gotham A','Gotham B', sans-serif;
font-weight: 300;
padding: 6px 14px;
font-size: 15px;
/* margin-left: 6px;*/
}
.tablenav-pages a, .tablenav-pages span {
text-decoration: none;
color: #a30083;
background-color: #fff;
border: 1px solid #ddd;
padding: 6px 14px;
/* margin-left: -6px;*/
}
.tablenav-pages a:hover {
border-color: #a30083;
background-color: #fff;
padding: 6px 14px;
}
.tablenav-pages span.current {
background-color: #a30083;
border-color: #a30083;
color: #fff;
padding: 6px 14px;
}
div.tablenav-pages {
padding-left: 0;
padding-right: 0;
float: left;
}
Aila, you have spaces between your elements.
Ex:
<a class="prev page-numbers" href="../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=2">« Edellinen</a> <a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=1'>1</a>
After removing the spaces, they are now flush together:
http://jsfiddle.net/yfp37mac/
Related
I am using jqueryInputToken and acts-as-taggable-on gem. I was able to make the back-end work. However, as part of using the jqueryTokenInput plugin, my text_area became so slim and looks more like a tiny text_field.
Here is a picture of what my text_area looks like as a result of the jQueryInput plugin without hovering:
And when you hover the "X" sign to delete the tag apears like in the picture below:
I want to modify the css so that the text_area becomes big and the token looks exactly like below:
How should I modify the css below to reach my desired look for the text_field and tokens ?
Here is the css:
/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
position: relative;
overflow: hidden;
height: auto !important;
cursor: text;
font-size: 12px;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-mac span {
color: #231C34;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
/* TOKENS */
li.token-input-token-mac {
position: relative;
display: inline-block;
width: auto !important;
font-size: 8pt;
line-height: 12pt;
margin: 0px 3px 3px 0px;
padding: 4px 10px;
background: none;
background-color: #0F004E;
color: #fefefe;
cursor: default;
float: left;
font-weight: bold;
}
li.token-input-highlighted-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-input-token-mac {
border: none;
background: transparent;
float: left;
padding: 0;
margin: 0;
}
li.token-input-input-token-mac input {
width: 100px;
padding: 3px;
margin: 0;
}
div.token-input-dropdown-mac {
position: absolute;
border-top: none;
left: -1px;
right: -1px;
background-color: #fefefe;
overflow: hidden;
cursor: default;
font-size: 10pt;
}
div.token-input-dropdown-mac p {
font-size: 8pt;
margin: 0;
padding: 0 10px;
color: #fff;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-size: 10pt;
font-weight: bold;
border: none;
padding: 0 5px;
margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none;
cursor: pointer;
background: none;
background-color: #fefefe;
margin: 0;
padding: 0 0 0 10px;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right;
font-size: 8pt;
font-style: italic;
padding: 0 10px 0 0;
color: #999;
text-transform: uppercase;;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold;
text-decoration: underline;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background: #0F004E;
color: #bb8322; //Official Red
text-transform: uppercase;
font-weight: bold;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}
I have been trying to do something like this and have at least a rough version of something working, so I'll put this here in case it's useful. I used the Facebook theme - it looks like you used a different theme. I mention that because this influences things like class names in my answer. Also I think that Facebook might be more of what you're after (see the cosmetic stuff below).
I'll split this into two parts: a structural part first, and then a cosmetic part.
Structure
Part of my problem was due to the fact that the token input code replaces your HTML with some of its own. I wrote this HTML
<div id="searchBar">
<input type="text" id="bigTextInput" />
</div>
and the combination of the insert-token-input-here call:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',...
and the user entering a couple of things, made it look like this (with my comments):
<div id="searchBar">
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook"> <!-- one of these per user input -->
<p>first thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-token-facebook">
<p>second thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-input-token-facebook"> <!-- 1 on the end for entering the next selection -->
<input id="token-input-Y"> <!-- Y = whatever Id you gave to the original input (bigTextInput in my case) -->
</li>
</ul>
<input id=Y display:none /> <!-- the thing you created, but then is hidden and replaced by the ul etc. -->
</div>
The input I created has been hidden away, and in its place there's now a ul, with an li per thing the user entered and an extra li for the user to add more things.
To change the height successfully I had to set the height I wanted on the ul:
$("ul.token-input-list-facebook").height(newHeight + "px");
Bonus structure stuff - auto-resizing
I started with just a large box, but this didn't look good if the user had entered only a small amount of stuff. So I thought I'd try to make it start small (a single line high) and then grow on demand.
To do this I made sure that the ul wouldn't create scrollbars:
ul.token-input-list-facebook {
overflow-x: hidden;
overflow-y: hidden;
}
and then if the content overflowed, I would re-size things. I checked for overflow by adding a handler to the add and delete events of the token input:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',
onAdd: function(){
growSearchBoxSizes();
},
onDelete: function(){
shrinkSearchBoxSizes();
}
});
The best way I found to detect overflow in growSearchBoxSizes was to compare the offsetHeight and scrollHeight properties of the enclosing div:
var heightA = parseFloat($("#searchBar")[0].offsetHeight);
var heightB = parseFloat($("#searchBar")[0].scrollHeight);
I suggest you write these to console.log, experiment with what they show when the input does and doesn't overflow, and have code to add 1 line's height when they show you that there is overflow.
I couldn't come up with a good way to detect when it was time to shrink (e.g. after the user had deleted a line's worth of stuff), so in the delete handler I shrink the box down to its starting size and then grow it back up to whatever height is needed, i.e. until there is no overflow. (A hack, but it seems to work.)
Actually, I was already using a handler for the add and delete events because of wanting to prevent what the user had already entered from showing up in the auto-completion list for later inputs, which you might want to also consider.
Cosmetic
The reason why I suggested that you might want to switch to the Facebook theme is that it has the X present all the time as you want. The colours and shapes aren't as you want them, but I hope that this should be a matter of just defining overrides in your CSS as appropriate.
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)