Problemi con tema wordpress, menu e css

[daur001]

Salve,
ho provato a scrivere sul forum di supporto ufficiale ma non ho ricevuto risposta, per questo chiedo aiuto quì!

Sto creando un sito di prova su altervista (link:Prova num 1 ? Wood) ma ho un problema con il menù con le categorie (per adesso inserito soltanto nella pagina linkata.)
In pratica non riesco a fare in modo che il menu rimane centrato e si adatti a qualsiasi risoluzione dello schermo.

di seguito il css ed uno screen di come vedo il menù:


Se modifico float da sinistra a centrato questo è il risultato:

/* Style */

.custom-menu ul {
    font-size: 17px;
    list-style: none;
    text-align: center;
    margin: auto auto auto ;
    padding-left: 0px;
    z-index: 2;
}
.custom-menu li {

    float: left;
    position: relative;
}
.custom-menu a {
    color: #fff;
    display: block;
    line-height: 25px;
    padding: 0 95px;
    text-decoration: none;
    z-index: 2;
}

/* Style of sub-menu */

.custom-menu ul ul {

    display: none;
    float: center;
    margin: 0;
    position: absolute;
    top: 43px;
    left:

 0;
    width: 188px;
    z-index: 1;
}
.custom-menu ul ul ul {
    left: 100%;
    top: 0;
}
.custom-menu ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #000;
    font-size: 13px;
    font-weight: normal;
    line-height: 25px;
    padding: 10px 10px;
    width: 168px;
}
.custom-menu li:hover > a,.menu-header ul ul :hover > a,.menu-header a:focus {
    background: #efefef;
}
.custom-menu li:hover > a,.menu-header a:focus {
    background: #f9f9f9;
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5));
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #000;
}
.custom-menu ul li:hover > ul {
    display: block;
}

/* Style of page */

.custom-menu .current-menu-item > a,
.custom-menu .current-menu-ancestor > a,
.custom-menu .current_page_item > a,
.custom-menu .current_page_ancestor > a {
    font-weight: bold;
}

Inoltre ho altri due piccoli problemi con questo tema...nella home dove appaiono gli ultimi articoli pubblicati l'immagine di copertina viene praticamente zoomata al centro e ritagliata....lo stesso vale una volta aperto l'articolo l'immagine viene ritagliata secondo delle dimensioni predefinite.
Ho bisogno del vostro aiuto!!
Grazie!!

 

[cdtux]

Prova ad aggiungere il width (che poi puoi ridimensionare con i mediatag) all'li della classe .custom-menu (.custom-menu li).

 

[Stefano Novelli]

C'è molta confusione ma ci provo ugualmente.
Innanzitutto scordati il float:center, non esiste. Il float può andare da sinistra a destra (left) o viceversa.

Quindi prima di continuare, aggiungi:

<li style="clear:both"></li>

Così fai il "cleanup" della linea e dici al contenitore che i menù sono finiti.

Secondo me dovresti risolvere facilmente mettendo inline tutto il fattaccio:

/* CSS */
#[FONT=Menlo]menu-terzo-menu [/FONT]{ display:inline-block }

Puoi anche provare con inline-flex e fai le tue prove.

Il margin:auto già ce l'hai, non c'è bisogno di centrarlo.

Per quanto riguarda l'immagine dovresti manipolare questa porzione:

