Theme anpassen CSS - Hilfe gesucht

pascal187

Servus,

bin WP-Neuling und möchte gerne das DigiNews-Theme weiter anpassen, das die Darstellung des Themes auch auf Smartphones funktioniert. Aktuell wird die Sidebar unter den Body geschoben und der Body ist nach rechts etwas scrollbar, also steht ca. 30-50 über.

Ich hab mich am CSS versucht, aber bei den Stylsheet steig ich nicht durch, daher wenn mir jemand nen Tipp geben könnte? Vielen Dank, hier mal der Anfang des CSS:

Code

body {


}
#container, .wrap { 
width: 96%;
margin: 30px auto;
padding: 0;
max-width: 960px; /* remove or edit to adjust width */
background: #fff;
border: 1px solid #c7c8ca;
box-shadow: 0 0 3px #ddd;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
}


/* layout options ( all have margins right & left of 1%) */


.col60 { 
width: 6.333%; 
} /* width 60px / grid_1 */


.col140 { 
width: 14.667%; 
} /* width 140px / grid_2 */


.col220 { 
width: 23.0%; 
} /* width 220px / grid_3 */


.col300 { 
width: 31.333%; 
} /* width 300px / grid_4 */


.col380 { 
width: 39.667%; 
} /* width 380px / grid_5 */


.col480 { 
width: 48.0%; 
} /* width 480px / grid_6 */


.col540 { 
width: 56.333%; 
} /* width 540px / grid_7 */


.col620 { 
width: 64.667%; 
} /* width 620px / grid_8 */


.col700 { 
width: 73.0%; 
} /* width 700px / grid_9 */


.col780 { 
width: 81.333%; 
} /* width 780px / grid_10 */


.col860 { 
width: 89.667%; 
} /* width 860px / grid_11 */


.col940 { 
width: 98.0%; 
} /* width 940px / grid_12 */




/* layout & column defaults */
.col60,
.col140, 
.col220, 
.col300, 
.col380, 
.col480, 
.col540, 
.col620, 
.col700, 
.col780, 
.col860, 
.col940 { 
display: inline; 
float: left;
margin-left: 1%; 
margin-right: 1%; 
position: relative;
}


/* default styles & fixes */
#main { 
margin-left: 0; 
} /* fixes alignment (defaulted at col620) */


#sidebar { 
margin-right: 0; 
} /* fixes alignment (defaulted at col300) */


/******************************************************************
LINK STYLES
******************************************************************/
a, a:visited { 
color:#e01222; 
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {} /* on click */
a:link { 
-webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */
}
/******************************************************************
TEXT SELECTION STYLES
******************************************************************/
/* Safari, Chrome, iPhones, iPads */
::-webkit-selection { 
background: #000; 
color: #fff; 
text-shadow : none; 
}
/* Firefox */
::-moz-selection { 
background: #000; 
color: #fff; 
text-shadow : none; 
}
/* The Rest of em */
::selection { 
background: #000; 
color: #fff; 
text-shadow : none; 
}


/******************************************************************
HEADLINES & TITLES
******************************************************************/
h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
h5, .h5 {}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {}
/******************************************************************
HEADER SYTLES
******************************************************************/
header[role=banner] {
position: relative;
background: url(library/images/header-bg.jpg) repeat-x;
}
#site-heading { 
min-height: 60px; 
padding-top: 20px;
padding-left: 30px; 
margin-bottom: 15px;
}


#site-title {
margin-bottom: 2px;
margin-right: 300px;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-weight: 700;
font-size: 55px;
line-height: 1em;
text-transform: uppercase;
}


#site-title a { 
color: #000; 
text-decoration: none;
}


#site-description {
font-size: 14px;
margin-right: 300px;
color: #000;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-weight: 400;
text-transform: uppercase;
}
header[role=banner] #searchform {
position: absolute;
right: 30px;
top: 30px;
}


header[role=banner] #searchform label,
header[role=banner] #searchform input[type=submit]{
display: none;
}


header[role=banner] #s {
font-size: 1.3em;
background: url(library/images/icon-search.png) no-repeat 7px 10px #fff;
padding: 7px 10px 7px 30px;
border: 1px solid #c7c8ca;
box-shadow: 3px 3px 5px #e7e7e7 inset;
min-width: 270px;
outline: none;
}


#headerimg { 
border: 10px solid #fff; 
margin-bottom: 20px; 
}


#headerimg img {
width: 100%;
height: auto;
margin-bottom: -6px;
}


.entry-header { margin-bottom: 25px }
.entry-title { 
font-size: 1.5em;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-transform: uppercase;
color: #000;
}




.entry-title a {
color: #000;
}


.sticky h1.entry-title {
font-size: 30px;
}


.sticky .entry-title a {
color: #e01222;
}


.entry-title a:hover {
color: #e01222;
text-decoration: none;
}


body.page .entry-title, 
body.single .entry-title, 
.error404 .entry-title { 
font-size: 2.6em;
padding-bottom: 7px;
border-bottom: 1px solid #e01222;
margin-bottom: 5px;
}


.page-header { 
margin: 2.2em 30px 1.4em 30px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
padding: 10px;
}
.page-title {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
nav[role=navigation] {}
nav[role=navigation] div.menu { 
background: #000; 
}


nav[role=navigation] ul.menu { 
display: block;
}
nav[role=navigation] .menu ul li {
border-right: 1px solid #fff;
}
nav[role=navigation] .menu ul li a, 
nav[role=navigation] .menu #menu-icon { 
padding: 10px 20px;
color: #fff;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;


}


nav[role=navigation] .menu #menu-icon {
cursor: pointer;
display: none;
}


nav[role=navigation] .menu ul li a:hover {
background: #e01222;
}


nav[role=navigation] .menu ul li:first-child a {
}


nav[role=navigation] .menu ul li.current-menu-item a, 
.nav ul li.current_page_item a, 
nav[role=navigation] .menu ul li.current_page_item a {
background: #e01222;
}


nav[role=navigation] .menu ul.sub-menu li.current-menu-item a, 
.nav ul.sub-menu li.current_page_item a, 
nav[role=navigation] .menu ul.sub-menu li.current_page_item a,
nav[role=navigation] .menu ul li.current-page-parent ul.sub-menu li a,
nav[role=navigation] .menu ul li.current-menu-item ul.sub-menu li a,
nav[role=navigation] .menu ul li.current_page_parent ul.children li a,
nav[role=navigation] .menu ul li.current_page_item ul.children li a, 
.nav ul li.current_page_item ul.sub-menu li a, 
nav[role=navigation] .menu ul li.current_page_item ul.sub-menu li a {
background: none;
}


nav[role=navigation] .menu ul.sub-menu li.current-menu-item a:hover, 
.nav ul.sub-menu li.current_page_item a:hover, 
nav[role=navigation] .menu ul.sub-menu li.current_page_item a:hover,
nav[role=navigation] .menu ul li.current-page-parent ul.sub-menu li a:hover,
nav[role=navigation] .menu ul li.current-menu-item ul.sub-menu li a:hover,
nav[role=navigation] .menu ul li.current_page_parent ul.children li a:hover,
nav[role=navigation] .menu ul li.current_page_item ul.children li a:hover, 
.nav ul li.current_page_item ul.sub-menu li a:hover, 
nav[role=navigation] .menu ul li.current_page_item ul.sub-menu li a:hover {
background: #ececec;
}




nav[role=navigation] .menu ul li ul.sub-menu, 
nav[role=navigation] .menu ul li ul.children {
background: #f3f3f3;
box-shadow: 1px 1px 3px #aaa;
}


nav[role=navigation] .menu ul li ul.sub-menu li, 
nav[role=navigation] .menu ul li ul.children li {
border-bottom:1px solid #e3e3e3;
width: 200px;
border-right: 0;
}


nav[role=navigation] .menu ul li ul.sub-menu li a, 
nav[role=navigation] .menu ul li ul.children li a {


}


nav[role=navigation] .menu ul li ul.sub-menu li:first-child, 
nav[role=navigation] .menu ul li ul.children li:first-child {


}


