I get how CSS works, but none of the guides explains how to begin editing
-
How do I go about actually editing CSS on a page???
I’ve read the CSS editing and CSS basic guides etc, and I’ve even managed to remove one of the things that annoyed me on my homepage when I right-clicked the sticky post on my homepage to access “Inspect Elements.” When I clicked “Inspect Elements” for the post, another page popped up with tons of HTML. I removed a couple lines of HTML and my homepage–which I could see to the left of the panel–changed. There was no “preview” button to click, nor was it apparently necessary.
Before I right-clicked on that post, I had gone to appearances->custom design–>CSS to open the design tools.
I read somewhere that I’m supposed to copy ALL of the html code that I can see when I’ve opened “Inspect Elements” and paste it into the panel (I assume the panel is the white space that’s filled with the text that begins with “Welcome to Custom CSS!”?) I wasn’t able to copy all of the text, only one line of html at a time. But that didn’t make sense to do since I had REMOVED a couple of lines. Anyway, I clicked “save”, hoping that what I had done would work. But it didn’t. Anyway, I must be missing some minor step, because I don’t get how I actually start editing. Can you please provide a step-by-step guide how to set up a page to edit?
I want to remove the date stamp on the photo–the sticky post–and the two arrows at the bottom. (The arrows were what I managed to remove when I opened the “Inspect Elements”). I know the date stamp is a permalink that can’t be removed, but the text can be hidden. Can I change the text to something else, say “Trainer by Day, Writer by Night?” Can I have that text lead to my “About me” page? I assume it has to lead somewhere, since it’s a permalink?
Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
When I clicked “Inspect Elements” for the post, another page popped up with tons of HTML. I removed a couple lines of HTML and my homepage–which I could see to the left of the panel–changed. There was no “preview” button to click, nor was it apparently necessary.
Hi Julia – Inspect Element is a way to see the CSS that’s being used in Chrome. You can make changes directly there, but it won’t be applied to your blog. That’s just a previewing pane, and its use is to (a) find the correct element that you need to target with your CSS; and (2) check to see if your change is going to work.
Once you’ve done this, though, you need to enter your CSS snippet into Appearance->Customize->CSS here and save:
https://juliatheswede.wordpress.com/wp-admin/customize.php?url=http%3A%2F%2Fjuliatheswede.wordpress.com%2FThat is how you can apply a change to your actual blog.
I read somewhere that I’m supposed to copy ALL of the html code that I can see when I’ve opened “Inspect Elements” and paste it into the panel
Where did you read this? Please do not do this as it’s unnecessary and makes it very difficult to identify any changes you have made. You should only add your own changes to the CSS editor.
I want to remove the date stamp on the photo–the sticky post–and the two arrows at the bottom.
Try the following:
.wf-active .featured-post .entry-title a {
display: none;
}It sounds like you were able to do this and preview it in the Chrome Inspector, and the step you missed is just that you needed to actually then insert the code into your CSS panel. :)
Can I change the text to something else, say “Trainer by Day, Writer by Night?” Can I have that text lead to my “About me” page?
You can change it by changing the title of that post that it leads to, but it’s not possible to make it link to a different page.
Your theme, Oxygen, is meant to show a different image there each time to highlight a particular post. I think you just want that image at the top of your site, correct? If so, you might not want to use the Oxygen “showcase page template”, but instead just use a regular front page and upload that image as your header:
https://juliatheswede.wordpress.com/wp-admin/themes.php?page=custom-header -
Hi Eurello,
and thanks for detailed response. I actually figured out how to edit CSS by asking in the CSS forum. I thought I was supposed to copy all of the original style sheet after reading what was under the heading “Maintaining your custom header” in this section. http://en.support.wordpress.com/custom-design/editing-css
The first line kind of implies this is what you should be doing. Since that’s not the case, it would be helpful to have a link there with instructions saying what exactly you’re supposed to put in the CSS editor. Some samples edits would be great, too.
Anyway, I also figured out how to remove arrows and date stamp. But there’s now an empty space where box used to be. How do I hide this?
Last, I’m writing my second post and the link I’m adding to my post doesn’t display when I’m publishing the post. Why’s that? I’m using the latest version of Chrome browser. The unfinished post is published so you can see it.
Thanks, Julia
-
Hi Julia – That bit actually warns you against doing that, but I’ll update it to make sure it’s more clear. :)
Anyway, I also figured out how to remove arrows and date stamp. But there’s now an empty space where box used to be. How do I hide this?
You can do that with this CSS:
.wf-active .featured-post .entry-title a { display: none; }Last, I’m writing my second post and the link I’m adding to my post doesn’t display when I’m publishing the post. Why’s that?
Can you please provide a bit more detail? What link are you trying to include? You can insert links in this way:
Links -
Hi again. I figured out what the problem was with the link, but thanks for swift response and for CSS code to remove white box. It worked. Regarding that text being meant as a warning, it’s not clear. But it would easily be fixed by adding the words: “which you’re not supposed to do” after the words: “which many users will do.” It may seem simple and straightforward to someone who’s used to wordpress. Don’t think it is to others:)
Thanks again for the help!
-
Hi Julia – Gotcha. I’ve edited this a bit, hopefully it’s more clear now. Thanks for pointing this out and for the suggestion!
- The topic ‘I get how CSS works, but none of the guides explains how to begin editing’ is closed to new replies.
WordPress.com Forums 