Se fossi in te lo riscriverei completamente, comunque non vedo il tuo problema (dentro l'articolo). Per la home invece dovresti usare un:

div#posts a
{background-size:contain}

ma dovresti rimettere apposto anche la div principale e ridimensionarla in base alle tue esigenze.

 

[daur001]

C'è molta confusione ma ci provo ugualmente.
Innanzitutto scordati il float:center, non esiste. Il float può andare da sinistra a destra (left) o viceversa.


Quindi prima di continuare, aggiungi:

<li style="clear:both"></li>

Così fai il "cleanup" della linea e dici al contenitore che i menù sono finiti.

Non lo sapevo! :cav:

Secondo me dovresti risolvere facilmente mettendo inline tutto il fattaccio:

/* CSS */
#[FONT=Menlo]menu-terzo-menu [/FONT]{ display:inline-block }

Puoi anche provare con inline-flex e fai le tue prove.

Il margin:auto già ce l'hai, non c'è bisogno di centrarlo.

Perfetto...ho risolto con inline-flex...grazie davvero!

Per quanto riguarda l'immagine dovresti manipolare questa porzione:

Se fossi in te lo riscriverei completamente, comunque non vedo il tuo problema (dentro l'articolo).

Purtroppo non ho le conoscenze per riscriverlo da zero altrimenti lo farei :(
Comunque ho trovato su functions.php la funzione che gestisce la dimensione dell'immagine ed è questa:

// Post thumbnails	add_theme_support( 'post-thumbnails' );
	[B]add_image_size( 'post-image', 1240, 9999 );[/B]
	add_image_size( 'post-thumb', 508, 9999 );

Quindi sembrerebbe tutto ok!

Per la home invece dovresti usare un:

div#posts a
{background-size:contain}

ma dovresti rimettere apposto anche la div principale e ridimensionarla in base alle tue esigenze.

Questo non sono ancora riuscito a risolverlo...ma forse è troppo complicato...se per esempio volessi cambiare queste dimensioni... ...ho trovato questa funziona ma non ho capito se si riferisce all'anteprima dell'articolo in home o all'immagine una volta aperto l'articolo, anche se penso piu a quest'ultima):

	#postimagediv #set-post-thumbnail img {		max-width: 100%;
		height: auto;
	}

Comunque ti ringrazio davvero per l'aiuto!!

Prova ad aggiungere il width (che poi puoi ridimensionare con i mediatag) all'li della classe .custom-menu (.custom-menu li).

Anche se ho risolto nel pomeriggio farò qualche prova!
Grazie!

 

[lukezona]

Questo non sono ancora riuscito a risolverlo...ma forse è troppo complicato...se per esempio volessi cambiare queste dimensioni... ...ho trovato questa funziona ma non ho capito se si riferisce all'anteprima dell'articolo in home o all'immagine una volta aperto l'articolo, anche se penso piu a quest'ultima):

    #postimagediv #set-post-thumbnail img {        max-width: 100%;
        height: auto;
    }

Grazie!

Di preciso quale sarebbe il risultato che vorresti ottenere? Non vuoi il quadrato ma una forma più rettangolare? In questo caso devi modificare qui:

 .posts .post {
	display: block;
	width: 30.7%;
	margin-top: 3.95%;
	[B]padding-bottom: 30.7%;[/B]
	float: left;
	position: relative;
	background-size: cover;
	background-position: center;
}

Modificando il padding-bottom gestisci l'altezza del box. Le dimensioni dell'immagine invece sono generate da Wordpress nei thumbnail (e qui ogni volta capire ogni tema dove genera le varie dimensioni non è sempre immediato, quello che hai postato prima comunque potrebbe essere il punto esatto)

 

[daur001]

Di preciso quale sarebbe il risultato che vorresti ottenere? Non vuoi il quadrato ma una forma più rettangolare? In questo caso devi modificare qui:

 .posts .post {
    display: block;
    width: 30.7%;
    margin-top: 3.95%;
    [B]padding-bottom: 30.7%;[/B]
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;
}

Modificando il padding-bottom gestisci l'altezza del box. Le dimensioni dell'immagine invece sono generate da Wordpress nei thumbnail (e qui ogni volta capire ogni tema dove genera le varie dimensioni non è sempre immediato, quello che hai postato prima comunque potrebbe essere il punto esatto)

Grazie!! era proprio quello che intendevo!
invece per le dimensioni nei thumb non sono riuscito a fare nulla

#postimagediv #set-post-thumbnail img {		max-width: auto;
		height: 100%;
	}

