CSS help please

I want to be able to edit things in the CSS - simple things like chnging the size of font, etc - this is something I am used to doing (normally use iThemes Builder) I have searched the forumsand found that I needed to copy a css from the parent theme to the child theme (child is activated, parent never has been) - I put a copy of the layout.css into the child theme and I can see it and edit it successfully in the editor area - I am testing this by picking a heading and changing the font size to something rediculous so that I can see on the live site if I am indeed editing the correct area.

As I said, the edits I make in the childs layout.css are taking and saving but the changes are not happening on the site??

So have I put this layout.css in the wrong place? should I have copied it's entire contents and put it inside the child style.css? if so, where should I put it?

Any help to end my frustration appreciated.
Thanks
Sue

PS/Edit - sorry should have mentioned, using Network Theme - site is in maintenance mode but can open it up if someone wants the link.

  • idevguy
    • Design Lord, Child of Thor

    There are a few variables that could alter how this works but the main thing is that the css file you edit has to be called out in the head section (if you view your pages source code you will see lines that look like <link target="_blank" href="http://your-domain/wp-content/yourtheme/style.css" rel="stylesheet" type="text/css" media="all" />

    If you have css entries that you want to edit you will need to edit that file, simply copying a stylesheet to a directory won't include those entries on the page. Without knowing all the details I would just be making a guess, but if I had to guess I would say that you should copy anything you need to add to the child theme and copy/paste those entries to the child themes css file and make your edits there...

    with css entries things happen in order and the last declaration specified wins so as an example if your H1 tags are styled by the first stylesheet thats listed in the head section of your header.php file and that same H1 tag is specified again later by another sytlesheet or inline it will be the last entry that wins (in most cases)

    If what I have said just confuses things more let me know where I can take a peek at your site and I will be able to give you more specific help :slight_smile:

  • idevguy
    • Design Lord, Child of Thor

    The last css file that is included in your site is the one at http://www.dancecorner.co.uk/wp-content/themes/network/library/styles/teal.css so you could add to/edit there and not be bothered by another stylesheet taking over.

    I also noticed that there are some inline style elements on your page for things like google fonts and so on, you may have to chase those down as well depending on what element you are trying to style. If you run into something you just can't change by editing a css file take a look at your pages source (view source in your browser) and find anything that starts off like <style type="text/css"> and you will see whats in there... they are mostly colors for various things.

    Also be cautious of updating your theme as any modifications you have made to that css file will be overwritten.

  • SusanHope
    • Flash Drive

    Thanks so much for your help, I will look into this more tomorrow and report back if needed.

    As for your last comment, yes I thought I was being cautious - I want to make my edits in the child theme which is why I copied one to the child theme folder - so I am still not sure which file I should copy there so that I am only editing the child theme in future.

    Thanks
    Sue

  • idevguy
    • Design Lord, Child of Thor

    sounds good... also, you could go to the file at /wp-content/themes/network-child/style.css and uncomment the line that says /*@import url( _inc/css/child.css );*/ (remove the /* and */ to uncomment)

    then add your style edits to that file, which will protect you from having your edits overwritten.

  • SusanHope
    • Flash Drive

    so are you saying, any edits I want to make have to be contained in /wp-content/themes/network-child/style.css in order for them to take effect on the site (and yes I understand all changes need to be in child themes for them not to be overwritten if the core theme is upgraded in the future?

    If yes, I think this is the part I am not sure how to do and can't find a full explanation for anywhere - do I uncomment that line and then for instance:

    a) copy the whole of the parent theme style.css into there and then make my changes OR

    b) only copy the part that I am interested in making a change to?

    c) have I got it all completely wrong LOL?

    Thanks again

  • idevguy
    • Design Lord, Child of Thor

    The words "have to" are a bit strong, you could make the edits anywhere as long as there isn't a file later in the list that will just undo whatever changes you made.. its kind of like a person asking for directions, first person says to go left, next one says go right, then another says go left and the last set of directions are the one that gets followed.

    To answer your questions:

    a) only if you want significant changes (ie almost everything)

    b) would be preferred to do this way, no sense it adding more to the mix than needed.

    c) nope, I think you just about got it :slight_smile:

  • James Farmer
    • CEO (of WPMU DEV, honest)

    @idevguy I'm gonna end up giving u all my points if I don't watch it!

    A bunch more and you could be in line for a new thing we're introducing... basically + points from other users (especially staff) plus general points = free memberships (and maybe even T shirts!)

  • MonkeyPickles
    • Flash Drive

    Apologize... 1st total noob... i have read the above threads.. but something is still missing in my gear box... here is where Im working on the site: http://nytrixmedia.com/huntz/

    Im also using the Network Theme ... I want to edit the "Green CSS" file.. to another shade of Green... Im only ever use to changing a style sheet on Wordpress through the Appearance --> Editor --> Style Sheet

    I have the Parent theme uploaded and extracted the Child Theme and uploaded and activated it.

    Do I have to modify the style sheets offline and then re upload the child theme with the new Style sheet. ? If so when I go to the parent theme Green CSS I copy that content and paste it into the Child theme CSS ? and which file.. "style.css" or "child.css"

    Then what do i do when i get here?

    /* buddypress only styling */
    @import url( ../network/_inc/css/bp-default.css );

    /* basic styling for all elements */
    @import url( ../network/_inc/css/layout.css );

    /* Uncomment the following line to use child adminbar.css but only if have BuddyPress installed */
    /* @import url( _inc/css/adminbar.css ); */

    /* Uncomment the following line and add your custom child styles to '_inc/css/child.css' */
    /*@import url( _inc/css/child.css );*/

  • Philip John
    • DEV MAN’s Apprentice

    Hiya!

    You'll need to change this

    /* Uncomment the following line and add your custom child styles to '_inc/css/child.css' */
    /*@import url( _inc/css/child.css );*/

    To this

    /* Uncomment the following line and add your custom child styles to '_inc/css/child.css' */
    @import url( _inc/css/child.css );

    Then add your custom CSS rules to child.css and they will be applied to your site!

    Phil

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.