Bigger images on front page and in gallery

Need help? Check out our Support site, then

WordPress.com Forums » CSS Customization

Bigger images on front page and in gallery

andremalerba
Member
Oct 7, 2011, 4:36 PM

Hey everyone, Im really not a coder so hopefully you all can help me with this. On my blog I would like to be able to make it so that the horizontal inserted images in posts are bigger, the vertical images are fine. Secondly I would like to add width to the thumbnail enlargements. Again just the horizontal images. Lastly I would like the text in posts to spread out more so it would match the horizontal images better instead of having a small square of text and then a really wide image. Shouldn't be too hard, I just don't know enough. Here is the CSS stylesheet for the blog:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
}

body {
line-height:1;
background:#fff;
font:62.5% Palatino, "Times New Roman", serif;
color:#333;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:none;
}

:focus {
outline:0;
}

ins {
text-decoration:none;
}

del {
text-decoration:line-through;
}

table {
border-collapse:collapse;
border-spacing:0;
}

strong {
font-weight:bold;
}

a:link,a:visited {
color:#9C8A6A;
text-decoration:none;
}

a:hover,a:active {
color:#3E372B;
text-decoration:underline;
}

h1 {
font-size:3.3em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.05em;
word-spacing:.2em;
margin:10px 0 20px;
}

h1 a:link,h1 a:visited {
color:#000;
}

h1 a:hover,h1 a:active {
color:#000;
text-decoration:underline;
}

h2 {
margin-top:30px;
margin-bottom:40px;
font-size:2.4em;
font-weight:normal;
color:#000;
text-transform:uppercase;
}

h3 {
margin-bottom:5px;
font-size:2.3em;
font-weight:normal;
}

h3 a:link,h3 a:visited {
color:#333;
}

h3 a:hover,h3 a:active {
text-decoration:underline;
}

h4 {
margin-bottom:10px;
font-size:1.5em;
font-weight:bold;
color:#333;
}

h5 {
position:relative;
top:-35px;
margin-bottom:50px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:1.2em;
color:#999;
font-weight:normal;
border-bottom:1px solid #ddd;
background:#fff;
}

h5 abbr {
display:inline-block;
position:relative;
background:#fff;
top:8px;
margin:0 auto;
padding:0 8px;
}

input[type=text],textarea {
border:1px solid #ddd;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
color:#666;
padding:3px;
}

input:focus,textarea:focus {
color:#333;
border-color:#999;
}

input[type=submit],#core-content #respond #comment-submit {
color:#fff!important;
font-weight:bold;
background-color:#8ea7aa;
background-image:url('images/button.png');
background-repeat:repeat-x;
background-position:left top;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
text-shadow:none;
border-color:#999;
border-style:solid;
border-width:1px;
padding:3px 10px;
}

input[type=submit]:hover,input[type=submit]:focus,#core-content #respond #comment-submit:hover {
background-color:#697d80;
border-color:#666;
}

#site-wrapper {
padding-top:15px;
width:500px;
text-align:center;
position:relative;
margin:0 auto;
}

#site-description {
color:#999;
font-size:1.2em;
font-style:italic;
width:400px;
margin:18px auto 60px;
padding:0 0 13px;
}

#main-nav {
background:#fbfbfb;
border-bottom:1px solid #eaeaea;
border-top:1px solid #eaeaea;
display:block;
min-height:20px;
margin-top:10px;
position:relative;
padding:6px 0 0;
}

#main-nav ul {
text-align:center;
width:45em;
margin:0 auto;
}

#main-nav li {
display:inline-block;
font-size:1.5em;
height:20px;
margin-right:20px;
text-transform:uppercase;
}

#main-nav li:last-child {
margin-right:0;
}

#main-nav a {
color:#999;
white-space:nowrap;
}

#main-nav a:hover {
color:#2e301c;
text-decoration:underline;
}

#main-nav .current_page_parent > a,#main-nav .current_page_item > a,#main-nav .current-menu-item > a,#main-nav .current-menu-ancestor > a {
color:#2a2d1a;
font-weight:bold;
}

#main-nav .current_page_parent a:hover,#main-nav .current_page_item a:hover,#main-nav .current-menu-item a:hover,#main-nav .current-menu-ancestor a:hover {
color:#2e301c;
}

#main-nav ul ul {
background:#fff;
border-bottom:1px solid #f4f4f4;
border-top:1px solid #eaeaea;
display:none;
position:absolute;
top:100%;
left:0;
text-align:center;
width:500px;
margin:0 auto;
padding:4px 0 3px;
}

#main-nav ul ul li {
display:inline;
font-size:12px;
margin-right:20px;
text-transform:uppercase;
}

#main-nav ul ul li:last-child {
margin-right:0;
}

#main-nav ul ul a {
color:#999;
white-space:nowrap;
}

#main-nav ul ul a:hover {
color:#2e301c;
text-decoration:underline;
}

#main-nav ul li:hover > ul {
display:block;
}

#main-nav ul ul .current_page_item a,#main-nav ul ul .current-menu-item a {
color:#2a2d1a;
}

#main-nav ul .current_page_item > ul,#main-nav ul .current_page_ancestor > ul,#main-nav ul .current-menu-item > ul,#main-nav ul .current-menu-ancestor > ul {
display:block;
}

#core-content {
float:left;
width:500px;
margin-top:8px;
}

.post-content {
position:relative;
}

.post-content h4 {
position:relative;
top:0;
font-family:Constantia, Palatino, "Times New Roman", serif;
font-size:1.2em;
color:#999;
font-weight:normal;
font-style:italic;
border-bottom:none;
}

.post-date ~ .post-content {
margin-top:-30px;
}

.post-date a {
color:#999;
}

.sticky .post-date {
color:#666;
border-color:#666;
}

#core-content p,#core-content li,#core-content dd {
margin-bottom:1.7em;
font-size:14px;
line-height:1.5em;
color:#333;
text-align:justify;
}

#core-content p {
text-align:justify;
}

#core-content li {
list-style:square;
margin-left:17px;
}

#core-content dt {
font-size:1.3em;
color:#333;
}

.entry-content {
margin-top:24px;
text-align:left;
}

.entry-content a:link,.entry-content a:visited {
text-decoration:underline;
}

.hentry {
position:relative;
padding-bottom:37px;
border-bottom:1px dotted #ddd;
margin-bottom:30px;
}

#core-content .post-meta {
font-size:1.3em;
color:#999;
margin:40px auto 0;
}

#core-content .post-meta div {
margin-bottom:5px;
}

#core-content .post-meta a:link,#core-content .post-meta a:visited {
color:#666;
}

#core-content .post-meta a:hover,#core-content .post-meta a:active {
color:#666;
}

#core-content .post-meta span {
text-transform:uppercase;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6 {
color:#333;
border:none;
font-family:Constantia, Palatino, "Times New Roman", serif;
font-weight:bold;
font-style:normal;
position:static;
margin:0 0 5px;
padding:0;
}

.entry-content h1 {
font-size:2em;
letter-spacing:0;
}

.entry-content h2 {
font-size:1.8em;
}

.entry-content h3 {
font-size:1.6em;
}

.entry-content h4,.entry-content h5,.entry-content h6 {
font-size:1.4em;
}

.entry-content strong {
color:#000;
}

.entry-content pre {
color:#666;
font-size:1.5em;
line-height:18px;
margin-bottom:15px;
}

.entry-content ul,.entry-content ol {
margin:0 0 20px 15px;
}

.entry-content ol li {
list-style-type:decimal!important;
}

.entry-content li {
margin-bottom:5px!important;
}

.entry-content blockquote {
font-size:1.4em;
font-style:italic;
line-height:1.5em;
color:#7d7d7d;
padding-left:10px;
border-left:3px solid #ccc;
margin:0 20px 20px;
}

#core-content .entry-content blockquote p {
font-size:1.1em;
line-height:1.3em;
color:#7d7d7d;
}

.entry-content .alignleft {
float:left;
margin:4px 15px 10px 0;
}

.entry-content .alignright {
float:right;
margin:4px 0 10px 15px;
}

.entry-content .aligncenter {
clear:both;
display:block;
margin-left:auto;
margin-right:auto;
}

.entry-content table {
font-size:14px;
text-align:left;
width:100%;
margin:0 0 20px;
}

.entry-content tr th,.entry-content thead th {
color:#888;
font-weight:bold;
line-height:20px;
padding:9px 24px;
}

.entry-content tr td {
border-top:1px solid #ddd;
padding:6px 24px;
}

.entry-content tr.alternate td {
background:#f5f5f5;
}

.entry-content sup,.entry-content sub {
font-size:12px;
}

.entry-content sup {
vertical-align:super;
}

.entry-content sub {
vertical-align:sub;
}

img.size-auto,img.size-large,img.size-full,img.size-medium,img.size-thumbnail,.attachment img,div.wp-caption {
max-width:100%;
height:auto;
}

aside img {
max-width:100%;
height:auto;
}

object,embed {
max-width:100%;
}

.hentry img {
border:1px solid #ccc;
margin:5px auto;
}

.entry-content .wp-caption.alignnone {
margin-bottom:15px;
}

#core-content .wp-caption-text,.entry-caption {
color:#777;
font-style:italic;
margin-bottom:0;
padding:0 20px 10px;
}

#core-content .entry-caption p {
text-align:center;
}

#core-content img.wp-smiley,#core-content img.latex {
background:transparent;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
margin:0;
padding:0;
}

dl.gallery-item {
margin:0 0 1.5em;
}

dd.gallery-caption {
color:#666;
font-size:11px;
margin-bottom:0;
}

#wpstats {
display:block;
text-align:center;
margin:0 auto 20px;
}

.format-aside .post-content .entry-title {
display:none;
}

.format-status .post-content {
background:#f5f1e9;
-moz-border-radius:3px;
border-radius:3px;
padding:10px;
}

.format-image .entry-content {
margin-left:60px;
margin-right:24px;
}

#core-content .format-image .entry-content p {
color:#777;
font-size:13px;
}

.format-image .entry-content p img {
display:none;
}

.format-link .post-content .entry-title:after {
content:"\2192";
color:#a3b7ba;
padding-left:10px;
text-decoration:none;
}

.single .hentry h3 {
margin-top:30px;
margin-bottom:5px;
}

.single .hentry h5 {
position:static;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:1.2em;
color:#999;
font-weight:normal;
border-bottom:none;
background:#fff;
}

.single .hentry {
border-top:1px solid #efefef;
margin-top:-50px;
border-bottom:none;
padding-bottom:0;
}

.single #core-content .post-meta {
padding-top:0;
padding-bottom:17px;
text-align:left;
margin:20px 0 0;
}

#core-content .entry-content #link-list {
margin-left:0;
}

#core-content .entry-content #link-list li {
list-style-type:none;
margin-left:0;
}

#core-content .entry-content #link-list li li {
font-size:.9em;
list-style-type:square;
margin-bottom:20px!important;
margin-left:15px;
}

#core-content .entry-content #link-list ul {
margin:10px 0 40px;
}

.comment {
margin-top:25px;
border-bottom:1px solid #ccc;
padding:0 0 25px;
}

.children .comment {
border-bottom:none;
margin-top:0;
padding-bottom:0;
}

#core-content #comments li {
font-size:inherit;
list-style:none;
margin-left:0;
padding-left:58px;
position:relative;
}

#core-content .comment p {
color:#666;
}

#core-content .comment .says {
display:none;
}

.comment .avatar {
position:absolute;
left:0;
}

#core-content .comment-body {
padding-right:10px;
padding-bottom:10px;
}

#core-content .comment-body h3 {
border:none;
}

#core-content #comments .comment .children li {
margin:5px 0 0;
padding:10px 0 0 52px;
}

#core-content #comments .comment .children li .comment-body {
margin-left:-52px;
background:#f2f2f2;
border-left:2px solid #f2f2f2;
padding:10px 10px 10px 52px;
}

#core-content #comments .bypostauthor .comment-body {
border-left:2px solid #ccc!important;
}

#core-content #comments .commentlist > .bypostauthor {
background-color:#f6f6f6;
}

#core-content #comments .commentlist > .bypostauthor .comment-body {
border-left:none!important;
}

#core-content #comments .comment .children li.depth-3 .comment-body {
background-color:#f6f6f6;
border-left:2px solid #f6f6f6;
}

#core-content #comments .comment .children li.depth-4 .comment-body {
background-color:#f9f9f9;
border-left:2px solid #f9f9f9;
}

#core-content #comments .comment .children li.depth-5 .comment-body {
background-color:#fcfcfc;
}

#core-content #comments .comment .children li .avatar {
left:10px;
width:32px;
height:32px;
}

#cancel-comment-reply {
margin-top:15px;
text-transform:capitalize;
float:left;
}

.comment-reply-link {
display:block;
padding-left:13px;
background:url('images/icon_reply.png') no-repeat left 2px;
}

.comment-author {
font-size:1.4em;
margin-bottom:10px;
}

.comment-author cite {
font-style:normal;
font-weight:bold;
}

.comment-meta {
position:absolute;
right:10px;
font-size:1.2em;
font-style:italic;
top:0;
}

#core-content #comments .comment .children .comment-meta {
top:20px;
}

.comment .reply {
margin-bottom:10px;
text-transform:uppercase;
font-size:1.1em;
}

.commentContent {
float:left;
width:415px;
margin-left:22px;
}

.nocomments {
font-size:1.2em;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:25px 0;
}

#comments h3 {
font-size:1.4em;
}

