Frage von Evawillswissen, 80

HTML/CSS Code ändern?

Hallo!

Ich versuche gerade meine Homepage zu verändern.

Die weiße Fläche hätte ich gerne in einem Grauton.

Nur finde ich leider den Teil vom Code nicht, der für diese Fläche zuständig ist.

Hat jemand vllt ne Ahnung, wo ich suchen müsste?

Lg Eva

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von medmonk, 37

Du musst uns das dazugehörige Markup zeigen. Dann können wir dir sicher auch sagen, welches Element du ansprechen musst. Ansonsten selber mit den Developer-Tools deines Webbrowsers herausfinden. 

LG medmonk 

Kommentar von Evawillswissen ,

Hey!

Wie funktioniert das Developer-Tool?

Also das ist der ganze Code:

/* Resets */

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

form,

body,

html,

p,

blockquote,

fieldset,

input {

  margin: 0;

  padding: 0;

}

/* Global
styles */

html {

  height: 100%;

}

body {

  width: 100%;

  height: 100%;

  background: #232323;

  color: #666666;

  font-family: 'Open Sans', sans-serif;

  font-size: 16px;

  font-weight: 300;

  line-height: 1.5em;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

a {

  color: #2a92e5;

  text-decoration: none;

}

a:hover {

  color: #2180cc;

}

a img,

a:hover img
{

  border: none;

}

h2 {

  color: #333333;

  font-family:
'Raleway', serif;

  font-size: 26px;

  font-weight: 400;

  line-height: 1.2em;

}

p {

  font-family: 'Open
Sans', sans-serif;

  font-size: 16px;

  font-weight: 300;

  line-height: 30px;

}

blockquote {

  font-family:
'Raleway', serif;

  font-size: 20px;

  font-weight: 400;

  line-height: normal;

  font-style: italic;

  text-align: center;

}

::-webkit-input-placeholder,

:-moz-placeholder,

::-moz-placeholder,

:-ms-input-placeholder {

  color: #626262;

}

input[type="text"],

input[type="email"],

textarea {

  -webkit-box-shadow:
none;

  -moz-box-shadow:
none;

  box-shadow: none;

  -webkit-appearance:
none;

  -moz-appearance:
none;

  appearance: none;

  outline: none;

  text-shadow: none;

}

textarea {

  resize: none;

}

select {

  -webkit-appearance:
none;

  -moz-appearance:
none;

  appearance: none;

  outline: none;

  text-indent: 0.01px;

  text-overflow: '';

}

input[type="radio"],

input[type="checkbox"] {

  width: 16px;

  height: 16px;

  border: 1px solid
#cccccc !important;

  -webkit-box-shadow:
none;

  -moz-box-shadow:
none;

  box-shadow: none;

  -webkit-appearance:
none;

  -moz-appearance:
none;

  appearance: none;

  outline: none;

  text-shadow: none;

}

input[type="radio"] {

  border-radius: 8px;

}

input[type="checkbox"] {

  background-color:
white;

  border-radius: 0;

}

input[type="radio"]:after {

  display: block;

  border-radius: 8px;

  box-sizing:
border-box;

  content:
"";

}

input[type="radio"]:checked:after {

  background: #cccccc;

  border: 2px solid
#fafafa;

  width: 14px;

  height: 14px;

}

input[type="checkbox"]:after
{

  position: relative;

  top: 1px;

  left: 4px;

  width: 3px;

  height: 6px;

  border: solid
#cccccc;

  border-width: 0 2px 2px 0;

  -webkit-transform:
rotate(45deg);

  -moz-transform:
rotate(45deg);

  -ms-transform:
rotate(45deg);

  -o-transform:
rotate(45deg);

  transform:
rotate(45deg);

}

input[type="checkbox"]:checked:after {

  display: block;

  content: "
";

}

.container {

  width: 960px;

  margin: 0 auto;

}

/* Editor Overrides :: DO NOT REMOVE */

#icontent .wrapper .birdseye-header .logo,

#preview-iframe .landing-page .wrapper .birdseye-header
.logo,

#icontent.landing-page .wrapper .birdseye-header .logo,

#icontent .wrapper .nav,

#preview-iframe .landing-page .wrapper .nav,

#icontent.landing-page .wrapper .nav,

#icontent .wrapper .banner-wrap .container,

#preview-iframe .landing-page .wrapper .banner-wrap
.container,

#icontent.landing-page .wrapper .banner-wrap .container {

  opacity: 1
!important;

}

/* Fade out scroll */

body.fade-on-scroll
.banner {

  opacity: 0;

}

/* Body
class for pages with banner */

