Check my css: adding a class?
-
I would like all my images to have spacing of 0px above, 40px below and a 3px black border around them. Up to now I have been doing it manually in every image by using the visual editor. This creates code that looks like:
<a href="http://alienheartbeat.files.wordpress.com/img.jpg" target="_blank"><img class="aligncenter wp-image-2453" style="margin-top:0;margin-bottom:48px;border:3px solid black;" title="text" alt="text" src="http://alienheartbeat.files.wordpress.com/img.jpg" width="1200" height="602" /></a>I am using the custom design upgrade.
At the moment my css has the following which relates to images:img.aligncenter { clear: both; }(this was given to me – not my own work)
I want to take the items I have been adding manually by image and put them in the css, as all good gurus have told me I should. How do specify in my css for images
margin-top:0;margin-bottom:48px;border:3px solid black?I have done ‘inspect element’ on my images but am not clear on how to use classes. Do I define a new class:
img.myclass { clear: both; margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }and then use it by:
<a href="http://alienheartbeat.files.wordpress.com/img.jpg" target="_blank"><img class="myclass wp-image-2453" title="text" alt="text" src="http://alienheartbeat.files.wordpress.com/img.jpg" width="1200" height="602" /></a>or do i redefine the img class:
img { clear: both; margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }and expect it to be automatically used:
<a href="http://alienheartbeat.files.wordpress.com/img.jpg" target="_blank"><wp-image-2453" title="text" alt="text" src="http://alienheartbeat.files.wordpress.com/img.jpg" width="1200" height="602" /></a>Also, I am not sure what the meaning of wp-image-2453 is in this context.
I am using the Portfolio theme.
Kindly excuse my ignorance – this is the first time I have tried my own css.The blog I need help with is: (visible only to logged in users)
-
No, you don’t define a custom class: you would do that if you wanted to style only some images a certain way. If you want the same styling for all your centered images, you add this:
img.aligncenter { border: 3px solid #000000; margin-bottom: 48px; margin-top: 0; }“wp-image-2453” is the ID of that particular image. You might need it if you wanted to change the styling of that image only.
-
Hi there, and you are pretty close. You can use the following. I’ve made a slight change to your selector by removing the “img” at the beginning.
.myclass { clear: both; margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }Then after you insert your image into the post, click on the image to hightlight it, click on the image edit icon at top left of the image in the editor and in the class field, replace the aligncenter with “myclass” without the quote marks and update.
Alternately, you could do this instead, which would make all center aligned image you insert into your site have the styling you want, without having to change the class when inserting an image.
img.aligncenter { margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }I left out “clear: both;” since it is already declared in the original CSS.
The “wp-image-2453” is the image specific class for that image and is generally not used (not declared in the CSS) but does give you the ability to create CSS rules for specific images if you need to. 2453 is the WordPress internal ID number for that specific image. Each image has a unique ID number, as does each post, page, category and tag.
-
@thesacred path / @justpi
Thanks very much. Good to know I was on the right road, even if I was driving a lame horse.
But I realise I created 1 mis-impression that affects the solution: I want the new formatting rules to apply to all images not just to center aligned images. Most images are center aligned, but not all.
So I can still use the myclass method:
.myclass { margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }and adding myclass to the CSS Class field in the image editing dialog for all images.
But if i want to add to the class definition for all images how do I do it?
(I ask this to help me understand better how this works)
Is it just:img { margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }adding nothing in the CSS Class field in the image editing dialog.
(In both cases I would just leave the
img.aligncenter { clear: both; }
in my css as it is, to just apply to center aligned images).Also, if the image class wp-image-2453 is not being used,
can I just remove it from the CSS Class field in the image editing dialog? -
a) See recent reply of mine on using your own classes:
https://en.forums.wordpress.com/topic/styling-text-and-block-quotes-suburbia-theme?replies=2#post-1520412
As I (hope I) explain in that reply, and as I said in my previous reply above, you only need custom classes when you want to change some instances of a certain element. For example, if you wanted styling A for your images in general but styling B for the second image in a certain post, the third and seventh images in another post, and a couple of images in another post, you’d use a custom class for styling B. You never need a custom class when you want to change all the instances of an element.b) No, you won’t use the generic selector “img”, for two reasons.
First, it would have an effect only if the CSS of the theme didn’t include similar styling for more specific selectors. For example, the CSS of the theme you’re using says add a 1.85714rem bottom margin to all left-, right- and center-aligned images; so if you add a 48px bottom margin to “img”, it will apply to all images except those that are left-, right- or center-aligned.
Second, you don’t really want to change all your images. (You don’t want that border etc for your header image, or your avatar in comments, or the images in your footer widgets, do you?) What you want to do, if I understand correctly, is set that border and those margins for all the images you insert in your posts. In that case, the right thing to add is this:.main-content img { border: 3px solid #000000; margin-bottom: 48px; margin-top: 0; }c) Apparently someone told you to add “clear:both” to center-aligned images. I don’t see why. Clear:both means stop the wrap-around effect of left- and right-aligned elements; center-aligned images don’t allow wrap-around anyway, so adding the “clear:both” command to center-aligned images is superfluous.
-
@justpi, thanks very much for the detailed explanation.
Followed the link, re-read wpbtips and (using the method suggested) checked the theme css, installed firebug to check a page and went through the http://www.w3schools.com/css/ tutorial.
So now, while I have not yet found enlightenment, the light behind my eyes is a little less dim.
I can see in the theme’s css in the image section that, as you say, the CSS of the theme does include similar styling for more specific selectors, eg for img.alignleft, which would defeat my method.
img { margin-bottom: 48px; margin-top: 0px; border: 3px solid black; }Also, clearly I would not want it to apply to all images, just main body images. And I can see that the main body is included in a section “main-content”
What has taken me the most time to understand is why it is:
.main-content img {
rather than
.main-content.img {I think the answer is .main-content img {
selects all img elements that are children of anything with the given class .main-content
(and we are inside the <section /> with class=.main-content)whereas .main-content.img {
Is of the form “element.class” which selects elements that have the given class.
but .main-content is not an element but a class so does not fit the syntax.Will test and implement this tomorrow so best to dealy marking as resolved till then.
(wrt “clear:both”, it was suggested by the theme’s authors and meant to defeat a rendering bug in which some of my images were overlaying each other. Agree it seems an unlikely solution – will test it again later.)
- The topic ‘Check my css: adding a class?’ is closed to new replies.
WordPress.com Forums 