This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to create custom CSS in Alyeska child theme

  • Creator
    Topic
  • #14712
    suzen_lex
    Participant

    Hi, I can’t figure out why I can’t figure out how to make CSS changes via the Alyeska child theme. I apologize in advance if I’ve missed some simple instructions somewhere that state that I just need to copy and paste the relevant CSS from the relevant parent CSS file to the child theme’s “style.css.” I’ve read pages of instructions on your site and on the WordPress site about child themes, I”ve searched your forums, and I’ve watched a half dozen videos of instructions that you linked to, yet I still cannot figure out how to simply create CSS styles in the child theme that overwrite the parent theme CSS. I’m in a time crunch to get a temp homepage live and would really appreciate some help 🙂 Sorry again if I missed the relevant passage somewhere about this. I’ve literally spent hours trying to find it. This is my first time using a child theme so perhaps it’s just over my head. What I want to change is stuff like the contet background color, nav bar background color, maybe some other colors and font styles.
    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Author
    Replies
  • #14713
    Jason Bobich
    Keymaster

    Hi,

    Don’t worry, we’ll get you squared away. What version of Alyeska are you working with?

    #14751
    suzen_lex
    Participant

    Alyeska 3.0.3. Thanks!!

    #14752
    Jason Bobich
    Keymaster

    Starting with Alyeska 3, you simply put your custom CSS into style.css of the child theme. CSS files are positioned in a way where style.css comes after everything else. If you’re using the example child theme that comes with your theme package from ThemeForest, there should be a note in the style.css that says to put your Custom CSS there.

    #14769
    suzen_lex
    Participant

    Hi Jason,

    Thanks so much for your quick reply 🙂

    OK, so I do have the example child theme that came with Alyeska and saw that note … but …as a newbie to child themes I don’t know what that means. Does that mean I should locate the name of the style I want to change, say, via Firebug, for instance, then copy the style code and paste it into the child theme then change it to what I want? So the style in the child theme overwrites the style of the same name in the parent theme? Even though the style in the parent theme will likely be in theme.css, not style.css as in the child theme? Then do this with each specific style I want to change? I think I’d be changing styles mostly or only from theme.css.

    Again, I’m completely new to child themes so I understand that this seems like a ridiculously stupid question, but I just don’t know how to go about this initially.

    Thanks 🙂
    Suze

    #14771
    Jason Bobich
    Keymaster

    Just forgetting about WordPress, how familiar are you with CSS? Are you familiar with the general concepts of cascading staylesheets and how ine thing would take precedence over another?

    #14776
    suzen_lex
    Participant

    I think I’m reasonably familiar with CSS although am not at a high level with it. I work with it regularly in my job, but have a programmer I work with if I run into issues (he has no experience with WP, though), but I don’t have experience dealing so many style sheets like alyeska has. I do understand that if I put standard styles in the child theme like H1, H2, etc. then they will overwrite the parent theme H1, H2, etc. styles. My question, I guess, is specifically about the Alyeska-specific styles. Do I just need to locate the ones I want to change, paste them into the child theme then change them? Or is there a better way?
    Thanks again!

    #14789
    Jason Bobich
    Keymaster

    At this point, you’ve got the style.css of your child theme, and it proceeds all of the CSS files of the theme. This is already setup for you. So realistically, now we’re just talking about basic CSS overriding. We can forget about WordPress, child themes, etc, and just think CSS.

    So, you’ve got your website and it has styles applied, and you want to override them. This is where using an inspector (i.e. Firebug, Google chrome dev tools, etc) comes in handy. Without digging through any files, you can see how an element is being effected with CSS. And then with general knowledge of how things take precedence in CSS, you’ll know how to override them from your preceding stylesheet. You’re not necessarily copying from your inspector, but using as a tool to see what you need to override with the custom styles you’re going to write.

    In CSS, whatever is more specific is going to take precedence. Then, if two things are equally specific, whatever comes last is going to take precedence.

    Let’s look an example. Say you want to change something on your site, and so you inspect it. It’s some DIV with class “whatever” — You see that the theme is styling it like this:

    .whatever { ... }

    You now know that this is all that’s styling that DIV. Since you know your CSS files comes after everything, you can simply override by doing the same thing from your stylesheet.

    .whatever { ... }

    Now, backup. What if you inspected that DIV and saw the theme was styling it like this:

    #something .whatever { ... }

    Now from your stylesheet, if you do:

    .whatever { ... }

    … It will not override because it’s less specific. You need to match it’s specificity:

    #something .whatever { ... }

    Or, write something more specific:

    #something .something-else .whatever { ... }
    #14792
    suzen_lex
    Participant

    Thank you Jason 🙂 To be honest, I wasn’t aware of the specificity rule until I googled it earlier today. So I’m glad you drove that home in your explanation. I appreciate your willingness to provide such great customer support regardless of the skill level of your customers. I will be sure to link to theme blvd. when my site launches in a few months! (DogYearbook.com)

    #14793
    Jason Bobich
    Keymaster

    Great, I’m glad that all makes more sense now.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.