vorrei far vedere per intero gli alberi...ma continua a prendere soltanto la parte centrale...
vedo differenze soltanto modificando

 [COLOR=#333333]// Post thumbnails	add_theme_support( 'post-thumbnails' );[/COLOR][COLOR=#333333] [/COLOR][COLOR=#333333]add_image_size( 'post-image', 1240, 9999 );[/COLOR][COLOR=#333333] [/COLOR][B]add_image_size( 'post-thumb', 508, 9999 );[/B]

se invece di 508 inserisco per es. 308 cambia soltanto la risoluzione (immagine più sgranata) ma nessuna differenza.
Ho cercato qualsiasi altro riferimento a thumb su functions.php ma non trovo nulla...forse dovrei gestire diversamente

#postimagediv #set-post-thumbnail img {
		max-width: auto;
		height: 100%;
	}

Ma non saprei proprio come fare!

Vi ringrazio comunque per il prezioso aiuto!!

 

[lukezona]

Grazie!! era proprio quello che intendevo!
invece per le dimensioni nei thumb non sono riuscito a fare nulla

#postimagediv #set-post-thumbnail img {        max-width: auto;
        height: 100%;
    }

vorrei far vedere per intero gli alberi...ma continua a prendere soltanto la parte centrale...
vedo differenze soltanto modificando

 [COLOR=#333333]// Post thumbnails    add_theme_support( 'post-thumbnails' );[/COLOR][COLOR=#333333]add_image_size( 'post-image', 1240, 9999 );[/COLOR][B]add_image_size( 'post-thumb', 508, 9999 );[/B]

se invece di 508 inserisco per es. 308 cambia soltanto la risoluzione (immagine più sgranata) ma nessuna differenza.
Ho cercato qualsiasi altro riferimento a thumb su functions.php ma non trovo nulla...forse dovrei gestire diversamente

#postimagediv #set-post-thumbnail img {
        max-width: auto;
        height: 100%;
    }

Ma non saprei proprio come fare!

Vi ringrazio comunque per il prezioso aiuto!!

Prova a guardare qui https://codex.wordpress.org/it:Riferimento_funzioni/set_post_thumbnail_size e aggiungere il "false" come parametro, probabilmente non andrà più a tagliare l'immagine e la vedrai strana (forse troppo compressa verticalmente), se funziona poi bisogna lavorare con i css per ottenere il risultato che vuoi tu.

Però considera che il crop serve per avere uniformità, togliendo quello poi devi impostare lo stesso delle dimensioni massime e un rapporto fisso per tutte le anteprime (quindi o verticali o orizzontali).

 

[daur001]

Prova a guardare qui https://codex.wordpress.org/it:Riferimento_funzioni/set_post_thumbnail_size e aggiungere il "false" come parametro, probabilmente non andrà più a tagliare l'immagine e la vedrai strana (forse troppo compressa verticalmente), se funziona poi bisogna lavorare con i css per ottenere il risultato che vuoi tu.

Però considera che il crop serve per avere uniformità, togliendo quello poi devi impostare lo stesso delle dimensioni massime e un rapporto fisso per tutte le anteprime (quindi o verticali o orizzontali).

Grazie gentilissimo, link molto utile e chiaro...purtroppo però non capisco perchè non funziona...inserita la funzione su functions.php e provato anche a vedere il file media.php su wp-include dove addirittura crop su thumb è già "false" :cav:...sbaglierò sicuramente qualcosa!

- - - Updated - - -

Risolto...non so come aveva fatto a sfuggirmi :cav:...era sul css:

background-size: cover;	background-position: center;
}

Non centra nulla ma avrei un altro problema :cry:
Vorrei impostare degli articoli in primo piano e ho visto che c'è la funzione "metti in evidenza"... il problema è che l'articolo viene sì messo tra i primi ma non viene nascosto dov'era prima...(es. articolo presente a pagina 3...appare nella prima ma pure nella terza)...ho trovato la funzione che nasconde l'articolo in evidenza dalle categorie ma nessuna che permette di nascondere l'originale e mostrare solo quello in evidenza tra tutti gli articoli.

Scusate la confusione...se non è chiaro proverò a spiegarmi meglio!