Installing WordPress on Amazon went almost without any real problems. Only issue I found was contradicting information in Amazons tutorials about ownership/rights in /var/WWW/html. One tutorial said ec2-user:apache and another apache:apache. Both works installing WordPress and probably running other applications, but the later is needed for updating and installing plugins. in WordPress I also added “define(‘FS_METHOD’, ‘direct’);” in wp-config.php. For the menu I used the plugin WP-dTree.
<h4>Coding Stylesheets:</h4>
I first used the theme twentyfifteen as a base and made following modifications, after googling and own experiments, to style.css:
* 12.1 Posts and pages
.hentry {
background-color: #D6D6D6; /* edited, the real page-color */
padding-top: 7.6923%;
position: relative;
}
.page-content {
background-color: #000; /* edited, background */
padding: 7.6923%;
}
* 12.3 Comments
.comments-area {
background-color: #A9A9A9; /* edited, background in comments */
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
padding: 7.6923%;
}
* 16.4 Desktop Small 955px
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #C0C0C0; /* edited, background color in sidebar */
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 20%; /* edited, from 29.4118% to adjust page */
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
.site {
margin: 0 auto;
max-width: 1650px; /* edited, from 1403px; */
/* background-color: #DCDCDC; */
}
.sidebar {
float: left;
margin-right: -100%;
max-width: 313px; /* edited, from 413px to decrease sidebar width */
position: relative;
width: 23.4118%; /* edited, from 29.4118% to decrease sidebar width */
}
.site-content {
display: block;
float: left;
margin-left: 13%; /* edited, from 29.4118% to decrease sidebar width */
width: 87%; /* edited, from 70.5882% to decrease sidebar width */
}
body {
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
background-color: #000000; /* edited, the background itself */
}
In the end of the file:
/**
* User defined changes
*/
.site-info {
display : none;
}
.post-navigation {
display: none;
}
.sidebar * {
font-size: 93% !important;
}
.sidebar .widget {
margin-top: 60px;
text-align:left !important;
margin-left: 1%; !important;
padding-left: 4%;
}
I also used theme twenty seventeen with following modifications:
19.0 Media Queries
/* Layout */
.wrap {
max-width: 1200px; /* edited from 1000px FL 2018 */
padding-left: 3em;
padding-right: 3em;
}
.has-sidebar:not(.error404) #primary {
float: left;
width: 78% !important; /* edited from 58 */
}
.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 20% !important; /* efited from 36 */
}
And in end of file:
/**
* User defined changes
*/
.nav-previous {
display: none;
}
.nav-next {
display: none;
}