nav[role=navigation] .menu ul li ul.sub-menu li:first-child a, 
nav[role=navigation] .menu ul li ul.children li:first-child a {


}
nav[role=navigation] .menu ul li ul li a { 
color: #555; 
text-shadow: 0px 0px; 
}
nav[role=navigation] .menu ul li ul li a:hover { 
background: #ececec; 
color: #555; 
}
nav[role=navigation] .menu ul li ul li:last-child a {}
nav[role=navigation] .menu ul li:hover ul {}
nav[role=navigation] .menu ul li ul li ul.sub-menu, 
nav[role=navigation] .menu ul li ul li ul.children {
margin-top: -41px;
}
nav[role=navigation] .menu ul li ul li:hover ul.sub-menu,
nav[role=navigation] .menu ul li ul li:hover ul.children {


}

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

pascal187

Stylesheet Ende noch

CSS

/******************************************************************
SIDEBARS & ASIDES
******************************************************************/
#sidebar {
margin-top: 2.2em;
}


#sidebar-wrap {
padding: 10px 10px 23px 10px;
background: url(library/images/shadow-sidebar.png) no-repeat center bottom #f2f2f2;
background-size: 100% 13px;
margin-right: 30px;
margin-bottom: 20px;
}
#sidebar .widget {
background: #fff;
margin: 0 0 20px 0;
padding: 20px;
border: 1px solid #dedede;
}
#sidebar .widget:last-child {
margin-bottom:0;
}


#sidebar .widget a {
color: #848484;
text-decoration: none;
}


#sidebar .widget a:hover {
text-decoration: underline;
}


#sidebar .widget li, #meta.widget aside a {


}


#sidebar .widget li:before, #meta.widget aside a:before {
content: "• ";
color: #e01222;
font-family: Verdana, Geneva, sans-serif;
}


#sidebar .widget ul.sub-menu li:last-child {


}


#sidebar .widget li a {}


#sidebar .widget-title {
margin: -20px -20px 20px -20px;
padding: 15px 20px 10px 20px;
background: #fafafa;
border-bottom: 1px solid #c7c8ca;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
}


.post_content .widgettitle {}
/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}


/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}


/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}


/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}


/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}


/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a { padding: 3px; }
.widget_tag_cloud a:after { content: ","; }
.widget_tag_cloud a:before {}
.tagcloud {}


/* calendar widget */
.widget_calendar {}
#wp-calendar {
text-align: center;
width: 95%;
margin: auto;
}
#calendar_wrap { padding: 15px 0; }
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
text-transform: uppercase;
}


#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}


/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}


/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}


/* search widget */
#searchform {}
.widget_search {}
.widget_search #s {
width: 60%;
}
.screen-reader-text {}


/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}


/******************************************************************
IMAGE STYLES
******************************************************************/
.post_content img { margin-top: .75em }
.left img,
img.left,
img.alignleft {
margin-right: 1.5em;
margin-bottom: 1em;
margin-top: .75em;
}
.right img,
img.right,
img.alignright {
margin-left: 1.5em;
margin-bottom: 1em;
margin-top: .75em;
}
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
/* Notices */
.post .notice,
{
background: #eee;
display: block;
padding: 1em;
}
/* Image Attachments */


.entry-attachment {
display: block;
margin: 0 auto;
text-align: center;
}
.imgthumb img {
float: left;
margin-right: 20px;
margin-bottom: 15px;
margin-top: 5px;
border: 1px solid #999;
}
/******************************************************************
FOOTER STYLES
******************************************************************/
footer[role=contentinfo] {
padding: 10px 0;
background: #000;
margin-bottom: 20px;
}


.attribution {
float: none;
text-align: center;
}


#site-generator {
text-align: center;
font-family: 'Old Standard TT', Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
}


#site-generator a {
color: #fff;
text-decoration: none;
padding: 0 5px;
}
#site-generator a:hover {
text-decoration: underline;
}
/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}


.red {
color: #e01222;
}
/******************************************************************
MEDIA QUERIES & DEVICE STYLES
Developed by: Andy Clarke & the 320 & Up Extension
URL: [URL]http://stuffandnonsense.co.uk/projects/320andup/[/URL]
******************************************************************/
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 768px) {
#site-title {
margin-right:0;
}
#site-description {
margin-right:0;
}


