Posted 4 years ago #
I just started my blog here but the images have no padding, also between each post there isn't enough room.
On the first 3 posts I added on the image code when sent to the editor align='left' but adding border='10' dont make image padding.
Looks like crap...I dont know much about css but where in the style sheet I should change the image padding and how ?
And how could I have more empty room between posts?
Thanks :)
Posted 4 years ago #
Ok I read the codex and it says to add this into the css below:
p img { padding: 0; max-width: 100%; }
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
but I cannot add img.right or img.left to the css, should just add one .right class and on .left class?
Where should I add it exaclty?
What about the P? Man this is confusing
when you are writing content and insert an image, you can add the class to the img tag, as in
<img src="whateverpathyouuse" class="left" />
OR, and this is the more efficient way...
1) open the wp-includes/js/quicktags.js file
2) create a new quicktag entry
3) either add the new quicktag to your own style.css sheet or modify the admin.css file in the wp-admin directory to add the quicktag to the list of tools there.
Here's what you do:
1) in Manage>Files, navigate to:
/wp-includes/js/quicktags.js
2) copy one of the entries, such as:
edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);and paste it below the one you copied.
3) change it to something like:
edButtons[edButtons.length] =
new edButton('ed_leftpic'
,'Photo Left'
,' class=\"left\"'
,''
,''
);4) repeat for picright (copy, paste, edit to do the obvious) and save the updated file.
5) if needed, you can style the new quicktag tool by editing the wp-admin.css file in your wp-admin folder (or by adding a new style for #ed_leftpic in your style.css file in your theme)
Then, to use your new quicktag tools, refresh the page you are editing (you should see your new tools appear in the toolbar)
After you insert an image, look for that markup in the html editing field (or, if you are like me and just turn off visual editing, this will just be in the content field), place your cursor in the <img /> tag and click the "Photo Left" or "Photo Right" button as desired.
I make custom tools for all my clients' wp sites to suit the stylesheet I create for them, from custom class headings, lists, images, etc... even an external link versus internal link tool. It's a GREAT WordPress feature that everyone should make use of.
HTH
Posted 4 years ago #
ty for you reply but I'm a comple nOOb and I cant even add the img.right and img.left to the css style, I guess adding the class="left" to the image is the easy part..here is the whole style could you plesase reply with the img.left in there? Thanks! ! :)
Description: Totally liquid three-column layout, clean and simple.
Author: Kaushal Sheth
Author URI: http://www.kaushalsheth.com/
*/
/*#############################################################
Name: Fluid Solution
Date: 2006-09-06
Description: Totally liquid three-column layout, clean and simple.
Author: Viktor Persson
URL: http://arcsin.se
Feel free to use and modify but please provide credits.
#############################################################*/
/* standard elements */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a img
{
border:none;
}
body {
background: #FFF url('img/bg.gif') repeat-x;
color: #444;
font: normal 62.5% "Lucida Sans Unicode",Verdana,sans-serif;
padding-top: 40px;
}
p,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
li {
list-style: none;
}
h1 {
font-size: 1.4em;
}
code {
background: url('img/bgcode.gif');
border: 1px solid #F0F0F0;
border-left: 6px solid #F06;
color: #444;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
blockquote {
background: #FBFCF5;
border-bottom: 1px solid #EED;
border-top: 1px solid #EED;
color: #444;
display: block;
font: normal 0.9em Verdana,sans-serif;
margin-bottom: 12px;
padding: 12px;
}
h1,h2,h3,h4 {
font: normal 1.2em "Trebuchet MS",sans-serif;
color: #ff02a8;
}
/* misc */
.clearer {
clear: both;
}
/* header */
.header {
background: url('img/stripes.gif') no-repeat;
border-bottom: 1px solid #EEE;
height: 160px;
margin-bottom: 24px;
}
.header h1 {
color: #222;
font: normal 4em sans-serif;
margin-top: 40px;
text-align: center;
}
.header h1 a{
color: #222;
text-decoration:none;
}
.header h1 a:visited
{
color: #222;
text-decoration:none;
}
.header h2 {
border-top: 1px solid #EEE;
color: #666;
text-align: right;
}
.header h2 span {
background: #222;
color: #EEE;
padding: 0 6px;
}
/* left side (main content) */
.left {
margin: 0 42% 20px 3%;
}
.content .descr {
color: #06F;
font-size: 1.2em;
margin-bottom: 6px;
}
.descr a,.descr a:visited
{color: #06F;
}
.content li {
list-style: url('img/li.gif');
margin-left: 18px;
}
.content h1 {
font-size: 2.4em;
margin-bottom: 4px;
}
.content a,.footer a {
color: #ff02a8;
text-decoration: none;
}
.content a:hover,.footer a:hover {
color: #444;
border-bottom: 1px solid #F06;
}
/* nav & subnavigation */
.nav,.right {
margin-bottom: 20px;
position: absolute;
top: 40px;
}
/* navigation */
.nav {
right: 23%;
text-align: center;
width: 17%;
}
.nav .logo {
background: url('img/logo.gif') no-repeat center top;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
height: 159px;
}
.nav h1 {
color: #F60;
margin: 12px 0;
}
.nav li {
border-bottom: 1px solid #EEE;
}
.nav li a {
color: #888;
display: block;
font: normal 1.4em serif;
padding: 8px 0;
}
.nav li a:hover {
background: #FAFAFA;
color: #ff02a8;
}
/* subnav */
.right {
background: #222;
right: 3%;
width: 18%;
}
.subnav {
padding: 12px 12px 0;
}
.subnav h1 {
color: #ff02a8;
font-size: 1.4em;
height: 20px;
margin-left: 8px;
}
.subnav ul {
margin: 0 0 16px;
padding: 0;
}
.subnav li {
list-style: none;
margin: 0;
border-bottom: 1px solid #333;
}
.subnav h1 a
{
color: #ff02a8;
}
.subnav li a {
color: #777;
display: block;
font-size: 0.9em;
padding: 3px 6px 3px 8px;
text-decoration: none;
}
.subnav li a:hover {
color: #DDD;
}
/* round edges */
.roundtl,.roundtr,.roundbl,.roundbr {
background: url('img/round.gif');
height: 16px;
width: 14px;
}
.roundtl,.roundbl {
float: left;
}
.roundtr,.roundbr {
float: right;
}
.roundtr {
background-position: right top;
}
.roundbr {
background-position: right bottom;
}
.roundbl {
background-position: left bottom;
}
/* footer */
.footer {
color: #666;
border-top: 1px solid #EEE;
font: normal 1em Verdana,sans-serif;
margin: 0 3%;
padding: 8px 6px;
}
/*post stylng*/
.post{margin:0 0 25px 0;}
.post .info{
padding:2px 3px 3px 8px;
border:1px solid #e3e4e4;
background-color:#f5f5f5;
font-size:0.9em;
color:#505050;
}
/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}
#commentform {
margin: 1em 0;
background: #ffffff;
width: 280px;
}
#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform textarea:hover {
background: #FFFFFF;
border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
background: #ffffff;
border: 1px solid #939793;
}
#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}
you really need to understand css and how to use it in combination with your markup (html) to be effective in this. I'd start with that - get a book about how to apply css to html tags and such.
you DON'T add img.left to the style sheet... you create a class in your style sheet
.left {
float:left;
/*whatever other properties and values you want*/
}
THEN, in the actual PAGE or POST you are writing in the admin pages, you insert an image, which means you are using the <img /> tag.
After that image is inserted, you modify the tag to add class="left" inside it. It will automatically use the properties you've given to the class .left in the style sheet.
There's a lot more to using CSS than that, though, so a better understanding of it would be really valuable to you.
This topic has been closed to new replies.
