RESPO Theme anpassen - wie?

ntropy

Liebes Forum,

ich möchte meinen Blog gerne mit dem RESPO-Theme relaunchen. Da ich kaum Design-Kenntnisse habe, muss ich mit einem Theme Vorlieb nehmen, würde dies jedoch gerne meinen Wünschen entsprechend verändern. Mein Blog gibts hier.

Dies hatte ich auch bei meinem jetzigen Theme getan, doch wie ich jetzt feststellte, lässt sich das schwer übertragen, da sich das Style.css komplett vom RESPO-Theme unterscheiden.

Leider ist es jedoch so, dass sich, sobald ich es aktiviere, die Webseite nicht mal annähernd so aufgebaut ist wie die Default-Einstellungen glauben machen. Es sind weder Bilder noch die Kategorien auf der rechten Seite zu sehen.

Ich würde das Theme gerne verwenden, da es jedoch diese Funktionen (zumindest auf dem Bild) hat, also erstmal oben die Hauptartikel , darunter die älteren Artikel kleiner und rechts nochmal beliebte Artikel oder nach Datum sortierte Artikel anzeigt.

Ich würde dies gerne zunächst mal so einstellen und dann weiter herumprobieren. Doch ich weiß noch nicht mal, wie ich das Stylesheet annähernd so gestalten kann.

Kann mir jemand helfen?

Schonmal vielen Dank im Voraus.

Hier die Hälfte des Style-Sheets bis #navigation {

HTML

/*  
Theme Name: Respo Theme
Description: Responsive WordPress theme
Theme URI: http://themnific.com/
Author: Dannci & Themnific
Author URI: http://themnific.com/
version: 1.0
Tags:
License: GNU/GPL Version 2 or later. 
License URI: http://www.gnu.org/licenses/gpl.html 
Copyright: (c) 2009 Dannci & Themnific.
 
*/




/* CSS Resets */


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}


ol, ul { list-style: none; margin:0; }


a,a:hover{ text-decoration:none;}




 /* @font-faces
********************************************************************************************
********************************************************************************************/
@font-face {
    font-family: 'CartoGothicStdBook';
    src: url('fonts/CartoGothicStd-Book-webfont.eot');
    src: url('fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
    url('fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
    url('fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
    font-weight: normal;
    font-style: normal; }
 
@font-face {
    font-family: 'CartoGothicStdItalic';
    src: url('fonts/CartoGothicStd-Italic-webfont.eot');
    src: url('fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
    url('fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
    url('fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
    font-weight: normal;
    font-style: normal; }
 
@font-face {
    font-family: 'CartoGothicStdBold';
    src: url('fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
    url('fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
    url('fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
    font-weight: normal;
    font-style: normal; }
 
@font-face {
    font-family: 'CartoGothicStdBoldItalic';
    src: url('fonts/CartoGothicStd-BoldItalic-webfont.eot');
    src: url('fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
    url('fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
    url('fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal; }
 
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/league_gothic-webfont.eot');
    src: url('fonts/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/league_gothic-webfont.woff') format('woff'),
    url('fonts/league_gothic-webfont.ttf') format('truetype'),
    url('fonts/league_gothic-webfont.svg#webfontOTINA1xY') format('svg');
    font-weight: normal;
    font-style: normal; }
 
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?iefix') format('eot'),
    url('fonts/BebasNeue-webfont.woff') format('woff'),
    url('fonts/BebasNeue-webfont.ttf') format('truetype'),
    url('fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
    font-weight: normal;
    font-style: normal; }
    
@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/Chunkfive-webfont.eot');
    src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Chunkfive-webfont.woff') format('woff'),
         url('fonts/Chunkfive-webfont.ttf') format('truetype'),
         url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'FavaBlack';
    src: url('fonts/fava-black-webfont.eot');
    src: url('fonts/fava-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fava-black-webfont.woff') format('woff'),
         url('fonts/fava-black-webfont.ttf') format('truetype'),
         url('fonts/fava-black-webfont.svg#FavaBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'KeytinRegular';
    src: url('fonts/keytin-light-webfont.eot');
    src: url('fonts/keytin-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/keytin-light-webfont.woff') format('woff'),
         url('fonts/keytin-light-webfont.ttf') format('truetype'),
         url('fonts/keytin-light-webfont.svg#KeytinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* @core
********************************************************************************************
********************************************************************************************/






#core .row{padding:20px 0 0 0;}




#sidebar {
    background: url(images/edge-shadows-small-v.png) left repeat-y;
    padding:0 0 0 40px}
    
#tagline{
    border-top: 1px solid #ccc;
    background-image: url(images/edge-shadows-small.png);
    background-repeat:repeat-x;
    background-position:bottom;}
    
    


/* @navigations
********************************************************************************************
********************************************************************************************/




#navigation {
    float: right;
    display:block;
    font-size:12px !important;
  }
  #navigation .nav li a {
    border-width: 0 1px;
    border-style: solid;
  }
  #navigation .nav li:first-child a {
    border-left: none;
  }
  #navigation .nav li:last-child a {
    border-right: none;
  }
  #navigation .nav li ul {
    margin: 0 0 0 -1px;
    padding: 10px 15px;
    position: absolute;
    width: 180px;
    border-width: 1px;
    border-style: solid;
    z-index: 999;
  }
  #navigation .nav li ul .sf-sub-indicator {
    background: url(../images/arrow-superfish-right.png) no-repeat;
    top: 38%;
  }
  #navigation .nav li ul li a {
    padding: 8px 0px;
    width: 180px;
    background: none;
    font-size: 0.9em;
    border: none;
  }
  #navigation .nav li ul li a:hover {
    background: none;
  }
  #navigation .nav li ul li a.sf-with-ul {
    padding-right: 0;
  }
  #navigation .nav li ul li.current_page_item a,
  #navigation .nav li ul li.current_page_parent a,
  #navigation .nav li ul li.current-menu-ancestor a,
  #navigation .nav li ul li.current-cat a,
  #navigation .nav li ul li.li.current-menu-item a,
  #navigation .nav li ul li.sfHover a {
    background: none;
  }
  #navigation .nav li ul ul {
    margin: -37px 0 0 180px;
  }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

ntropy

von #navigation {: bis /* @forms:

HTML

#navigation {
  margin-top:18px;
  font: bold 1.1em/1 sans-serif;
}


.nav {
  z-index: 99;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}
.nav a {
  position: relative;
  color: #888888;
  display: block;
  z-index: 100;
  padding: 9px 15px;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
  border-color: transparent #d9d9d9 transparent #ffffff;
}
.nav a:hover {
  color: #2f2f2f;
    background: none;
}
.nav li {
  float: left;
  width: auto;
}
.nav li a.sf-with-ul {
  padding-right: 22px;
}
.nav li.current_page_item a,
.nav li.current_page_parent a,
.nav li.current-menu-ancestor a,
.nav li.current-cat a,
.nav li.li.current-menu-item a,
.nav li.sfHover a {
  color: #2f2f2f;
}
/* Optional Styling */
#navigation {
  border: 1px solid #d9d9d9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  background: -webkit-linear-gradient(#ffffff, #f5f5f5);
  background: -moz-linear-gradient(center top, #ffffff 0%, #f5f5f5 100%);
  background: -moz-gradient(center top, #ffffff 0%, #f5f5f5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#f5f5f5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#f5f5f5)";
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -o-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
}
#navigation .nav .sf-sub-indicator {
  background: url(images/arrow-superfish.png) no-repeat;
  position: absolute;
  display: block;
  right: 0.6em;
  top: 45%;
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
}
/* 2.2.1 Drop-down menus */
.nav li ul {
  position: absolute;
  left: -999em;
}
.nav li:hover, .nav li.hover {
  position: static;
}
.nav li:hover ul ul,
.nav li.sfhover ul ul,
.nav li:hover ul ul ul,
.nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul,
.nav li.sfhover ul ul ul ul {
  left: -999em;
}
.nav li:hover ul,
.nav li.sfhover ul,
.nav li li:hover ul,
.nav li li.sfhover ul,
.nav li li li:hover ul,
.nav li li li.sfhover ul,
.nav li li li li:hover ul,
.nav li li li li.sfhover ul {
  left: auto;
}
#navigation .nav li ul {
  background: #fdfdfd;
  border-color: #d9d9d9;
}
#navigation .nav li ul li a {
  color: #888888;
}
#navigation .nav li ul li a:hover {
  color: #222222;
}




/* @indexpost - types
********************************************************************************************
********************************************************************************************/


ul.medpost li{ overflow:hidden;margin-bottom:40px}


ul.medpost li h2{ padding:0 0 15px 0; margin:0 0 15px 0;
    background: url(images/edge-shadows-small.png) bottom repeat-x}


.meta{ padding:0; margin:0 0 15px 0; font-size:85%;}


ul.medpost li img{max-width: 100%; display: block; float:left; margin:10px 40px 40px 2px;}




.entry p{ margin:0 0 15px 0}




/* @comments 
********************************************************************************************
********************************************************************************************/


