Jag håller på och bygger denna hemsida åt en lokal vandringsförening utifrån en färdig mall som heter Mesmerize, något jag gör pro bono för en vän eftersom jag brukade pyssla en del med hemsidor som hobby för en massa år sen. Jag känner mig ganska bekväm med det grafiska och så, men jag är väldigt rostig när det gäller koder och senast jag redigerade en hemsida i Wordpress så var det enkel CSS och HTML som gällde, men nu är det PHP och där har jag sämre koll.
Som ni kan se på slidern under menyn, eller "Front Page Hero" som de benämner det som i redigeraren, så är det en bakgrundsbild på ett par vandrare och en text till vänster om dem. Mitt bekymmer är att jag skulle behöva flytta texten mer åt vänster så den hamnar mittimellan vänsterkanten på bilden och den första vandraren.
Mallen använder en anpassad redigerare där man kan välja om texten i slidern ska vara åt vänster, i mitten eller åt höger i en enkel rullningslista där man klickar på det alternativ man vill ha. Men vad ska jag leta efter i koden om jag vill flytta den mer åt vänster än vad mallens grundinställningar låter en göra?
Här har jag lagt upp hela koden i style.css i enkelt textformat: http://vandringsleden.nu/kod
Men är det där man ska leta efter koden att redigera eller är det någon annanstans i temats filer än style.css?
För det enda jag hittar i koden som innehåller "hero" är följande:
Under /* Header */ ligger detta:
h1.hero-title {
color: #FFFFFF;
margin-bottom: 1.25rem;
font-size: 3.5rem;
font-weight: 300;
line-height: 1.14;
letter-spacing: 0.9px;
}
och detta:
@media (min-width: 768px) {
.header-content .align-holder {
margin: auto;
}
.header-content .align-holder.right {
text-align: right;
float: right;
margin-right: 0;
}
.header-content .align-holder.left {
text-align: left;
float: left;
margin-left: 0;
}
.header-content .align-holder.center {
text-align: center;
float: none;
}
.header-hero-media-v-align,
.header-hero-content-v-align {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
Det här är temats alla filer: