WP 007 – Home page personalizzata

Appunti relativi alla mia prima installazione di WordPress. Le seguenti indicazioni sono visualizzabili su questo sito per esclusivo uso personale. Il sottoscritto non si ritiene responsabile di problemi derivanti dall'utilizzo di tali indicazioni. P.S. - Alcuni contenuti potrebbero risultare obsoleti.

Torna all’elenco WordPress

La home page è la pagina Appunti realizzata inserendo direttamente l’html al suo interno. Il css di riferimento si trova all’interno della cartella del tema child: style_homepage.css.

/* ------------------------------------------------------------
	MODIFICHE - Background e H1
--------------------------------------------------------------*/
.container{
    background:#21384D url(https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/pattern.png) repeat top left;
    border: 0px;  /*Impostato in quello principale border: 5px solid #6D99BE; */
}

#maincontent { 
    background:#21384D url(https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/pattern.png) repeat top left;
}

#maincontent h1{ 
    color:white;
    text-align: left;
    padding-bottom:10px;
}



/* ------------------------------------------------------------
	HOVER SUGLI ELEMENTI DEL MENU
--------------------------------------------------------------*/
div.HOVERview {
   width: 180px;
   height: 120px;
   margin: 5px;
   float: left;
   border: 3px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
}

.HOVERview .mask,.HOVERview .content {
   width: 180px;
   height: 120px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.HOVERview img {
   display: block;
   position: relative;
}
/* titolo */
.HOVERview h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 14px;
	font-weight: bold;
   padding: 3px;
   background: rgba(0, 0, 0, 0.8);
   margin: 3px 0 0 0;
}

/* corsivo */
.HOVERview p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 16px;
   position: relative;
   color: #fff;
   padding: 3px 3px 3px;
   text-align: center;
}

/* button link */
.HOVERview span.linkbutton {
   display: inline-block;
   text-decoration: none;
   padding: 3px 14px;
   background: #FF6600;
	font-size: 12px;
   color: #ffffff;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.HOVERview span.linkbutton: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

/* ----SPECIFICO ------- */
.HoverSPEview img {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
   -moz-transition: all 0.4s ease-in-out 0.5s;
   -o-transition: all 0.4s ease-in-out 0.5s;
   -ms-transition: all 0.4s ease-in-out 0.5s;
   transition: all 0.4s ease-in-out 0.5s;
}
.HoverSPEview .mask {
   background-color: rgba(146,96,91,0.5);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-in 0.4s;
   -moz-transition: all 0.3s ease-in 0.4s;
   -o-transition: all 0.3s ease-in 0.4s;
   -ms-transition: all 0.3s ease-in 0.4s;
   transition: all 0.3s ease-in 0.4s;
}

.HoverSPEview p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}

.HoverSPEview span.linkbutton {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.HoverSPEview:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.HoverSPEview:hover img {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}

.HoverSPEview:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.HoverSPEview:hover span.linkbutton {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
   background:#FF6600;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

/* ------------------------------------------------------------

MODIFICHE - Background e H1

--------------------------------------------------------------*/

.container{

background:#21384D url(https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/pattern.png) repeat top left;

border: 0px; /*Impostato in quello principale border: 5px solid #6D99BE; */

}

#maincontent {

background:#21384D url(https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/pattern.png) repeat top left;

}

#maincontent h1{

color:white;

text-align: left;

padding-bottom:10px;

}

/* ------------------------------------------------------------

HOVER SUGLI ELEMENTI DEL MENU

--------------------------------------------------------------*/

div.HOVERview {

width: 180px;

height: 120px;

margin: 5px;

float: left;

border: 3px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

-webkit-box-shadow: 1px 1px 2px #e6e6e6;

-moz-box-shadow: 1px 1px 2px #e6e6e6;

box-shadow: 1px 1px 2px #e6e6e6;

cursor: default;

}