#comments {
    clear: both;
    background: url(images/edge-shadows-small.png) top repeat-x
}
#comments .navigation {
    padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
    margin-bottom: 0;
}
h3#comments-title {
    padding: 30px 0;
}
.commentlist {
    list-style: none;
    margin: 0;
}
.commentlist li.comment {
    border-bottom: 1px solid #e7e7e7;
    line-height: 24px;
    margin: 0 0 30px 0;
    padding: 0 0 0 56px;
    position: relative;
}
.commentlist li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
    margin-bottom: 18px;
}
#comments .comment-body p:last-child {
    margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
    margin-bottom: 24px;
}
.commentlist ol {
    list-style: decimal;
}
.commentlist .avatar {
    position: absolute;
    top: 4px;
    left: 0;
}
.comment-author {
}
.comment-author cite {
    color: #000;
    font-style: normal;
    font-weight: bold;
}
.comment-author .says {
    font-style: italic;
}
.comment-meta {
    margin: 0 0 20px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
    color: #888;
    text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
    color: #ff4b33;
}
.commentlist .even {
}
.commentlist .bypostauthor {
}
.reply {
    font-size: 12px;
    padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
    color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
    color: #ff4b33;
}
.commentlist .children {
    list-style: none;
    margin: 0;
}
.commentlist .children li {
    list-style: none;
    border: none;
    margin: 0;
}
.nopassword,
.nocomments {
    display: none;
}
#comments .pingback {
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 18px;
    padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
    margin-top: -6px;
}
#comments .pingback p {
    color: #888;
    display: block;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#comments .pingback .url {
    font-size: 13px;
    font-style: italic;
}


/* Comments form */
input[type=submit] {
    color: #333;
}
#respond {
    border-top: 1px solid #e7e7e7;
    margin:24px 0 0 0;
    overflow: hidden;
    position: relative;
}
#respond p {
    margin: 0;
}
#respond .comment-notes {
    margin-bottom: 1em;
}
.form-allowed-tags {
display: none;
}
.children #respond {
    margin: 0 48px 0 0;
}
h3#reply-title {
    margin: 18px 0;
}
#comments-list #respond {
    margin:0;
}
#comments-list ul #respond {
    margin: 0;
}
#cancel-comment-reply-link {
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
}
#respond .required {
    color: #ff4b33;
    font-weight: bold;
}
#respond label {
    color: #888;
    font-size: 12px;
}
#respond input {
    margin:0;
    width: 96%;
}
#respond textarea {
    width: 96%;
}
#respond .form-allowed-tags {
display: none;
}
#respond .form-allowed-tags code {
display: none;
}
#respond .form-submit {
    margin: 12px 0;
}
#respond .form-submit input {
    font-size: 14px;
    width: auto;
    margin-top:30px;
}

Alles anzeigen

Shadow

da jeder Themenentwickler seine eigenen Ideen für css verwenden kann und manche das auch machen, wirst du kaum erfolgreich sein wenn du die CSS eines Thema für eine anderes einfach kopieren willst.
warum nimmst du nicht das ganze Thema und aktivierst dieses ganz einfach, eigentlich die übliche vorgehensweis mit Wordpress Themen.

ntropy

genau das habe ich doch getan, also es aktiviert und dann kommt das heraus, was ich beschrieben habe: Es sind weder Bilder noch die Kategorien auf der rechten Seite zu sehen. Schriftfarbe ist falsch.

Also würde ich gerne wissen, falls sich jemand mit html auskennt, wie ich es erstmal so anpassen kann, dass die Seite so aufgebaut ist wie auf dem Bild des Links. Damit man es sehen kann, werde ich das Theme über Nacht mal aktivieren.

Shadow

Vielleicht ist die Darstellung und die Farbe nicht falsch, vielleicht ist das die Idee des Themenentwickler?!?

am besten wäre, dass du dich mit dem Themenentwickler in Kontakt setzt, da dieser (hoffentlich) weis was er gemacht hat, und ob deine Idee in seinem Thema umsetzbar ist.
anderwertige Hilfe (fehlersuche, umcoden usw) müsstest du bei Programmierer deines Vertrauens oder hier über die Jobbörse ein Angebot einholen.

ntropy

die Darstellung ist definitiv nicht so gewollt, das hatte ich ja beschrieben. Die Default-Darstellung von RESPO sieht aus wie hier im Live-Preview gezeigt!

Ok, ich dachte, HTML wäre was universales. Ich werde mal sehen, ob ich zum Entwickler Kontakt aufnehmen kann.

Shadow

HTML ist was indivueles und universal nutzbar,
Wordpress ist vielfältig
themen für Wordpress sind so wie sie der Entwickler gebastelt hat und wenn die Vorschau (des Entwicklers) nicht so aussieht, wie dein Thema dann bei dir, dann passt die vorschau mit dem tatsächlichen thema (dein download ) nicht zusammen oder es gäbe einstellungsmöglichkeit, aber das weis wiederum nur der entwickler, und hat leider nichts mit wordpress (dem grundsystem zu tun)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

RESPO Theme anpassen - wie?

Jetzt mitmachen!