libre service ; thème 1

04.09.2020

thème libre service 01

J'inaugure cette rubrique avec un premier thème en full CSS/HTML. Il est assez minimaliste, je suis mauvaise pour faire des thèmes avec header. C'est les résidus d'un ancien thème d'un de mes RPG qui trainaient sur un blog test.

Vous pouvez visualiser le thème dans sa totalité en cliquant ici (www)

à savoir :

> Toutes les valeurs de l'éditeur de thème doivent être décochées/à zéro.

> Les couleurs et l'image du menu sont modifiables via le code. Je peux le faire pour vous si vous le souhaitez.

> le texte du menu doit rester relativement court puisque la taille de ce dernier est fixe. À part les derniers visiteurs, tout le reste est dans le même module.

Merci de ne pas retirer le crédit présent sur le menu, de préciser quelque part que le thème est de moi et bien sûr de me prévenir en commentaire si vous l'utilisez.

> edit : merci de ne pas modifier ce thème au delà des limites que j'ai fixé plus haut, j'y ai passé du temps, ce n'est pas pour que vous piquiez dans mon code pour faire carrément autre chose, à la limite, demandez au préalable et je verrais en fonction.

CSS:

/*entête déclarative*/

@font-face {font-family: "fox"; src:  url('https://ekladata.com/H8mc56Q58KFb5qJ4juVJqwX5Tlk/SONGER-C-Regular.otf');}
@font-face {font-family: "great"; src:  url('https://ekladata.com/Bubm7ggaaIYvR0yj4XFPGqcanZk/Great-Day-Personal-Use.ttf');}

/*fonds*/

#body { background:transparent url("https://ekladata.com/-g7dOf8A-03F1rc4M-8CgDh5NY8/concrete-texture.png")center top ;
height:100%;
position:fixed;}

#background {background: #eaeaea;
  width: 800px;
  margin-top:80px;
  overflow: auto;
  height:600px;
  margin-bottom:none;
}

/*textes*/

#background a{font-family: arial;
  font-size:12px;

  text-transform:lowercase;
}
#background a:hover{font-family: arial;
  font-size:10px;
  color: #596e71;
  text-transform:uppercase;
  text-decoration: none;
}
#background {font-family: arial;
  font-size:12px;
color:#221d19;
  text-align: justify;
}
/*header*/

#header {
height:0px;}

#titre_header a {display: none;}
#slogan_header {display: none;}

/*menubar*/
.menubar_separation, #menubar_logo {
  background:#1a1a1a;
color:white;}
.menubar_section > div, .menubar_section:hover div,.menubar_section:hover > a {
  background:#1a1a1a;
color:white;}
#menubar a{background:#1a1a1a;
color: #a6c0c3;
text-transform:uppercase;
font-size: 10px;}
#menubar {background:#1a1a1a;
color: white;}

#menubar_section_content{background-image: none;}
#menubar_section_appearance{background-image: none;}
#menubar_section_interactions{background-image: none;}
#menubar_section_manage{background-image: none;}
#menubar_section_account{background-image: none;}
#menubar_notifications{background-image: none;}
#menubar_signin {background-image: none;}
#menubar_favorites {background-image: none;}
.menubar_button {background-image: none;}
#menubar_hide { position: absolute; width:0px }
.menubar_section{
  font-style: none;
color:white;}

/*infobulle*/
  #help_bubble {
  background-color: #222;
  color: #aaa;
  border: 1px solid #111;
  opacity: 0.7;
  border-radius: 2px;
  text-transform:uppercase;
}

/*boutons*/

input[type=button],input[type=submit], button {
  margin: 5px;
  margin-left: 0px;
  min-width: 50px;
  min-height: 20px;
  background-color: #788895;
  color: white;
  border: 0px;
  text-transform: lowercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 11px;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
  opacity: 0.8;
  text-transform:uppercase;
}



/*****menu1******/
#menu1 {background: #1e1e1e;
padding-left: 15px;
  padding-right: 15px;

width:200px;
margin-top:0px;
height:600px;
  position: fixed;
  overflow: none;
color:white;
}
#menu1 a:hover {color:#172528;
text-transform: uppercase;
font-weight:bold;}
#menu1 a {color:white;
text-transform: uppercase;
font-weight:bold;}

/* titre */
.module_menu_contenu {padding:15px;}
.module_menu_titre {display:none;}

/* derniers visiteurs */
.module_menu_type_lastvisitors img{
  border-radius: 100px;
  background-color: white;
  max-height: 30px;
  max-width: 30px;
  margin-bottom: 5px;
  padding: 3px;
}

#module_menu_type_lastvisitors img:hover{
  opacity: 0.7;
}


/* titre articles*/

.module_titre {
  height: 20px;
  color: white;
  text-align: center;
  padding:15px;
  font-family: arial;
  font-size: 12px;
  letter-spacing: 2px;
  word-spacing: 1px;
  border: 4px solid white;
  margin-top:30px;
  margin-right:30px;
  margin-left:30px;
  text-transform:lowercase;
  background-color: #596e71;
}

.module_titre:hover {
  height: 20px;
  color: white;
  text-align: center;
  padding:15px;
  font-family: arial;
  font-size: 12px;
  letter-spacing: 2px;
  word-spacing: 1px;
  border: 4px solid white;
  margin-top:30px;
  margin-right:30px;
  margin-left:30px;
  text-transform:lowercase;
  background-color: #596e71;
}

.module_titre_contenu a { color: white;
  text-align: center;
  font-family: arial;
  font-size: 10px;
  letter-spacing: 2px;
  word-spacing: 1px;
  text-transform:lowercase;}

.module_titre_contenu  { color: white;
  text-align: center;
  font-family: arial;
  font-size: 13px;
  letter-spacing: 2px;
  word-spacing: 1px;
  text-transform:lowercase;}

/*articles*/

.module_contenu {background: #dcdcdc;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom:30px;
  margin-top: 10px;
  padding: 15px;
color:#221d19;}

.module_contenu a {color: #596e71;}

/*infos articles*/
.article_info {display:none;}

/*commentaires*/
.commentdate {display:none;}
.commentnumber {display:none;}

.commentavatar img {
  border: 3px solid;
  border-radius: 100px;
  margin-left: 0px;
max-height: 40px;
  max-width: 40px;
}
div.commentbody {margin-top:10px;}



/*pied de page*/
#footer {
display: none;}

/*champs*/

input[type="text"] {

  padding:5px;
  color: grey;
  border: 1px solid #ccc;
  background: #f0f0f0;
  border-radius: 0px;
}

/******forums*****/

.post_table_msg {
  background-color: #F9F9F9;
  padding: 20px;
  text-align: left;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border:1px solid #ebebeb;
  witdh:50%;
  text-align:justify;
}

.post_table_head {color: #black;
  font-size: 0px;
}

.post_table_profile img{
  border: 4px solid white;
  width: 50px;
  border-radius: 50px;
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 20px;

}

.post_table_profile a{
  color: white;
  font-size: 13px;
  font-family: consolas;
  text-transform: uppercase;
  display: block;
  width: 76px;
  padding: 2px 0px 2px 0px;
  background-color: #788895;
  text-align: center;
  border-radius: 50px;
  margin-top: 20px;
  margin-left: 11px;
  text-align: center;
}

.post_table_profile a:hover{
  opacity: 0.7;
  color: white;
}

.post_table_profile {
  background-color: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;

}

#module_contenu_pageforums {text-align: justify;}

.topic_table {text-align:center;
width:100%;}

.forum-description {
  background-color: #f1f1f1;
  border: 1px solid lightgrey;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 0px;
  color: #333333
}

.block-reply {
  border-left: 3px solid #ebebeb;
}

HTML MENU:

<p style="text-transform: uppercase; font-size: 7px; text-align: center;"><span style="color: #4f4f4f;">(c) thème original de weana</span></p>
<p style="text-transform: uppercase; font-size: 7px; text-align: center;"> </p>
<p><img style="display: block; margin-left: auto; margin-right: auto; border-radius: 100px; border: 6px solid white; border-width: 6px;" src="https://ekladata.com/8ehsu8jVpYOz4bydXS0MmIWRJg0@100x100.jpg" alt="" width="100" height="100" /></p>
<p style="text-align: center;"><span style="font-size: 24pt; color: #ffffff;"><span style="font-family: 'great';">titre du blog</span></span> </p>
<p style="text-align: center;"><strong><span style="color: #788895;"><a style="color: #788895;" href="/www">LIEN</a></span> ; <span style="color: #788895;"><a style="color: #788895;" href="/www">LIEN</a></span> ; <span style="color: #788895;"><a style="color: #788895;" href="/www">LIEN</a></span></strong></p>
<p style="text-align: center;"> </p>
<div style="background-color: #333333; border: 1px solid drakgray; padding: 10px; text-align: justify;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus erat nisi, nec consectetur orci tincidunt ut. </span></div>
<p style="text-align: center;">  <br /><br /></p>
<div style="background-color: #788895; width: 100%; padding: 6px; text-align: left;"><a href="http://theme-ls-1.cd.st/accueil-c32649478">accueil</a></div>
<p style="text-align: center; line-height: 10px;"> </p>
<div style="background-color: #788895; width: 100%; padding: 6px; text-align: left;"><a href="http://theme-ls-1.cd.st/forum-forum117304">forum</a></div>
<p style="line-height: 10px;"> </p>
<div style="background-color: #788895; width: 100%; padding: 6px; text-align: left;"><a href="/url du lien">LIEN 3</a></div>
<p style="text-align: center; line-height: 10px;"> </p>
<div style="background-color: #788895; width: 100%; padding: 6px; text-align: left;"><a href="/url du lien">LIEN 4</a></div>

la bise,
Wea