body.page-has-banner
.birdseye-header {

  padding: 20px 30px;

}

body.page-has-banner
.logo img {

  max-height: 60px;

}

body.page-has-banner
.main-wrap {

  padding-top: 70px;

}

/* Fixed
Nav */

body.page-has-banner.affix
.birdseye-header,

body.splash-page.affix
.birdseye-header {

  position: fixed;

  top: 0;

  background: rgba(35, 35, 35, 0.95);

  padding: 10px 30px;

}

/* Mobile
app */

body.wsite-native-mobile-editor
.birdseye-header {

  position: absolute !important;

}

/* Header
*/

.birdseye-header
{

  position: fixed;

  z-index: 12;

  overflow-y: hidden;

  width: 100%;

  padding: 10px 30px;

  box-sizing: border-box;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  -webkit-transition: all 250ms ease;

  -moz-transition: all 250ms ease;

  -ms-transition: all 250ms ease;

  -o-transition: all 250ms ease;

  transition: all 250ms ease;

}

.birdseye-header
.container {

  display: table;

  overflow-y: hidden;

  width: 100%;

  max-height: 80px;

}

.birdseye-header
label.hamburger {

  display: none;

}

.birdseye-header
.logo {

  display: table-cell;

  overflow-y: hidden;

  margin-right: 30px;

  padding: 0;

  vertical-align: middle;

  line-height: normal;

}

.birdseye-header
.logo a {

  display: block;

  margin-right: 30px;

  margin-left: 10px;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 0.03em;

  font-family: 'Open Sans', sans-serif;

  font-size: 24px;

  font-weight: 600;

  line-height: normal;

}

Kommentar von Evawillswissen ,

...

Kommentar von Evawillswissen ,

Ich stell grad fest, ich krieg den ganzen Code hier nicht rein. Wie geht denn das mit dem Developer tool?

Kommentar von Sarkophator ,

Beim Chrome- und Firefox Browser (bei den anderen bin ich mir atm. nicht sicher) kannst du die Entwicklertools mittels der F12 Taste aktivieren. Da ist eigentlich immer ein Inspektor-Tool dabei. (Meistens einfach nur ein Icon mit einem Cursor) Damit kannst du dann einfach über die Fläche hovern und kriegst dann im DOM Viewer der Entwicklertools die entsprechende Stelle hervorgehoben. Da sollte alles nötige stehen.

Ach und Code nach Möglichkeit immer extern hochladen (bspw. auf http://pastebin.com), da ist dann auch immer der ganze Code dabei und ist auch leichter zu lesen.

Kommentar von Evawillswissen ,

Hey! Der Tipp mit dem Developer Tool hat mir echt geholfen. Konnte den Code für den Hintergrund herausfinden und die Farbe ändern. Vielen Dank!!

Kommentar von medmonk ,

Sarkophator hat es ja schon gesagt. Mit F12 die Developer-Tools aufrufen und dann das Element das bearbeitet werden soll, ausfindig machen. Mit deinen CSS so auch nichts anfangen kann. Ich schrieb ja bereits, das wir das dazugehörige Markup (HTML) sehen müssen.

LG medmonk 

Antwort
von perhp, 45

Im CSS Code natürlich. Wie dein Element heißt, wirst du schon selbst wissen müssen.

ps: wieso kopierst du eine andere Webseite, wenn du gar nicht die Sprachen beherrscht und nicht mit dem Code zurecht kommst.

Kommentar von Evawillswissen ,

Das nennt sich Weebly. Schonmal gehört? Und geholfen hast du mir jetzt auch null. Dass ich im Code suchen muss, is mir auch klar. Deswegen der Screenshot, aber ich hab nicht rausgefunden,w ie die die weiße Fläche bezeichnen.

Kommentar von perhp ,

Dann untersuch doch den Bereich mit dem Browser, dann hast du deinen Namen des Elements.

Kommentar von RakonDark ,

schön das du das jetzt so sagst , wir wissen natürlich alle wie und woher du das hast und es gibt ja auch nur eine möglichkeit bei einem Bild , zumal der Code eh unlesbar wird . Schön am nerfen biste . Wenn Du schon fragst dann vielleicht so das jemand der nicht vor deinem Problem sitzt auch was damit anfangen kann .

So jedenfalls ist eigentlich wohl KEINE ANTWORT die bessere ANTWORT .

Kommentar von medmonk ,

ps: wieso kopierst du eine andere Webseite, wenn du gar nicht die Sprachen beherrscht und nicht mit dem Code zurecht kommst.

Scheint so ein Baukasten-Rotz zu sein. ;)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten