CSS-Anpassungen bei jimdo

Mit dem veränderten Layout der Website gehen CSS Modifikationen des jimdo Layouts einher. 

Screenshot judithandresen.com, Stand: 06.12.2013
Screenshot judithandresen.com, Stand: 06.12.2013

Die Modifikationen werden bei jimdo im Admin-Bereich unter Einstellungen / Head vorgenommen. Die auf diesen Seiten eingesetzte Footernavigation stammt von Fiedler EDV Dienstleistungen. Der dafür notwendige CSS-Code ist hier nicht dokumentiert.  

Die Modifikationen des mobile view und der Printversion bestehen unverändert weiter.

 

<style type="text/css">

/*<![CDATA[*/

 

/** ALLGEMEINE DEKLARATIONEN **/

body, p, table, td, h1 {

 color: #333333;

}

div#cc-tp-main{

 margin: 0;

}

 

div#cc-tp-header {

 background-color: white!important;

 border-bottom: 3px solid #F1C631;

 background-image: none!important;

 padding-bottom: 0px!important;

}

div#cc-tp-footer{

 background-color: white!important;

 border-top: 1px solid #F1C631;

 background-image: none!important;

 padding: 0px!important;

}

 

/** BlOG **/ 

div.blogselection a, .post a {

 color: #D66933!important;

 text-decoration: none!important;

}

 

/** ÜBERSCHRIFTEN **/

h1, h1 > a, h1 a {

 text-transform: uppercase;

 margin-top: 0px!important;

 padding-top: 0px!important;

 padding-right: 15px!important;

 margin-bottom: 10px!important;

 font-weight: normal!important;

 text-decoration: none!important;

}

h2 {

 text-transform: uppercase;

 font-weight: normal!important;

 margin-bottom: 0px!important;

 margin-top: 10px!important;

 padding-top: 10px!important;

}

h3 {

 text-transform: uppercase;

 font-weight: normal!important;

 margin-top: 10px!important;

 margin-bottom: 0px!important;

}

 

/** TEXTFORMATIERUNGEN **/

/** TF: SUB, SUP **/

sub, sup { 

 font-size: 50%!important; 

}

/** TF: UNNUMMERIERTE LISTE MIT UNTERSTRICH **/

ul li {

 list-style-image:url("http://u.jimdo.com/www12/o/sd4f720d6f8b65129/img/i1956c93d2c570721/1344693998/std/image.png");

 margin-left: 0px!important;

}

 

/** TF: VCF-DATEI AUSBLENDEN **/ 

div.leftDownload, div.rightDownload, div.j-downloadDocument{

 width: 0px !important;

 display: none!important;

}

 

/** TF: UNTERSTRICH ÜBERALL WOANDERS AUSBAUEN **/

ul.mainNav1 li:before, ul.mainNav2 li:before, ul.mainNav3 li:before, ul.com-list li:before, ul.com-list-noava li.before, ul.sitemap li:before, div.cc-m-twitter ul li:before {

 display:none;

 list-style-image: none;

}

 

/** TF: SITEMAP **/

ul.sitemap li a {

 background: url("http://u.jimdo.com/www12/o/sd4f720d6f8b65129/img/i6bd71a4c7417df86/1342425968/std/image.png") no-repeat scroll left top;

 font-weight: normal !important;   

 text-decoration: none!important; 

 background-position: -0.9em;

}

 

 

/** NAVIGATION **/

ul.mainNav1 li a.current, ul.mainNav1 li a.parent, ul.mainNav1 li a:hover, ul.mainNav1 li a.current:hover, ul.mainNav1 li a.parent:hover {

 background: #F1C631;

 padding: 4px!important;

 -moz-border-radius: 0px!important;

 -webkit-border-radius: 0px!important;

 border-radius: 0px!important;

 color: white!important;

 font-style:normal!important;

}

ul.mainNav1 li a {

 color: #D66933 !important;

     font-style:normal!important;

}

ul.mainNav1 li a, ul.mainNav1 li a:link, ul.mainNav1 li a:active, ul.mainNav1 li a:visited {

 text-transform: uppercase;

 padding: 4px!important;

 font-style:normal!important;

}

ul.mainNav2 li a, ul.mainNav2 li a:link, ul.mainNav2 li a:active, ul.mainNav2 li a:hover, ul.mainNav2 li a:visited {

 color: #D66933 !important;    

 display: block;

 padding: 10px 0px 10px 0px!important;

 text-decoration: none!important;

 line-height: 100%;

 text-transform: uppercase;

 font-style:normal!important;

 border-bottom: 1px solid white!important;

}

ul.mainNav3 li a, ul.mainNav3 li a:link, ul.mainNav3 li a:active, ul.mainNav3 li a:hover, ul.mainNav3 li a:visited {

 color: #D66933 !important;    

 display: block;

 padding: 10px 0px 10px 20px!important;

 text-decoration: none!important;

 line-height: 100%;

 text-transform: uppercase;

 font-style:normal!important;

 border-bottom: 1px solid white!important;

}

 

/** JANOSCH007 **/ 

/** J007: SITEMAP **/

ul.sitemap li a { 

 background: url("http://u.jimdo.com/www12/o/sd4f720d6f8b65129/img/ide115b6f32a3ec8f/1341604115/std/image.png") no-repeat scroll left center transparent !important; 

 font-weight: normal !important;    

 text-decoration: none!important; 

}

/** J007: TEASER STARTSEITE **/

div.start_janosch007 {

 margin-left: 50px;

 margin-right: 50px;

 margin-bottom: 50px;

}

/** J007: ROTER KASTEN **/

p.RoterKasten_janosch007 {

 padding: 10px;

 margin-left: 0px;

 margin-right: 0px;

 margin-top: 10px;

 margin-bottom: 10px;

 border-top: 1px #F1C631 solid;

 border-bottom: 1px #F1C631 solid;

 border-right: 0px;

 border-left: 0px;

 text-align: center;

 background-color: #f6dc83;

}

div.RoterKasten_janosch007 {

 padding: 10px;

 margin-left: 0px;

 margin-right: 10px;

 margin-top: 10px;

 margin-bottom: 10px;

 border-top: 1px #F1C631 solid;

 border-bottom: 1px #F1C631 solid;

 border-right: 0px;

 border-left: 0px;

 text-align: left;

 background-color: #f6dc83;

}

 

div.ad02_janosch007 {

 background-color: white;

 padding-top: 5px;

 padding-bottom: 5px;

 padding-left: 0px;

 padding-right: 0px;

 color: #333333;

}

p.ad01_janosch007 {

 margin-left: 0px;

 margin-right: 0px;

 margin-top: 10px;

 margin-bottom: 10px;

 border-top: 1px #f6dc83 solid;

 border-bottom: 1px #f6dc83 solid;

 border-right: 0px;

 border-left: 0px;

 text-align: justify;

 background-color: white;

 font-size: 80%;

 font-style: italic;

 color: #333333;

 padding-bottom: 5px;

 padding-top: 5px;

 

}

 

/** J007: ZITATE **/

blockquote {

 background: none;

 padding: 5px;

 margin-left: 20px;

 margin-right: 20px;

 margin-top: 5px;

 margin-bottom: 5px;

 border-bottom: 1px #f6dc83 solid;

 border-top: 1px #f6dc83 solid;

 border-left: 1px #f6dc83 solid;

 border-right: 1px #f6dc83 solid;

 font-style: italic;

 text-align: center;

}

 

 

/** J007: BILD-UNTERSCHRIFTEN **/

.captionwithpadding, .caption {

 padding: 0px !important;

 font-size: 70% !important;

 text-transform: uppercase;

}

 

/** TABELLE .janosch007 **/

table.janosch007 {

 border-collapse: collapse;

}

th.janosch007, td.janosch007 {

 background-color: white;

 padding: 5px;

 border-collapse: collapse;

 border: #F1C631 1px solid;

 margin: 0!important;

}

 

 

/** TWITTER-BOX **/

div.cc-m-twitter ul li {

 list-style: none;

 background-image: url("http://u.jimdo.com/www12/o/sd4f720d6f8b65129/img/i41fdb889cbe08f16/1341604116/std/image.png");

 background-size: 16px;

 color: #333333!important;

 text-align: left;

 background-color: white;

 font-size: 80%;

 font-style: italic;

 line-height: 15px!important;

}

div.cc-m-twitter {

 padding-right: 0px!important;

}

 

 

/** Listenkorrektur weiter in <ul> **/

 

 

/** CONTENT-MODUL **/

div#cc-tp-content .cc-tp-gutter {

 padding-left: 0px!important;

 padding-right: 40px!important;

 padding-top: 60px!important;

}

 

 

/** SEITENINHALTE **/

#newsRahmen {

 display: none !important;

}

.clearover, .cc-clearover {

 margin-right: 0px !important;

 padding-right: 0px !important;

 padding-top: 0px !important;

}

div.n, div.flexmodul {

 padding-left: 0px !important;

 padding-right: 0px !important;

 padding-top: 0px !important;

 padding-bottom: 10px !important;

 margin-right: 0px !important;

}

 

 

/** SEITENORIENTIERUNG: NAV. RECHTS, CONTENT LINKS **/

div#cc-tp-content {

 float:left!important;

}

div#cc-tp-sidebar {

 float:right!important;

}

 

 

/** EMOTION-HEADER ÜBERHÄNGEND **/

div#emotion-header {

 top: -30px !important;

}

 

/** FORMULARE **/

input[type="submit"], div#loginbox input#senden {

 text-shadow: none!important;  

 border-radius: 0px !important;

 font-weight: normal!important;

}

div.n > h2 {

 color: #333333 !important;

}

.skiptoform , skiptoform a, a.skiptoform{

 padding: 2px !important;

 background-color: #eeeeee !important;

 color: white !important;

}

input, input.single, textarea {

 border: 1px solid #eeeeee !important;

 box-shadow: 0 0 0 !important;

 border-radius: 0px !important;

}

ul.com-list .number, ul.com-list-noava .number, .mandFields-label, div.required, ul.com-list-noava li{

 color: #eeeeee !important;

}

ul.com-list li, ul.com-list-noava li, li.commentstd {

 border-top: 1px solid #eeeeee !important;

 padding-top: 10px!important;

}

ul.com-list div.com-avatar, ul.com-list-noava div.com-avatar {

 margin-left: 0px!important;

 margin-top: 0px!important;

}

.cc-m-form-layout-1 .cc-m-form-view-label {

 font-weight: normal !important;

}

.cc-m-form-note {

 background: none!important;

 border-top: 1px dotted #eeeeee !important;

 margin-top: 10px;

 padding-top: 10px !important;

 padding-bottom: 0px !important;

 padding-left: 0px !important;

 padding-right: 0px !important;

}

div.captcha {

 background: none !important;

 border: 1px solid #29a040 !important;

 padding: 10px;

 width: 200px;

}

span.character {

 border: 1px solid #eeeeee !important;

}

 

 

 

/** BLOG **/

div.cc-m-twitter ul li:before {

 margin-left: 0px!important;

 padding-left: 0px!important;

 

}

 

a.blogreadmore {

 color: #40509e!important;

 font-style: italic;

 text-decoration: none;

}

div.blogselection h1 a {

 text-decoration: none;

 font-style: normal;

 color: #D66933 !important;

}

span.comment > a {

 text-decoration: none;

 font-style: normal;

 color: #D66933!important;

}

span.comment {

 background: url('http://u.jimdo.com/www12/o/sd4f720d6f8b65129/img/i38524c56472ad41a/1341748928/std/image.png') no-repeat 6px center!important;

}

h1.rssFeed {

 display: none;

}

div.datetime > h1 {

 color: #D66933 !important;

}

div.datetime.dt-style6 p.day, div.datetime.dt-style6 p.mon, div.datetime.dt-style6 p.yr{

 font-size: 11px !important;

 background-color: #eeeeee!important;

}

div.datetime.dt-style6.dt-alignment-left .datetime-inner, div.datetime.dt-style6.dt-alignment-right .datetime-inner{

 border-radius: 0px !important;

 background-color: #eeeeee!important;

}

div.datetime.dt-style6 {

 margin: 40px 0 0 0!important;

 border-top: 1px solid #eeeeee!important;

 border-bottom: 0px solid white!important;

 

}

h1.post-title, p.postmeta {

 color: #D66933!important;

 padding-top: 50px!important;

 margin-top: 10px!important;

}

p.postmeta {

 display: none;

}

p.skiptoform {

 display: none!important;

}

p.skiptoform > h2 {

 font-size: 100%!important;

}

div.com-meta a, p.com-meta a {

 color: #29a040 !important;

 font-weight: normal!important;

}

div.blogselection > div.n {

 background-color: white !important;

 margin-top: 0px!important;   

 padding-bottom: 0px!important;

 padding-top: 0px!important;

 padding-right: 0px!important;

 margin-right: 0px !important;

}

div.datetime {

 background: none !important;

}

div.topbar h1 {

 padding: 10px 0 0 20px !important;

}

h1#post-xxx a{

 font-style: normal;

 padding-left: 0px !important;

 color: #333333!important;

 margin-bottom: 20px!important;

}

.post a {

 color: #40509E!important;

}

div.blogselection div.clearover {

 border-bottom-color: white!important;

 border-bottom-style: solid;

 border-bottom-width: 0px!important;

}

 

 

/**GOOGLE DEFINIERTE SUCHE **/

/** GOOGLE SUCHE EINGABE **/

input.gsc-input {

 border-color: white!important;

 background-image: none!important;

 font-size: 12pt!important;

 color: #333333!important;

 font-weight: normal !important;

 border-radius: 0px !important;

 -moz-border-radius: 0px !important;

 -webkit-border-radius: 0px !important;

}

input.gsc-search-button {

 border-color: #d66933!important;

 background-color: #d66933!important;

 font-weight:normal!important;

 font-style:italic!important;

}

td.gsc-input, td.gsc-search-button,td.gsc-clear-button  {

 border-top: 1px solid #F1C631!important;

 border-bottom: 1px solid #F1C631!important;

}

 

/** GOOGLE SUCHE AUSGABE **/

.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {

 padding: 5px !important;

 margin: 0px !important;

 border: 1px solid #f1c631!important;

 background-color: #f1c631!important;

}

.cse .gsc-control-cse, .gsc-control-cse {

 padding-bottom: 0!important;

 padding-left: 0!important;

 padding-right: 0!important;

 padding-top: 0!important;

}

.gsc-above-wrapper-area {

 border-bottom-color: #f1c631!important;

 border-top-color: #f1c631!important;

}

.gsc-control-cse {

 font-family: "Open Sans","Trebuchet MS",Verdana,sans-serif!important;

 border-color: #FFFFFF!important;

 background-color: #FFFFFF!important;

}

.gsc-control-cse .gsc-table-result {

 font-family: "Open Sans","Trebuchet MS",Verdana,sans-serif!important;

}

input.gsc-input {

 border-color: white!important;

}

input.gsc-search-button {

 border-color: #d66933!important;

 background-color: #d66933!important;

}

.gsc-tabHeader.gsc-tabhInactive {

 border-color: #f1c631!important;

 background-color: #ffffff;

}

.gsc-tabHeader.gsc-tabhActive {

 border-color: #40509e!important;

 background-color: #40509e!important;

}

.gsc-tabsArea {

 border-color: #40509e!important;

}

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {

 border-color: white!important;

 background-color: #FFFFFF!important;

}

.gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {

 border-color: white!important;

 background-color: #FFFFFF!important;

}

.gsc-webResult.gsc-result.gsc-promotion:hover {

 border-color: white!important;

 background-color: #FFFFFF!important;

}

.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b,.gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {

 color: #40509e!important;

}

.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b,.gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {

 color: #d66933!important;

}

.gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {

 color: #d66933!important;

}

.gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {

 color: #d66933!important;

}

.gsc-cursor-page {

 color: #40509e;

}

a.gsc-trailing-more-results:link {

  color: #40509e!important;

}

.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {

 color: #333333!important;

}

.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {

 color: #40509e!important;

}

.gs-webResult div.gs-visibleUrl-short, .gs-webResult div.gs-visibleUrl-long { 

 display: none!important;

}

.gs-webResult div.gs-visibleUrl-long, .gs-promotion div.gs-visibleUrl-long {

  display: none!important;

}

.gs-promotion div.gs-visibleUrl-long {

 display: none!important;

}

.gsc-cursor-box {

 border-color: #f1c631!important;

}

.gsc-results .gsc-cursor-box .gsc-cursor-page {

 border-color: #f1c631!important;

 background-color: #FFFFFF!important;

 color: #40509e!important;

}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {

 border-color: #40509e!important;

 background-color: #40509e!important;

 color: white!important;

}

.gsc-webResult.gsc-result.gsc-promotion {

 border-color: #f1c631!important;

 background-color: #f1c631!important;

}

.gsc-completion-title {

 color: #40509e!important;

}

.gsc-completion-snippet {

 color: #333333!important;

}

.gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link {

 color: #40509e!important;

}

.gs-promotion a.gs-title:visited, .gs-promotion a.gs-title:visited *, .gs-promotion .gs-snippet a:visited {

 color: #d66933!important;

}

.gs-promotion a.gs-title:hover, .gs-promotion a.gs-title:hover *, .gs-promotion .gs-snippet a:hover {

 color: #d66933!important;

}