#access, div.menu {
position:relative;
}


div.menu ul li {
list-style-type: none;
float: none;
}


nav[role=navigation] ul.menu, div.menu ul {
background: #f5f5f5;
position: absolute;
top: 41px;
z-index: 9999;
display: none;
box-shadow: 1px 1px 1px #000;
}


nav[role=navigation] .menu #menu-icon {
display: block;
width: 80px;
}


header[role=banner] #searchform {
top: 6px;
right: 10px;
}


.menu ul li:hover ul {
left: -9999em;
}


header[role=banner] #s {
font-size: 1em;
background: url(library/images/icon-search.png) no-repeat 5px 4px #fff;
padding: 4px 5px 4px 26px;
border-radius: 7px;
border: 1px solid #fff;
box-shadow: 3px 3px 5px #777 inset;
min-width: 150px;
}


nav[role=navigation] .menu ul li {
border-bottom: 1px solid #eaeaea;
}


nav[role=navigation] .menu ul li a {
color: #555;
background: none;
border-radius: 0;
box-shadow: none;
}


nav[role=navigation] .menu ul li a:hover,
nav[role=navigation] .menu ul li.current-menu-item a,
.nav ul li.current_page_item a,
nav[role=navigation] .menu ul li.current_page_item a {
background: #f2f2f2;
}


nav[role=navigation] ul.sub-menu li,
nav[role=navigation] ul.children li {
display: none;
}


#main.col620 {
width: 100%;
display: block;
}


article[id*=post-].sticky {
margin-right: 30px;
}


#sidebar-wrap {
margin-left: 25px;
margin-right: 35px;
}


#sidebar.col300 {
float: none;
display: block;
width: 100%;
clear: both;
}


.widget {
margin: 2.2em 30px 2.2em 20px;
}
}
@media screen and (min-width: 768px) {
nav[role=navigation] ul.menu,
div.menu ul {
display:block !important;
}
}
@media screen and (max-width: 1382px) {
/* insert styles here */
}
/******************************************************************
PRINT STYLES
(Handled by default, but if you want to edit it, feel free)
******************************************************************/
@media print { }

Alles anzeigen

elotse

Firefox zusammen mit Firebug installieren, dies sollte dich weiter bringen

pascal187

Hab ich nun durch, aber hilft mir nicht weiter...zu unerfahren wohl, zeigt nur ein paar Sachen zu meine Adthis Social-Modul? Geght das denn nich einfach im CSS zu lösen??

elotse

Mit Firebug kannst du deine Bereiche im Blog markieren und bekommst angezeigt welche CSS Parameter dafür zuständig sind.
Zusätzlich kannst du sofort Online simulieren wie Änderungen sich auswirken.
Etwas einlesen in das Thema schadet nicht;)

pascal187

Ich verstehe deinen Ansatz, aber das hilft mir bei meinen Problem nicht. Das DiginewsTheme wird nur auf Smartphones nicht richtig angezeigt, getestet mit 2-3 Android Phones. Die Sidebar verläuft mit allen Plugins unter dem Footer des Themes. Da kann ich in den bekannten Browsers am PC markieren wie ich will, wenn alles korrekt Dargestellt wird und werd den Fehler nicht finden.

Andere Themes werden ja z.B. mit 2-3 Spalten in der Auflösung so verkleinert aufn Handy, das das komplette Theme sichtbar ist? Das kann doch nur ein Code für die Auflösung sein?

Tutrix

Das mit der Sidebar ist bei diesem Theme Absicht, es geht ja schließlich um die Lesbarkeit deiner Seite, nicht darum das alles "egal ob klitzeklein" auf dem Smartphone zusehen ist.
Auch im normalen PC-Browser rutscht die Sidebar nach unten, musst ja nur das Browserfenster entsprechend verkleinern

Es wechselt ja auch das Menü, bei kleiner Auflösung

Die einzelnen Angaben sind über

Code

@media screen and (max-width

formatiert

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme anpassen CSS - Hilfe gesucht

Jetzt mitmachen!