• Resolved Hanna Lundquist

    (@hanna-lundquist)


    Hi!
    I’m creating an self hosted WP-site using the Sela theme. I started building it at wordpress.com, but moved it to a web hotel to be able to edit the CSS style sheet (to change colours and fonts).
    But I have no clue how to find the style.css. I’ve been told I should find it selecting Apparence, Themes, Editing, but in my menu there is no “Editing”. Do you have any clue about this? Do I have to upgrade in any way to be able to edit colours?
    Hanna

Viewing 15 replies - 1 through 15 (of 15 total)
  • You should NEVER edit the CSS in the main theme.

    Download a CSS Editor like THIS one then put your code in it.

    As @jmeyer2485 mentioned, you should not edit the theme files directly by going to Appearance β†’ Editor. The reason is that if you modify any of the theme files, those changes will be lost the next time you update or upgrade the theme, and you will want to keep the theme up to date because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core. You want to add your overriding CSS through a CSS plugin. If you don’t understand what “overriding CSS” means, it’s just a rule with an identical selector, but using the property values that you want to set. For example, if the theme has a rule like this for the site title:

    #site-title {
       color: black;
    }

    And you wanted to change it to red, then just copy the rule into your CSS plugin and change the color value to red. The way CSS works is if there are more than one rule with the same selector, then the rule which comes last will take precedence. Rules added through a plugin will come after the rules in the theme, so any rules you add through the plugin, which have the same selector, will take precedence over the theme’s rules.

    Thread Starter Hanna Lundquist

    (@hanna-lundquist)

    Thank you both!

    I tried that Simple Custom CSS plugin, but none of what I write in it will change my website. Have no clue why.

    I decided to create a child theme, and have succeeded to make some nice changes, but the link colour is a mystery.
    a:link { color: #738201; } in the end of the child theme changed colour of some of the links, but not all of them.

    Another question is how to make links of the headers of my front page text widgets. In the text box I can write HTML but not in the header box as I can see. Any solutions?

    Here’s my website, under construction. And yes, I’m a newbie. πŸ™‚

    Thread Starter Hanna Lundquist

    (@hanna-lundquist)

    Here’s the link
    hannalundquist.se

    Me personaly I would just add the follow for the links:

    a {
    color: #738201;
    }

    As for you your widget titles you can’t add HTML in them.

    You can edit the color etc by adding CSS.

    .sidebar-widget-area .widget-title {
        color: #ff0000;
    }
    Moderator Kathryn Presner

    (@zoonini)

    I tried that Simple Custom CSS plugin, but none of what I write in it will change my website. Have no clue why.

    It’s likely because your CSS is not specific enough. To override CSS, you need to use a specific enough selector. You might like to learn more about CSS specificity to understand the concept better. Here are two more articles:
    http://designshack.net/articles/css/what-the-heck-is-css-specificity/
    http://snook.ca/archives/html_and_css/understanding_c

    I noticed you have quite a bit of CSS in your child theme’s style.css. Keep in mind that you should not be copying your entire parent theme’s style.css in there, only the styles you want to override. This could also be causing problems with CSS specificity.

    Speaking of specificity, let’s get more specific now about your goals. πŸ™‚

    What colour are you trying to change your links to? Is it just the unvisited colour, or the hover and visited states as well? Where are you trying to change the link colour, in your posts & pages? Widgets? Menu? Dropdown menus?

    Knowing all this will help us help you with the right code for your child theme.

    Moderator Kathryn Presner

    (@zoonini)

    Another question is how to make links of the headers of my front page text widgets. In the text box I can write HTML but not in the header box as I can see. Any solutions?

    Widget titles are not linked.

    You could try removing the widget titles from the Title area of the widget and instead incorporating it within the body of the text widget, using this HTML, for example

    <h3 class="widget-title">Kontakt</h3>

    I haven’t tested this – please give it a go and let me know if it does the trick.

    Thread Starter Hanna Lundquist

    (@hanna-lundquist)

    Thanks, all of you! I finally managed to change the link colours. I also downloaded Enhanced text widget, where it is possible to use HTML.

    Kathryn, I understand I made a mistake by copying all of the parents style sheet and putting it in the child’s. When there is time, I will try to clean it up.

    Now one more questions, maybe a bit trickier:
    1. Is there a way I can easily put a search area in the main menu?

    Is there a way I can easily put a search area in the main menu?

    Short answer is no, not without coding some PHP.

    Thread Starter Hanna Lundquist

    (@hanna-lundquist)

    I thought there might be a widget for this, but I cannot find any.

    There is a Search Widget but it won’t be in the Main Menu, it be most likely on the left or right side, or even in the footer.

    Depends where your Widgets are located.

    Thread Starter Hanna Lundquist

    (@hanna-lundquist)

    I know, I already use that widget. But I just found one called Bop Search Box Item Type For Nav Menus. It does the job, but it’s not that beautiful:
    http://hannalundquist.se

    Nice find!

    You could most likely edit the CSS for it to make it look better.

    If this has answered your question(s) please mark as resolved.

    Thanks

    Moderator Kathryn Presner

    (@zoonini)

    Hanna, glad you found a plugin you like!

    I’m going to mark this thread as resolved but if you need help with anything else feel free to start a new one.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Sela editing CSS’ is closed to new replies.