#comments h3,legend span {
border-bottom:1px solid #ccc;
font-weight:bold;
text-align:left;
width:500px;
padding:0 0 .7em;
}

#gallery-nav {
background:url('images/gallery-nav_bg.png') no-repeat;
width:258px;
height:90px;
margin:20px auto 0;
}

#gallery-nav_controls {
width:140px;
position:relative;
margin:0 auto;
padding:12px 0;
}

#gallery-nav_prev,#gallery-nav_next {
position:absolute;
width:60px;
-moz-box-shadow:0 0 5px #999;
-webkit-box-shadow:0 0 5px #999;
}

#gallery-nav_prev {
left:0;
margin-right:10px;
}

#gallery-nav_next {
right:0;
}

.gallery-nav_return {
display:inline-block;
margin-top:5px;
font-size:1.3em;
}

.gallery-image {
margin-bottom:24px;
text-align:center;
}

.navigation {
margin-top:40px;
}

.navigation a {
font-size:1.5em;
}

.navigation .prev,.navigation .next,.navigation .alignleft,.navigation .alignright {
display:block;
}

.navigation .alignright {
text-align:right;
}

.navigation .prev,.navigation .alignleft {
float:left;
}

.navigation .next,.navigation .right {
float:right;
}

#comments .navigation a {
font-size:14px;
}

#archives {
margin-top:-50px;
}

h2.archive-title {
color:#666;
margin:-30px 0 70px;
}

h2.archive-title strong {
color:#000;
}

#archives h3,#core-content li h3 {
font-family:Constantia, Palatino, "Times New Roman", serif;
font-size:1.6em;
text-align:left;
color:#333;
font-weight:normal;
text-transform:uppercase;
border-bottom:1px solid #ccc;
margin:0 0 5px;
}

#core-content li h3 {
font-size:1.2em;
}

#archives label {
font-family:Constantia, Palatino, "Times New Roman", serif;
font-size:1.4em;
color:#333;
font-weight:normal;
text-transform:uppercase;
}

#archives #date {
float:left;
width:235px;
}

#archives #cattags {
float:left;
width:235px;
margin-left:30px;
}

#archives ul {
text-align:left;
margin:5px 0 60px;
}

#archives ul li {
display:inline-block;
color:#999;
font-size:1.3em;
line-height:1.5em;
white-space:nowrap;
margin:0 5px 5px 0;
}

#archives li a {
margin-right:5px;
}

#archives #date ul li {
display:block;
list-style-type:none;
border-bottom:1px solid #efefef;
margin:0;
}

#archives #date ul li a {
display:inline-block;
min-width:210px;
}

.tagArchives li {
float:left;
margin-right:10px;
}

.categories li {
margin-bottom:5px;
font-size:2.3em;
}

ul#recent-posts li {
list-style:none;
border-bottom:1px solid #efefef;
display:block;
margin:0;
padding:5px 0;
}

#recent-posts a {
float:left;
font-size:1.1em;
}

#recent-posts .post-date {
float:right;
}

#core-content.searchresults {
margin-top:-35px;
}

.searchresults .post-meta {
text-align:left;
}

.searchpanel {
border-top:1px solid #efefef;
border-bottom:1px solid #efefef;
margin:0 0 40px;
padding:10px 0;
}

.searchpanel input[type=text] {
width:250px;
font-size:1.7em;
}

.searchpanel input[type=submit] {
font-weight:normal;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
background-position:left 5px;
font-size:1.4em;
}

#supplementary {
font-size:13px;
margin-top:10px;
overflow:hidden;
text-align:center;
}

.widget {
margin-bottom:30px;
}

.widget-title {
color:#555;
font-size:16px;
font-weight:normal;
text-transform:uppercase;
margin:0 0 10px;
}

.widget li {
margin:5px;
}

#supplementary.two .widget-area {
float:left;
margin-right:3%;
text-align:right;
width:47%;
}

#supplementary.two .widget-area .avatar {
float:right;
}

#supplementary.two .widget-area + .widget-area .avatar {
float:left;
}

#supplementary.two .widget-area + .widget-area {
margin-right:0;
text-align:left;
}

#wp-calendar {
width:100%;
}

#wp-calendar caption {
padding-bottom:12px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}

#wp-calendar thead {
font-size:11px;
}

#wp-calendar thead th {
text-align:center;
}

#wp-calendar tbody td {
background:#f4f4f4;
border:1px solid #f9f9f9;
text-align:center;
padding:3px 0 2px;
}

#wp-calendar tbody .pad {
background:none;
}