.gs-promotion a.gs-title:active, .gs-promotion a.gs-title:active *, .gs-promotion .gs-snippet a:active {

 color: #d66933!important;

}

.gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right *  {

 color: #333333!important;

}

.gsc-result-info {

 color: #333333!important;

 font-size: 15px!important;

 padding-left: 0px!important;

}

.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result, .gsc-imageResult-classic, .gsc-imageResult-column {

 border-bottom-color: -moz-use-text-color;

 padding-left: 0!important;

}

 

/** PRINT STYLES **/

@media print {

body div#content_area h3{font:bold 12pt/150% "Open Sans","Trebuchet MS",Verdana,sans-serif!important !important}

body div#content_area h2{font:bold 16pt/150% "Open Sans","Trebuchet MS",Verdana,sans-serif!important;margin:30pt 0 0 0 !important}

body div#content_area h1{font:bold 22pt/150% "Open Sans","Trebuchet MS",Verdana,sans-serif!important;margin:30pt 0 0 0 !important}

body div#content_area div.blogselection h1 {font:bold 16pt/150% "Open Sans","Trebuchet MS",Verdana,sans-serif!important;margin:30pt 0 0 0 !important}

body div#content_area p, body div#content_area li, body div#content_area td, body div#content_area div, body div#content_area input, body div#content_area select{font:normal 12pt/18pt "Open Sans","Trebuchet MS",Verdana,sans-serif !important}

}

 

/** SHOP **/

a.cc-shop-addtocard, 

a.cc-shop-addtocard:link, 

a.cc-shop-addtocard:visited, 

a.cc-sidecart-checkout, 

a.cc-sidecart-checkout:visited, 

input.cc-checkout-btn {

 color: white!important;

 background-image: none!important;

 -moz-border-radius: 0px!important;

 -webkit-border-radius: 0px!important;

 border-radius: 0px!important;

 -moz-box-shadow: 0 0px 0px rgba(0,0,0,0.5)!important;

 text-shadow: none!important;  

 box-shadow: 0 0 0 !important;

}

ul li.cc-shop-product-pool {

 margin-left: 0px!important;

}

 

/*]]>*/

</style>


Dieser Blog-Post ist ein privater Eintrag von Judith Andresen.


 

 

 

Kommentar schreiben

Kommentare: 4
  • #1

    Michi (Sonntag, 08 Dezember 2013 15:47)

    Hallo Judith,

    viel CSS-Code ist auf https://gist.github.com/ besser aufgehoben (:

    Viele Grüße

    Michi

  • #2

    Judith Andresen (Sonntag, 08 Dezember 2013 17:02)

    Hi Michi,

    wenn ein Großteil der Leute, die sich für "meine" CSS-Anpassungen Entwickler oder Entwicklerinnen wären, würde ich Dir zustimmen und die CSS für die Website, den mobile view und die Druckversion auf github schieben.

    Aus den Rückfragen, die ich in Kommentaren oder direkt per E-Mail erhalte, muss ich aber schließen, dass die Leute, die sich für Änderungen interessieren eher technische Laien sind. Für diese dokumentiere ich hier meine Änderungen direkt zum Nachlesen. Das ist dann weniger Hürde.

    Judith

  • #3

    f (Freitag, 19 Dezember 2014 21:34)

    Hallo Judith,

    leider bin auch einer dieser Laien... habe mich trotz dessen ein wenig selbst versucht und bin knapp vor dem Ziel gescheitert. Ich will auf meiner Jimdoseite den Logobereich vergrößern. Ich habe im Chromebrowser auf weitere Tools und dann Entwicklertools schon das passende gefunden. Den Bereich habe ich auch erfolgreich vergrößert, nur leider speichert die Seite die Änderung nicht und kaum wird die Seite neu geladen ist es wieder wie zuvor.
    Was muss ich tun? Gibt es einen "besseren" Weg?

    Vielen Dank und viele Grüße!

    Max

  • #4

    Judith Andresen (Freitag, 19 Dezember 2014 21:50)

    Hallo Max,

    übernimmst Du Deine Änderungen auch in den Head-Bereich von jimdo? Lokale Änderungen können nicht funktionieren. Die CSS-Anpassungen müssen in Einstellungen / Head im Adminbereich Deiner Site erfolgen.

    Wenn Du dies bereits tust, verstehe ich Deine Frage nicht. Dann wende Dich bitte an den Support von jimdo.

    Judith