Identify CSS to edit with Inspect Element
-
Hello,
I have a blog on wordpress.com (not .org as I needed something not too technical) and I wanted to do some basic customisation of the CSS but I have trouble doing what I want. I hope you will be able (and willing ;) to help me.
I have seen that to identify which element to edit, the best is to go on the blog itself, select the elements and click on “Inspect Element” (on Google Chrome). Then 3 different cells appear (example here) but the thing is that I don’t know which element to use.
A concrete example (using the screenshot mentioned above): if I want to reduce the space between the 2 images of the left column/menu, how do I do that? Should I just take
.widget-area { margin-top: 0; }and change the margin-top: to like -20? I guess that’s not good but I don’t know what to do.
Basically here what I need is help to identify which element to edit in the CSS then. I have some very basic CSS knowledge so I know more or less that margin and padding will be interesting for me in the case of reducing space between elements.
I hope I’m clear! :)
Thank you.The blog I need help with is: (visible only to logged in users)
-
To identify which element to edit, we should first understand what are is the result we are after? If we know what we need to change, then we can figure how to change it.
What is that you want to change or style differently on your blog?
-
Hello chaitanyamsv,
There are several things I want to do, but let’s just give 2 of them as examples:
1. In the left column of my blog, I would like to reduce the space between the different elements (see this image).
2. In the main body I don’t want the Category name to appear (see this page with “Category: English”) and I don’t want the Tag name neither (see this page with “Tag: English”).
Thanks. :)
-
1. The site header and all the widgets beneath it have a bottom margin of 79px. We can use this CSS and reduce it by half using this CSS:
.site-header, .secondary .widget-area .widget { margin-bottom: 40px; }2. Hide all the category and tag page headers from category and tag pages respectively.
body.category header.page-header, body.tag header.page-header { display: none; }or we can be a bit specific and say,
Hide all the category-3205 (“English” category) and tag-10221 (“English” tag) page headers from category and tag pages respectively.
body.category-3205 header.page-header, body.tag-10221 header.page-header { display: none; } -
That’s excellent, thanks a lot!
And so how did you know that was the code to change? Any advice for the future so I can find what the code myself and make some tests/trials? :) -
Here are some excellent starter tutorials:
http://dailypost.wordpress.com/2013/06/21/css-intro/
http://dailypost.wordpress.com/2013/07/25/css-selectors/
http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/http://en.support.wordpress.com/custom-design/css-basics/
http://en.support.wordpress.com/custom-design/editing-css/ -
-
-
Oh I forgot one thing! I have hidden the category name as per your suggestion, but now I have a weird space at the top of the category page.
Example of a post here that is all good.
Example of a category page here with the ugly space at the top. ;) -
There is a 8.3333% of top padding coming from the following rule.
@media screen and (min-width: 59.6875em) { .site-main { padding: 8.3333% 0; } }Lower it to say 4% or even 0 if you don’ want any space at all at the top.
-
Unfortunately this changes the padding on the whole blog while I just needed the change on the
- category / tag
pages. Maybe there’s a way to combine the 2 criteria? :)
-
Hi there, we can use the archive body CSS class to limit this to only archive, tag, and category pages. Add the following to the bottom of your custom CSS.
@media screen and (min-width: 59.6875px) { .archive .site-main { padding-top: 0; } } -
-
- The topic ‘Identify CSS to edit with Inspect Element’ is closed to new replies.
WordPress.com Forums 
