WordPress.org

Forums

[resolved] [Theme Oxygen] - Edits to style.css Won't Work (26 posts)

  1. fabpub
    Member
    Posted 1 year ago #

    Hello,

    I am new to WordPress in general and editing css so I am very much at the stage of playing around with my website. I can do all the basic edits fine but when I go to the style.css, everything I try doesn't seem to take effect. I could delete a whole section and update the file and it won't make any difference.

    For example this is my step by step process of what I'm doing:
    1)I go to Appearance - Edit
    2)Select Theme to Edit: Oxygen (Press select)
    3)Select Stylesheet (style.css)
    4)Change text-transform: uppercase; to text-transform: lowercase;.
    5)Select Update File (File says it was updated successfully)
    6)Check my website, see no changes have taken affect. I refresh it / delete the cache / press shift + r.
    7)Nothing has happened and I begin pulling out my hair in frustration as I repeat the cycle again and again.

    Can someone see from my steps where I am going wrong and point it out to me and tell me how I can make the changes I make to the style.css actually take affect?

    I would most appreciate it.

    Thank you.

    Joe

  2. stephencottontail
    Member
    Posted 1 year ago #

    Can you post a link to your website? Also, you shouldn't be editing the theme files directly, as you will lose any changes if the theme gets updated in the future.

  3. fabpub
    Member
    Posted 1 year ago #

    Thanks stephencottontail.

    http://www.fablespublishing.com

    I know I shouldn't and at the start I was copying the theme into a word document, doing the changes there and pasting them in but as they weren't working, I reloaded the original and have just been trying to work off that directly to see if I can solve the problem.

  4. fabpub
    Member
    Posted 1 year ago #

    Just to add, I know a lot of that menu text on the website is lowercase but that uppercase - lowercase was just an example. I'm actually trying to get that to be normal (text-transform: none;) but without luck, amongst other things.

  5. stephencottontail
    Member
    Posted 1 year ago #

    It's best to edit CSS in a text editor instead of Microsoft Word, as Word may do undesirable things like automatically replace your straight quotes with curly quotes (which won't work in your CSS code) or add HTML formatting that may inadvertently be pasted into your CSS code, which would also cause your code to not work correctly.

    With that being said, I don't see anything particularly wrong with your CSS right now. I see that you were able to get your menu items to display in lowercase text by using:

    #menu-primary li a {
    text-transform: lowercase;
    }

    and if I change that to text-transform: none;, the first letter of your menu items becomes capitalized, and if I change that to text-transform: uppercase;, your menu items become all capitals.

  6. fabpub
    Member
    Posted 1 year ago #

    I genuinely don't see what you're seeing here and maybe that's why I'm having trouble because it's my lack of understanding.

    }
    #menu-primary li li:first-child, #menu-primary li li.current-menu-item li:first-child { border-top: none; }
    #menu-primary li li a, #menu-primary li li.current-menu-item li a {
    	font-size: 1.166666666666667em; /* 14 / 12 = 1.166666666666667 */
    	text-transform: none;
    	color: #888;
    	margin: 0 5px;
    	padding: 12px 15px;
    }

    Which is what I see in my code. You say you see text-transform: lowercase; for that section while mine is none yet the first letter of my menu is not capitalized.

  7. fabpub
    Member
    Posted 1 year ago #

    Sorry, learning as I go here.

    I've just pressed 'Shift+F5' on my website and I found what you were looking at

    #menu-primary li a{
    	font-family:'Abel','Helvetica Neue',Helvetica,Arial,sans-serif;
    	font-size:1.333333333333333em;
    	font-weight:400;
    	line-height:1em;
    	margin-right:1em;
    	display:block;
    	text-transform:lowercase;

    I changed that there to text-transform: none; and like you, it worked no problem.

    So I went into my Appearance - Edit - to the css code there and located that particular strand of code and found

    text-transform
    wasn't even there. I wrote in
    text-transform:none;
    but there still wasn't any change.

    If you don't know what I've messed up by my ramblings, I'm wondering if as you said earlier, I messed up the code somewhere else with placing it in Microsoft Word. If that's possible, how do I get the original code back (yes, noob mistake) so I can start fresh? It's as simple as select Theme to Edit: Oxygen, right?

    By the way, thank you for your help with this!

  8. fabpub
    Member
    Posted 1 year ago #

    Ok, for an update.

    I deleted my Oxygen theme, decided to start from scratch so that I was certain the code would be fine.

    I went onto my website, pressed (shift+F5) and found exactly the little things I wanted to try. I changed the code there and they worked perfectly.

    I go to the brand new code in the Appearance - Editor section, do the exact same changes, and nothing!!!!

    I go back to the website, press (shift+F5) again and find the code never changed.

    What on earth am I doing wrong?!

  9. stephencottontail
    Member
    Posted 1 year ago #

    You say you're not receiving any errors when you use Appearance > Editor, correct? Can you verify that you're editing the correct theme? The Editor allows you to edit any theme that you have installed to WordPress.

    Also, I notice that you're now using the Twenty Fourteen theme. Can you post an example of CSS that you've added that doesn't work?

  10. fabpub
    Member
    Posted 1 year ago #

    Hi Stephencottontail,

    First off, let me remind you that I am extremely new and know nothing. My afternoon has been trying to learn what I can and I'm not sure if it's because I'm a WordPress.com rather than a WordPress.org or if its because I didn't have a FTP set up. (Any of these making you go "oohhhhh"?)

    My conclusion has been, whatever the reason, that I can't edit the Oxygen theme. As an example of a code, all I did just to try after I deleted it and reinstalled it was to change text-transform: lowercase; to text-transform: uppercase on the primary menu. It worked when I used the Firebug application (shift+F5) but when I altered the same line of code in the Editor, it said it was successful but just wasn't working.

    I've downloaded an FTP (FileZilla) since and after setting it up, also noticed the Oxygen theme wouldn't show up in my directory. The only three that would were Twentythirteen, Twentytwelve, Twentyfourteen so I couldn't even make it a rewritable/editable file if that was the problem. I don't know why it's being such an issue for me but maybe you might after this update.

    So I changed over to the Twenty Fourteen Theme with the view that maybe I can at least get this to work as I want and learn why the Oxygen theme failed me after.

    Do you have any thoughts to what the problem was?

    Thanks though anyway for helping either way.

    Best regards,

    Joe

  11. stephencottontail
    Member
    Posted 1 year ago #

    I'm a bit confused. You said that you were a WP.com user, but your site looks like that of a self-hosted WordPress install. Also, you wouldn't be able to access things like the Editor on a WP.com install.

  12. fabpub
    Member
    Posted 1 year ago #

    I'm sorry, yes I am using a self-hosted WordPress install. I'm using Spiralhosting as my host server to be exact. Would that make any difference to my issue?

  13. fabpub
    Member
    Posted 1 year ago #

    And to add to my confusion, I just tried the exact same thing of changing an Uppercase headline to a lowercase headline and it worked in the Twentyfourteen theme. So I don't know why it worked in this theme and not in the Oxygen theme.

  14. stephencottontail
    Member
    Posted 1 year ago #

    I remember that you were able to change the menu items to lowercase when you were using the Oxygen theme. When you use Appearance > Editor, do you receive any errors when you save the file? If you use a custom CSS plugin, do your CSS changes take place?

  15. fabpub
    Member
    Posted 1 year ago #

    No, I never changed it to lowercase. That was actually part of the original theme. I was trying to get it to either uppercase or to normal but it was never taking effect.

    No, I never received any errors.

    I honestly don't know anything about plugins yet, haven't tried any so I can't answer the question but I could try and see.

  16. stephencottontail
    Member
    Posted 1 year ago #

    Forgive me if it seems like I'm asking the same questions over and over, I'm still trying to get a handle on exactly what the problem is. What exactly are you trying to accomplish (i.e., changing the font color of the menu, changing the font used for the page titles, etc.), what steps have you tried (including what CSS code you used), and what happened afterwards?

  17. fabpub
    Member
    Posted 1 year ago #

    No problem. If you can get a handle of the problem, all the better for me! ;)

    Ok, basically at the point you saw the website this morning, I had only been playing around with the customization options. I wanted to delve a little deeper though and start using the CSS.

    I decided to try and start with turning the menu headlines from lowercase to either uppercase or normal. Something simple. I found out what the code was through some research, found where the line of code was in the CSS and changed transform-text:lowercase to transform-text:none. I updated the file but no changes took effect. I deleted my cache, refreshed numerous times, rewrote the code and basically spent all evening yesterday using the CSS trying to make a change but to no avail.

    Changing the case of the letters was all I was trying to achieve just so I can try and learn more about CSS.

    This morning you said that you couldn't see much of a problem. I learned from there about Shift+F5 which allowed me to look at the code and experiment and everything I was trying was working.

    I decided after talking to you that I must have made some mistake somewhere in the code. Not knowing what, I deleted the Oxygen theme and reinstalled it so that I would have the default CSS. I tried again and changed ONLY the lowercase-uppercase code line but it still didn't work. I double checked several times that it was the right line, but it was.

    After that, I discovered all about FTP. I downloaded FileZilla, got it all hooked up but when I went into my directory, only my three default themes, Twentytwelve; Twentythirteen; Twentyfourteen, showed up and not my Oxygen theme. Why, I couldn't tell you.

    I didn't know what to make of that and I didn't know what else to look up or what other youtube video to watch after so I decided to make the change to Twentyfourteen to see what would happen. The result is that I can seem to implement changes to that theme through the Editor but not Oxygen. I haven't tried anything else yet.

    Any clearer?

  18. stephencottontail
    Member
    Posted 1 year ago #

    If you go to your Dashboard and then go to Appearance > Themes, is Oxygen listed there? If so, can you switch back to that theme? If not, you can reinstall the Oxygen them by clicking on the "Add New" button and searching for "Oxygen" in the box that appears. Also, I noticed you mentioned "transform-text", but the correct CSS is "text-transform".

  19. fabpub
    Member
    Posted 1 year ago #

    Yes, Oxygen is listed there. I can make the adjustment now.

    And while that mess up could have been a good reason why I failed previously to make it work, I only ever changed the lowercase to uppercase. Never rewrote the text-transform bit.

  20. fabpub
    Member
    Posted 1 year ago #

    So this is what my CSS says in my Oxygen theme:

    }
    #menu-primary li a {
    	font-family: 'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 1.333333333333333em;
    	font-weight: 400;
    	line-height: 1em;
    	margin-right: 1em;
    	display: block;
    	text-transform: uppercase;
    }

    I've changed nothing else in this document. So what you should see on my website in the primary headline is -

    HOME / ABOUT FABLES PUBLISHING / NEWSROOM.

    Instead, it's

    home / about fables publishing / newsroom.

  21. Andrew
    Forum moderator
    Posted 1 year ago #

    This is the stylesheet your theme is loading: http://fablespublishing.com/wp-content/themes/oxygen/style.min.css?ver=0.5.4

    Why not avoid all this hassle and use a CSS plugin to hold these modifications?

  22. fabpub
    Member
    Posted 1 year ago #

    Hi Andrew,

    Thank you for this. Yes, in this stylesheet it says my menu-primary line is loading up text-transform: lowercase while I have it set up in my Editor text-transform: uppercase. Though the file is being accepted when I upload it, it's just not getting through.

    I think I will have to get a CSS plugin to resolve this issue as you and stephencottontail have suggested. I don't know anything about them though hence why I haven't tried it yet. For another day's battle.

    Though I would like to know what's gone wrong and solve the mystery!

    I'll leave this topic open for a little while longer, see if anyone can shed some light on it before I close it.

    Thanks to you both.

  23. Andrew
    Forum moderator
    Posted 1 year ago #

    Specifically what's wrong is you're editing a file called "style.css" whereas the file your theme is loading is actually "style.min.css".

  24. Andrew
    Forum moderator
    Posted 1 year ago #

    But editing the theme's files is the wrong way to go about it, and I'm saying why are you bending over backwards doing things the wrong way when you could create a Child Theme or use a Custom CSS plugin to hold your modifications. Some people just edit the theme's style.css file because it's easier, but obviously it's not the case here.

  25. fabpub
    Member
    Posted 1 year ago #

    Ahhhhhhh, I see. Okay then, I will give that a go tomorrow. Thank you Andrew, really appreciate that clarification. stephencottontail, thank you for all the time you put into this mystery, which turns out, wasn't much of one at all.

  26. fabpub
    Member
    Posted 1 year ago #

    Another day spent learning the perils of CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags