expression custom php css for pagination

[ErnstJan]

Hello,

I found out how to change colors text and background, using custom php css, but could not find solution to get pagination without white spaces between numbers of pages. What's the expression for this to use in custom php css?
thanks and kind regards, Ernst

 

[Bauer]

Is the css where you changed colors an li tag?
If so, is there a margin set? (It looks like there is.) Remove the margin (or set it to margin:0. If that doesn't work (or in addition to) try adding a float:left; to the <a> tag inside the li.

 

[ErnstJan]

This is my code:

#listform_$c th {
    background:#32ad4d;
}
#listform_$c .add-on {
    background:#32ad4d;
}
#listform_$c .pagination ul > li > a:hover{
    background: #55165e;
 
}
#listform_$c .pagination ul > li > a:focus{
    background: #55165e;
}
#listform_$c .pagination ul > .active > a{
    background: #55165e;
}
#listform_$c .pagination ul > .active > span{
    background: #55165e;
}
#listform_$c .fabrik___heading {
    color: #FFFFFF;
    text-shadow: none;
}
#listform_$c .fabrikDataContainer .pagination a {
    background: #32ad4d;
    color:#FFFFFF;
}
";?>

 

[Bauer]

This is my code:

#listform_$c th {
    background:#32ad4d;
}
#listform_$c .add-on {
    background:#32ad4d;
}
 
/* add this */
#listform_$c .pagination ul li {
    margin:0;
}
 
#listform_$c .pagination ul > li > a:hover{
    background: #55165e;
 
}
#listform_$c .pagination ul > li > a:focus{
    background: #55165e;
}
#listform_$c .pagination ul > .active > a{
    background: #55165e;
}
#listform_$c .pagination ul > .active > span{
    background: #55165e;
}
#listform_$c .fabrik___heading {
    color: #FFFFFF;
    text-shadow: none;
}
#listform_$c .fabrikDataContainer .pagination a {
    background: #32ad4d;
    color:#FFFFFF;
/* and add this, maybe? */
    float:left;
}
";?>

Try the changes shown.

Re-examining that code - it could also be the span within the li that has the margin set. In that case (if the above doesn't work) add...
#listform_$c .pagination ul li span{
margin:0;
}

I still have no idea what other css style sheets might have different settings for those tags. Do you use something like Firefox Firebug to identify other conflicting css code that might be setting the css for this page in ways you don't really want? You may need to include !important with my suggestions if that is the case.

 

[ErnstJan]

Hello,

Tried everything without success. Used Firebug, but can't find out which css style sheets have different settings. But, if I put in custom php css the original code which normally put these things together, that will do the trick?? I can't find out which css code is normally used. Suggestions?

thanks for taking time, Ernst

 

[Bauer]

Not much else I can do without seeing the html and css.
In Firefox highlight that entire pagination line (as if you want to cut and paste) - then right-click and select 'View Selection Source'. Copy and paste the highlighted html as code in another post. I'll have a look and see if that html can help me determine what's causing the spaces - or help point you to the css that would need to be changed.

 

[troester]

It's easier to assist if you can post a link to this list.

 

[ErnstJan]

Hello,

Found out! In template css:

ul.pagenav li a, div.pagination ul li a {
  margin:0 15px;

If I change margin to 0px everything looks fine, but how to put this line of code in custom php css? I tried this:

}
#listform_$c ul.pagenav li a, div.pagination ul li a {
    margin:0 0px;

but nothing happens. Wrong expression?

Thanks again for taking time! Kind regards, Ernst

 

[Bauer]

The comma in a css stylesheet separates multiple style tags using the same style rules.
(often each is placed in a separate line so it's easier to identify)
So in your template.css, that is like saying - set margin:0 15px for "ul.pagenav li a" -OR- "div.pagination ul li a"

The problem with your change it only covers the "ul.pagenav li a"
Try...
#listform_$c ul.pagenav li a,
#listform_$c div.pagination ul li a {
margin:0px;
}

Depending on which of those two possible html nesting scenarios fits your pagination list - one or the other is probably not needed. Since the change to "ul.pagenav li a" didn't work, I assume that's the one that's not really needed (unless the problem is the need of an "!important" flag - see below).

Also, although not a good thing to get into the habit of doing unless you really have to, (and in this case you may have to) you may have to add !important to the specified margin style. (This puts more weight on that style in case another included css style sheet is trying to set the same style with a different value.)
In that case you may have to use... margin:0px!important;
My guess is this is what will work...
#listform_$c div.pagination ul li a {
margin:0px!important;
}

 

[ErnstJan]

Hello Bauer,

Thanks, your last suggestion did the job!

Kind regards and thanks for taking time, Ernst