.HOVERview .mask,.HOVERview .content {

width: 180px;

height: 120px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.HOVERview img {

display: block;

position: relative;

}

/* titolo */

.HOVERview h2 {

text-transform: uppercase;

color: #fff;

text-align: center;

position: relative;

font-size: 14px;

font-weight: bold;

padding: 3px;

background: rgba(0, 0, 0, 0.8);

margin: 3px 0 0 0;

}

/* corsivo */

.HOVERview p {

font-family: Georgia, serif;

font-style: italic;

font-size: 16px;

position: relative;

color: #fff;

padding: 3px 3px 3px;

text-align: center;

}

/* button link */

.HOVERview span.linkbutton {

display: inline-block;

text-decoration: none;

padding: 3px 14px;

background: #FF6600;

font-size: 12px;

color: #ffffff;

-webkit-box-shadow: 0 0 1px #000;

-moz-box-shadow: 0 0 1px #000;

box-shadow: 0 0 1px #000;

}

.HOVERview span.linkbutton: hover {

-webkit-box-shadow: 0 0 5px #000;

-moz-box-shadow: 0 0 5px #000;

box-shadow: 0 0 5px #000;

}

/* ----SPECIFICO ------- */

.HoverSPEview img {

-webkit-transition: all 0.4s ease-in-out 0.5s;

-moz-transition: all 0.4s ease-in-out 0.5s;

-o-transition: all 0.4s ease-in-out 0.5s;

-ms-transition: all 0.4s ease-in-out 0.5s;

transition: all 0.4s ease-in-out 0.5s;

}

.HoverSPEview .mask {

background-color: rgba(146,96,91,0.5);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.3s ease-in 0.4s;

-moz-transition: all 0.3s ease-in 0.4s;

-o-transition: all 0.3s ease-in 0.4s;

-ms-transition: all 0.3s ease-in 0.4s;

transition: all 0.3s ease-in 0.4s;

}

.HoverSPEview p {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(10);

-moz-transform: scale(10);

-o-transform: scale(10);

-ms-transform: scale(10);

transform: scale(10);

-webkit-transition: all 0.3s ease-in-out 0.2s;

-moz-transition: all 0.3s ease-in-out 0.2s;

-o-transition: all 0.3s ease-in-out 0.2s;

-ms-transition: all 0.3s ease-in-out 0.2s;

transition: all 0.3s ease-in-out 0.2s;

}

.HoverSPEview span.linkbutton {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: translateY(100px);

-moz-transform: translateY(100px);

-o-transform: translateY(100px);

-ms-transform: translateY(100px);

transform: translateY(100px);

-webkit-transition: all 0.3s ease-in-out 0.1s;

-moz-transition: all 0.3s ease-in-out 0.1s;

-o-transition: all 0.3s ease-in-out 0.1s;

-ms-transition: all 0.3s ease-in-out 0.1s;

transition: all 0.3s ease-in-out 0.1s;

}

.HoverSPEview:hover .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-o-transition-delay: 0s;

-ms-transition-delay: 0s;

transition-delay: 0s;

}

.HoverSPEview:hover img {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-o-transition-delay: 0s;

-ms-transition-delay: 0s;

transition-delay: 0s;

}

.HoverSPEview:hover p {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

-o-transition-delay: 0.2s;

-ms-transition-delay: 0.2s;

transition-delay: 0.2s;

}

.HoverSPEview:hover span.linkbutton {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-webkit-transition-delay: 0.3s;

-moz-transition-delay: 0.3s;

-o-transition-delay: 0.3s;

-ms-transition-delay: 0.3s;

transition-delay: 0.3s;

background:#FF6600;

}

Nota: un’altra pagina ha lo stesso lo stesso stile, la pagina Personali, ed è possibile che in futuro ne vengano costruite altre. La categoria di questo tipo di pagine è Home Page Style.

L’html inserito all’interno di questo tipo di pagine ha un richiamo al css relativo ed una serie di elementi (elementi di un menu personalizzato). Di seguito un frammento di codice.

<link rel="stylesheet" type="text/css" href="https://vitocafazzo.it/site_Wp/wp-content/themes/digital-agency-lite-child/style_homepage.css">	

<!– Esempio: richiamo di una pagina interna al sito –> 
<div class="HOVERview HoverSPEview">
	<img src="https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/APP_Mat_classi_1.jpg"/>
	<div class="mask">
		<h2> Appunti</h2>
		<p> Matematica</p>
		<a href="https://vitocafazzo.it/site_Wp/classi-prime/">
			<span class="linkbutton"> Classe 1a IPIA </span>	
		</a>
	</div>
</div>


<!– Esempio: richiamo di una pagina esterna al sito (Nuova scheda) –> 
<div class="HOVERview HoverSPEview">
	<img src="https://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/PER_TabTeca.jpg">
	<div class="mask">
		<h2> Personale</h2>
		<p> Database tablature</p>
		<a href="https://www.vitocafazzo.it/tabtecaPSW/tabteca.php" target="_blank" rel="noopener noreferrer">
			<span class="linkbutton"> Tab.Teca </span>	
		</a>
	</div>
</div>

<!– Esempio: richiamo di una pagina interna al sito –>

<h2> Appunti</h2>

<p> Matematica</p>

<span class="linkbutton"> Classe 1a IPIA </span>

</a>

</div>

<!– Esempio: richiamo di una pagina esterna al sito (Nuova scheda) –>

<h2> Personale</h2>

<p> Database tablature</p>

</a>

</div>