#wp-calendar tfoot td {
font-size:12px;
padding:6px 0 0;
}

#wp-calendar tfoot #next {
text-align:right;
}

#footer {
width:500px;
border-top:4px double #ccc;
color:#666;
text-align:center;
margin:40px auto 0;
padding:20px 0 35px;
}

.footer-content {
width:500px;
clear:left;
margin:20px auto 0;
}

#footer p {
line-height:1.4em;
}

#footer #search {
margin:15px 0 30px;
}

#footer h5 {
position:relative;
top:0;
margin-bottom:8px;
font-family:Constantia, Palatino, "Times New Roman", serif;
font-size:1.3em;
color:#666;
font-weight:normal;
text-transform:uppercase;
border-bottom:none;
}

#footer .elsewhere {
margin-bottom:30px;
}

#footer .elsewhere li {
display:inline;
border-right:1px dotted #ccc;
font-size:1.2em;
margin:0 5px 0 0;
padding:0 8px 0 0;
}

#footer .elsewhere li:last-child {
border-right:none;
margin:0;
padding:0;
}

#footer #search input[type=text] {
font-size:1.4em;
border-color:#ccc;
}

#footer #search input[type=text]:focus {
border-color:#999;
}

.loggedin a:link,.loggedin a:visited,a.post-edit-link:link,a.post-edit-link:visited,a.comment-edit-link:link,a.comment-edit-link:visited {
color:#333;
font-weight:bold;
text-decoration:underline;
}

#core-content p.loggedin {
font-size:1.1em;
padding:0;
}

#site-wrapper:after,.post:after,.commentEntry:after,.commentform:after,#footer .elsewhere:after,#metaContent .metaExtend:after,#main-nav:after,#main-nav ul:after,#subNav ul:after,#archives ul:after,#core-content .post-meta:after,#recent-posts li:after,#gallery-nav:after,#gallery-nav_controls:after,.navigation:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.single .hentry .sd-like h3 {
margin:0;
}

The blog I need help with is andremalerba.wordpress.com.
andremalerba
Member
Oct 7, 2011, 4:47 PM

Yeah if you click on the word "blog" in my original post then it will take you there. And yes I purchased the upgrade. Here the link is again http://www.andremalerba.wordpress.com
timethief
Member
Oct 7, 2011, 4:48 PM

I'm sorry -- I goofed up. :(
andremalerba
Member
Oct 7, 2011, 5:39 PM

No problem.
timethief
Member
Oct 7, 2011, 5:41 PM

Thanks for being gracious. I have made this same mistake two days in a row now and I feel like crawling a rock. Hopefully Staff will delete what I posted above when they help you with your CSS editing.
designsimply
Staff
Oct 7, 2011, 6:13 PM
It's much much better to post short code examples in the forum compared to long ones. Also, we can always find the current CSS you are using by looking at the source code for one of your pages in our browsers.

I see that you're using the Manifest theme. The width of the horizontal images is limited to the column width and you've used this CSS in your CSS editor to make the column width 500px:
```
#core-content {
    float: left;
    width: 500px;
    margin-top: 8px;
}
```
You could widen the whole column to something larger and that would also make the horizontal images larger. If you set that width, you'll also want to update the width for #site-wrapper and #footer.

The text should adjust to fit.

Note that if you adjust the content width, then you will likely also need to adjust a few other things too, like you might need to set a header image via CSS and adjust the slideshow CSS. If you decide to change the content width, let us know and we'll help you out after you set the width you want.
andremalerba
Member
Oct 7, 2011, 6:27 PM

Thanks. There is actually a little box under the CSS editor that allows you to set the maximum width for images (default at 500px) which I changed to 1000px. Didnt help even in a new post. I will try this though.
andremalerba
Member
Oct 7, 2011, 6:56 PM

That all worked perfectly. The only thing I cant figure how to do is get the thumbnail enlargements to also be the same size as the main post images.
designsimply
Staff
Oct 10, 2011, 2:25 PM

The little box under the CSS editor affect how the images get inserted, but a theme can still over take those kinds of settings, so that's why you need to adjust CSS too.

I see that you posted a new thread about the gallery attachment page image size issue: http://en.forums.wordpress.com/topic/increase-gallery-image-size?replies=19

Topic Closed

This topic has been closed to new replies.

About this Topic

Started 1 year ago by andremalerba
This topic has 9 posts
3 posters
Latest reply from designsimply
This topic is not resolved
RSS feed for this topic

WordPress.com

Bigger images on front page and in gallery

Topic Closed

About this Topic

Tags

Get Started

Do More

Community

Company F • T

From our blogs