Misura css date dal Debugger

[frank]

Non capisco una cosa, il debugger mi da la misura 150x24 del campo di ricerca, io vorrei modificare la misura ma non trovo questo css, ho cercato in tutti i css.

[Nino76]

Prova in forms.css cerca:

Codice: Seleziona tutto

.search-box .inputbox {
    background-image: none;
    border-right-width: 0px;
    border-radius: 4px 0px 0px 4px;
    float: left;
    height: 24px;
    padding: 3px;
    box-sizing: border-box;
}

[frank]

Da dove salta fuori form.css? io vedo colours.css:32

[Micogian]

Personalmente uso un programmino utilissimo che mi dice dove si trova una stringa nella directory selezionata, compreso le subdirectory.
Si chiama "agent ransack", si scarica liberamente e si installa nel PC.
Ovvio che bisogna avere nel PC le cartelle da controllare ma avere una copia del forum in locale è cosa utile e quasi obbligata per uno che vuole fare modifiche.

La ricerca della stringa "search-box" nella cartella "theme" ha evidenziato che la stringa è presente nei seguenti file:

bidi.css
colours.css
forms.css
responsive.css

Si tratta di controllarli tutti e vedere qual'è la classe che stabilisce la dimensione.

[frank]

Francamente non vedo l'utilità di installare il forum in locale, io per i css ho creato un file PERSONAL.css e l'ho messo in stylesheet.css, In questo modo non tocco i css originali.

Mi sembra strano che il debugger di Firefox non mi dia tutti i css.

[Nino76]

Per visualizzare tutto il contenuto devi scorrere con la barra a destra...
per modificare la largezza vai in; tuoforum/styles/prosilver/theme/forms.css
cerca:

Codice: Seleziona tutto

input.tiny	{ width: 150px; }

in questo modo modificando il valore aumenti la larghezza, ovvero la lunghezza del box; per aumenare l'altezza invece dvi agire su:

Codice: Seleziona tutto

.search-box .inputbox {
	background-image: none;
	border-right-width: 0;
	border-radius: 4px 0 0 4px;
	float: left;
	height: 24px;
	padding: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

modificando l'altezza (height), e successivamente anche l'altezza delle icone.

[frank]

Non ho capito come hai fatto a trovare input.tiny hai usato il debugger di Firefox?

[Nino76]

No, ho solamente cercato qualcosa in forms.css che avesse valore 150px!! Quando non si conosce il codice si va a tentativi ...le modifiche comunque funzionano le ho provate in locale

[frank]

Si, ho modificato, ma non capisco perché il debugger non dia l'esatto css. Poi ho notato che quando clicco sulla prima icona in alto a sinistra del debugger (quella con la freccia), il debugger scompare.

[Nino76]

Infine per i tasti di cerca e ricerca avanzata, vai sempre nel tuo file forms.css e cerca:

Codice: Seleziona tutto

.search-box button.search-icon {
	border-radius: 0;
	font-size: 0;
	height: 24px;
	margin: 0;
	padding: 3px 5px;
}

modifica heigt con la stessa grandezza che hai dato al box..lo stesso per la ricerca avanzata...vai in buttons.css e cerca:

Codice: Seleziona tutto

.button {
	cursor: pointer;
	display: inline-block;
	height: 18px;
	font-size: 13px;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent none 0 0 repeat-x;
	padding: 2px 8px;
	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
	position: relative;
	text-decoration: none !important;
	outline-style: none !important;
	vertical-align: bottom;
}

Modifica anche qui l'altezza!!
Per il resto non so dirti...ovviamente andrai a modificare l'aspetto del box ovunque esso si trovi nel forum, header incluso.