Highlight the number of the currently page on mobile view!

brunofogao

Hello everyone, are you fine?

I've a problem on my mobile theme. Can anyone help me?

I'm using the Gopi theme for my forum about Botafogo, a famous soccer club in the world. But when the topic has a lot of pages, i can't know where is the page that i'm in! There isn't a highlight indicating that i'm in the page 8, for example.

If I go to full version I can see this highlight in the current page that i'm in.

Anyone knows, where can I change it on mobile CSS?

Examples those i want to say, are in attachments bellow:

WITHOUT HIGHLIGHT:

WITH HIGHLIGHT IN THE FULL VERSION:

Thanks for attention,
Bruno

jeongwee

maybe you forgot to add

$Configuration['Garden']['MobileTheme'] = 'Gopi';

to you conf/config.php

mauwiks

Did this answered your concern? @brunofogao

R_J

Get yourself the CSSEdit plugin and try to play with the selector like that:

.Pager > a.Highlight {
  background: green;
}

Instead of using a green background, you should inspect the link style you want to mimic.

brunofogao

Hello brothers. Sorry for the late but these tips above doesn't work.

Jeongwee i don't want the Gopi as mobile theme, everything be big.

And R_J, where I put this code? I tried in some places around the .pager and nothing happens.

The css code is this:

.Pager {
    float: none;
    font-size: 120%;
    text-align: center;
}

.Pager a,


.Pager span {
    margin: 0 6px; 

Where I put the code?

Thanks for attention,
Bruno

R_J

If you want to change some color, the size of some elements or anything else which you can do with CSS, you can create a new theme. If you do not plan to make bigger changes and only want to tweak some things, you can use the plugin CSSEdit instead.

That plugin shows an option in the dashboard to edit CSS which will be added to your page. You can place css code there.

I guess that the rules you've tried by now were not changing anything because of the specificity of the CSS selectors. Best approach is to inspect the element you want to change with your browsers tools and find the rule which causes the current behavior with this tools. Afterwards just copy the selector (to your theme or into the CSSEdit text box) to write down your new CSS rules.

brunofogao

R J, thanks your attention...

But I don't want to make big changes or a new theme. I only want customize the pages indicators adding a highlight like the prints above.

You gave me a code before but my doubt is where i put it in these lines bellow:

.Pager {
    float: none;
    font-size: 120%;
    text-align: center;
}

.Pager a {
background: green;} ,


.Pager span {
    margin: 0 6px; 


}

I already found where I can change the css...

Thanks again,
Bruno

whu606

@brunofogao

If you read RJ's reply properly, he has told you what to do:

want to tweak some things, you can use the plugin CSSEdit instead.

R_J

@whu606: based on the last post I assume the question really isn't "how to add", but "in which line of the original css" which makes answering much more difficult...

@brunofogao: generally spoken, changing existing files is a very bad approach. If there well be an update for what you change, your customizations will be overwritten.
That said, it might be okay to directly change a file from a third party theme that possibly never gets an update.
Nevertheless, instead of changing the file I still would advise to use the CSSEdit plugin for various reasons, but it really is up to you.

Since you are showing some lines from the css file and keep on asking where to add my code, I assume you do not know much about css.
In css you have selectors and rules. The selector determines which "parts" of the website should be altered and the rule tells which properties to change.
It is always like that:

Selector_A {
  some rule
}
Selector_B {
  rule 1;
  rule 2;
  rule 3;
}

If you use the same selector more than one time trying to change the same property, the last rule will always be applied:

body {color: green}
body {color: yellow}

That will result in the font color of the body element being yellow, because rules are processed one by one and the last one is changing the color to yellow.

---

Back to your question: I gave you one selector, ".Pager > a.Highlight". That looks more complicated than the examples above, but nevertheless it only is a selector, syntax-wise.

The rule is in the curly braces: "background: green;". And it has only been an example. I bet you do not want to have green background for those numbers, but I thought your only problem has been to find the correct selector. At least for me that oftentimes is the hardest part.

If you would add that snippet at the top of the css file you would like to edit, it might be overwritten. Therefore, if you change something with CSS, try to put it at the very end, so that your CSS rule is what is processed last.

If you insist on changing the CSS file you have found, put the three lines at the end of the file.
If you use the CSSEdit plugin, you can simply enter it in the textbox, since everything you enter there will be loaded after the current themes CSS file.

brunofogao

Sorry for the laaaaaaate, but It works with your explanations!!!!!!

I didn't know about this plugin, where we can put the codes!

Thanks everybody that helped me!