margins

miharbio
(@miharbio)

11 years ago

Hello,

I am trying to figure out which classes (I think that’s what they’re called) I am to target in the stylesheet in order to change the margins of posts and/or pages.

I suppose there is no way to have different margins for different posts?

Also, in creating the child theme, I simply copied everything from the spun style.css in to the child style.css and so, then, I change whatever values in the child stylesheet. Something tells me this isn’t standard practice? But, I thought it would be easier for me? Not sure…

Thanks.

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years ago

Open your webpage in Google Chrome.
Right click on the page element you want to modify.
Select ‘Inspect element’.
A new toolbar appears. Look to the right. Look at the CSS.

You should see some CSS selectors that you need to target there.

I simply copied everything from the spun style.css in to the child style.css

That’s duplicating code.
You’re already copying the spun styles over through the @import line.

Thread Starter miharbio
(@miharbio)

11 years ago

Thanks!

I think I can go from here..

Just a few more things… I think classes are within selectors, is that right? So it seems like there are several different selectors, like “summary”, “textarea”, “body” but the same classes can be under each?

And so wordpress processes the original stylesheet through the import line, then any classes or selectors or values in the child stylesheet which differ from the original stylesheet are processed and the old ones are disregarded… do I have that right?

And, in the element inspector thingy, what does it mean when certain things are crossed out?

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years ago

And, in the element inspector thingy, what does it mean when certain things are crossed out?

They aren’t valid CSS; there’s a syntax error – OR – They are being overridden by other styles.

And so wordpress processes the original stylesheet through the import line, then any classes or selectors or values in the child stylesheet which differ from the original stylesheet are processed and the old ones are disregarded… do I have that right?

Right.

Just a few more things… I think classes are within selectors, is that right? So it seems like there are several different selectors, like “summary”, “textarea”, “body” but the same classes can be under each?

Not sure what you mean.
Classes start with a full stop.
IDs start with a hash tag.
HTML elements have neither. They are as-is. They just don’t have the greater-than and less-than characters.

Thread Starter miharbio
(@miharbio)

11 years ago

This was a big help! Thanks!
Thread Starter miharbio
(@miharbio)

11 years ago
Just one more thing! If you would…

If upon inspecting an element I see this:
```
media="all"
.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
margin: 0 0 1.5em;
padding: 70px 50px;
width: 700px;
height: auto;
z-index: 10;
}
```
It seems that there are three different elements in some sort of hierarchy, where the final elements, not sure what to call them (“margin”, “padding”… etc…”), receive values….

So I can single out any of the elements that begin with a “.”, classes, I think, to make adjustments, but what is the very first thing? “media=all”, do I need that?

The other thing I don’t really understand is how classes appear more than once. I suppose this is a much bigger question than I realize, but I don’t think I can effectively make changes unless I understand this… I think I have read something about “inheritance”, which would render certain changes to certain classes useless under certain circumstances… not sure..
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years ago
The “media=all” is not something you have to write in your CSS. It’s the developer tool’s way of saying this style applies to all types of media. You may want to add it in when it says to apply styles for only particular screen resolutions.

These classes;
```
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results
```
All convey four different elements. Yes, you single out one of these four elements that you need to apply the style to.

It seems that there are three different elements in some sort of hierarchy, where the final elements, not sure what to call them (“margin”, “padding”… etc…”), receive values….

The margin style;
```
margin: 0 0 1.5em;
```
Is just a fancy way of saying;
```
margin-top: 0;
margin-right: 0;
margin-bottom: 1.5em;
margin-left: 0;
```
If you want to change just the margin-top, you can just specify that style;
```
margin-top: 10px;
```
The other thing I don’t really understand is how classes appear more than once.

Classes just identify certain elements that appear more than once on a webpage.

Instead of writing different classes for different elements;
```
<div class="column1"> ... </div>
<div class="column2"> ... </div>
<div class="column3"> ... </div>
```
And writing this CSS;
```
.column1,
.column2,
.column3 {
 float: left;
}
```
You can write this HTML and CSS;
```
<div class="column"> ... </div>
<div class="column"> ... </div>
<div class="column"> ... </div>
```
```
.column {
 float: left;
}
```
It just means you can shorten down the code and everything makes a lot more sense.

What about IDs? IDs you certainly must not use more than once on a webpage. Classes are made to circumvent this. Classes are made to be used more than once.
Thread Starter miharbio
(@miharbio)

11 years ago

hmm…. I think I’m getting it… what has thrown me off is how the stylesheets don’t have any html… so I’m just guessing which classes I need to change the styles of…

But still, figuring out which class or ID I need to target doesn’t seem to be a simple task… if you look at: http://solfulsoul.com/sound-sounds/ I’m trying to remove the space on the left.. or center it, I guess you would say… but I can’t figure out what needs to be changed..

Can I “define” a class (not sure if that’s what you’d call it) within a post or a page? Say I want only one specific page or post to deviate from the standard style of the rest of the posts and pages.., can I do that?

Thread Starter miharbio
(@miharbio)

11 years ago

I also can’t figure out what controls the size of the cell, as there should be no line breaks in each one… I’m guessing it’s the margin/padding…
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years ago
if you look at: http://solfulsoul.com/sound-sounds/ I’m trying to remove the space on the left.. or center it,

In Google Chrome’s Inspect element tool, right click on the space you want to eliminate.

Then hover your mouse over the HTML elements in the Inspector toolbar.
You’ll see some green, orange and blue colours.

Green = Padding
Orange = Margin
Blue = Normal width

So, here’s the first spacing issue you’ll need to address: http://snag.gy/FO2pA.jpg

Here’s the next: http://snag.gy/NjfTk.jpg

And possibly the next: http://snag.gy/Braa2.jpg

Can I “define” a class (not sure if that’s what you’d call it) within a post or a page?

Certainly. Look at the <body> element in the inspector tool. You’ll notice loads of classes. Some of which are specific to the template or that particular page:
```
<body class="page page-id-6671 page-template-default custom-background">
```
For example, if you wanted to apply some styles to only that page, you would construct this CSS;
```
.page-id-6671 #primary {
 margin-left: 0;
}
```
Thread Starter miharbio
(@miharbio)

11 years ago

I appreciate all the guidance! I think there a still a few things I’m unclear about.. but it’s hard to say exactly what..

I tried using the page-specific class to experiment with some style properties, but it would only result in odd changes on certain parts of the page…

I think I may resort to simply formatting my content to conform to theme, as it seems that spacing is not the easiest customization to be done.

I’m curious, though, about some of the technical aspects here. From what I’m understanding, HTML is used to “declare” or “define” classes, and then CSS is used to control various properties of classes.

So, I’m fairly certain that there is nothing in the code which “declares” a post/page-specific class (like .page-id-6671) so how are those classes generated? It doesn’t seem that the theme formats them directly?

Also, I’m clueless as to how IDs fit in to all this. What does #primary, in your above example code do?

I’m always scouring the forums and support docs for information here and there, but it’s always difficult to figure out where to start… learning-by-hacking, has its drawbacks =)

really, thanks for the help though!

Theme Author Caroline Moore
(@sixhours)

11 years ago

So, I’m fairly certain that there is nothing in the code which “declares” a post/page-specific class (like .page-id-6671) so how are those classes generated? It doesn’t seem that the theme formats them directly?

This is done via a WordPress function called body_class(). You’ll see it applied to the BODY tag in header.php. Many classes are output not by straight HTML but with PHP or WordPress template tags. You’ll notice another one within the content templates of the theme called post_class(), for example.

Also, I’m clueless as to how IDs fit in to all this. What does #primary, in your above example code do?

You can read more about CSS IDs and classes here. IDs are like classes, in that you can target them with CSS to apply certain properties, but they only apply to one HTML element, whereas classes can apply to multiple elements.

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

The topic ‘margins’ is closed to new replies.