"visual" tab different from preview and live post

  • Resolved garybeck

    (@garybeck)


    15 years, 8 months ago

    Hi
    when I insert a photo using the built-in uploader, there is a field for caption. I type something in, and it looks real sweet when I see it in the “visual” tab. there is a nice grey border around the photo and the caption is below the photo, inside the grey area, and centered.

    but when I preview the post, the grey border and background for the caption is gone and the caption is just floating below the photo with the same color background as the rest of the text in the post. it looks like the captions are just running in with the regular text.

    is the caption style in the Visual tab independent of the style settings? is that what I need to fix?

    thinking this is the problem I went into my stylesheet and see nothing I can adjust in regards to caption style. any help?

    thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Rev. Voodoo

    (@rvoodoo)

    15 years, 8 months ago

    yep, unless your theme has its own editor css file, its just got its defaults.

    Your theme has its own stuff as well. You most likely need to fix your themes style.css file. All the image stuff should be grouped together in the style.css. Take a look for the image and caption stuff.

    Thread Starter garybeck

    (@garybeck)

    15 years, 8 months ago

    my style.css file is pretty small and a search on “caption” results in nothing except something for the calendar. a search on “image” only brings up references to files in the /image/ folder.

    any where else I can look for these settings?

    Thread Starter garybeck

    (@garybeck)

    15 years, 8 months ago

    I noticed in the code, the caption has square brackets around it.

    here’s an example

    [caption id="attachment_183" align="alignleft" width="300" caption="hello"]<a href="http://solarbus.org/blog/wp-content/uploads/2010/10/P1040634.jpg"><img class="size-medium wp-image-183" title="P1040634" src="http://solarbus.org/blog/wp-content/uploads/2010/10/P1040634-300x225.jpg" alt="" width="300" height="225" /></a>[/caption]

    Rev. Voodoo

    (@rvoodoo)

    15 years, 8 months ago

    /* =Images
-------------------------------------------------------------- */

#content img {
	margin: 0;
	height: auto;
	max-width: 640px;
	width: auto;
}
#content .attachment img {
	max-width: 900px;
}
#content .alignleft,
#content img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
#content .alignright,
#content img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
#content .aligncenter,
#content img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
	margin-bottom: 12px;
}
#content .wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;
}
#content .wp-caption img {
	margin: 5px 5px 0;
}
#content .wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
#content .wp-smiley {
	margin: 0;
}
#content .gallery {
	margin: 0 auto 18px;
}
#content .gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
#content .gallery img {
	border: 2px solid #cfcfcf;
}
#content .gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
#content .gallery dl {
	margin: 0;
}
#content .gallery img {
	border: 10px solid #f1f1f1;
}
#content .gallery br+br {
	display: none;
}
#content .attachment img { /* single attachment images should be centered */
	display: block;
	margin: 0 auto;
}

    is an example of useful style.css image handling code. It comes from the twentyten theme. I used it to build my theme’s image and caption handling, just edited to my needs. Might be a good jumping off point for you

    Thread Starter garybeck

    (@garybeck)

    15 years, 8 months ago

    I looked at the preview source and found this where there is an image with a caption:

    <div id="attachment_183" class="wp-caption alignleft" style="width: 310px"><a href="http://solarbus.org/blog/wp-content/uploads/2010/10/P1040634.jpg"><img class="size-medium wp-image-183" title="P1040634" src="http://solarbus.org/blog/wp-content/uploads/2010/10/P1040634-300x225.jpg" alt="" width="300" height="225" /></a><p class="wp-caption-text">hello</p></div>

    now this is confusing to me because it references a class “wp-caption alignleft” but there is no reference to this anywhere in my stylesheet. Surely this must be defined somewhere? is there anywhere else I could look and just adjust the style?

    Thread Starter garybeck

    (@garybeck)

    15 years, 8 months ago

    well, perhaps the theme writer just didn’t define these classes and the default is no style.

    I took a snippet of your code

    #content .wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;}

    and plopped it into the end of my stylesheet and guess what… it looks nice and pretty now. I guess that’s what I was missing.

    thanks very much, I really appreciate it!!!

    Rev. Voodoo

    (@rvoodoo)

    15 years, 8 months ago

    sure, you may need to use other snippets from that code as well. If your theme was missing that bit, more may be missing. Just remember in the future, if you run into any strange alignment issues, etc, the twentyten theme’s style.css is a good place to look for advice.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘"visual" tab different from preview and live post’ is closed to new replies.