Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

How much can you re-code with CSS in the themes?

  1. vanessastudio
    Member

    I like the simplicity in the Skylark theme, but I'm wondering if the blue slidebar can be changed to a different colour (I tried, but I couldn't see which part of it in the code it must be).

    Also, how much in any theme, visually, can be changed using CSS? If I choose another theme which has custom colour, I'm not sure if I can change the margins, etc. Some themes seem to have more changeable parts than others but it's difficult to tell beforehand. Are all the themes basically the same in that visually you can re-code any part of the CSS?

    The blog I need help with is vanessastudio.wordpress.com.

  2. thesacredpath
    Member

    How much can be changed varies theme by theme, but most modern themes have all the design style rules in the CSS. That said though, once in a while you fine some where there is some defined in the PHP script files, inline. In some themes, there are less selectors and more stuff grouped together in such a way that one thing cannot be changed without changing others. Most of the newer themes though are pretty rich in selectors and give you a good bit of control over the style of everything.

    On Skylark, yes the blue background of the slider can be changed. It is under .featured-wrapper in the CSS and is a CSS defined gradient.

  3. vanessastudio
    Member

    Thanks for the info, Thesacredpath! I'm new to CSS, so it's a big learning curve for me.

  4. vanessastudio
    Member

    Sorry... Can't seem to change the blue in Skylark. I was very careful to look through all the codes though. I've tried to re-code from ".featured-wrapper" to "Showcase template" 15 lines down.

    When is it clear that something is in the PHP script files and can't be changed?

  5. thesacredpath
    Member

    I see no slider on your site. How can you know if the color changed if the thing is not there to see?

    Add this to the custom CSS window and preview (you may have to force refresh the preview window as some browsers hang onto and use cached files too tenaciously).

    .featured-wrapper {
background: #33ff55 !important;
}

  6. vanessastudio
    Member

    I don't know... I've tried what you suggested, still no change.
    I am still learning the lexicon and didn't realise the blue which dominates the pages on this theme isn't the slider. I assumed the slider was already there (without images).

  7. thesacredpath
    Member

    You have no slider on your site. How do you know it doesn't work?

  8. thesacredpath
    Member

    I need the actual link to the site you are talking about.

    It seems from reading some of your other threads that it is highly likely you are trying to use the wordpress.COM forums to get help with your self-hosted wordpress installation. That will virtually never, ever work since themes here are NOT the same as themes for self-hosted blogs. Themes here are modified.

  9. vanessastudio
    Member

    My first question to WordPress was if I could create a website on it, not a blog. The answer seemed to be positive so I bought a package to create a website here. I want to be able to modify the CSS, since that is what I understood I could also do here.

    I didn't know the blue band I see on my site is NOT the slider (now I'm realising it isn't) and to be honest, I don't know how it disappeared or how I'm supposed to install it - I have yet to get my head around CSS. I think whoever said mastering WordPress was having a laugh!

  10. raincoaster
    Member

    If you won't provide the prerequisite information, we cannot provide support. Period.

  11. vanessastudio
    Member

    whoever said mastering WordPress was easy (yes, I did read it somewhere here!) was having a laugh.

  12. vanessastudio
    Member

    What are you talking about? WordPress say to go on the forums to get help! I've just paid WordPress $99! Full stop.

  13. thesacredpath
    Member

    Ok, confusion cleared. The color for the blue part at the top of the site can be changed here:

    .site-header {
background: #4188D4;
}

  14. timethief
    Member

    Please post an active link starting with http:// to the exact blog you need help with.

  15. thesacredpath
    Member

    Don't get frustrated, we'll get you though things and you will be up and running before you know it. Anytime you start out with something new there is that pesky learning period. We've all been through it.

  16. timethief
    Member

    @thesacredpath
    sorry about the overlap there.

  17. thesacredpath
    Member

    @timethief, the confusion was just on terminology and I now see what she is talking about. The site she is referring to is hosted here.

  18. designsimply
    Staff

    I'm pretty sure the site in question is http://vanessastudio.wordpress.com/ which is mentioned in the first post as well as linked to vanessastudio's username.

  19. thesacredpath
    Member

    @designsimply, my confusion was that she mentioned slider and there was no slider or any content on the site she mentioned, and in another thread there was a suggestion about going self-hosted. The code I gave originally was to change the slider and I worked off the demo site. When she said it didn't work, and I knew it did, that got me to thinking she had possibly gone self-hosted, especially since I did not see a slider on the site she referenced.

  20. designsimply
    Staff

    Aha. Gotcha. :)

  21. thesacredpath
    Member

    Vannessa, there is also a blue border line at the top of that blue area that I suspect you will want to change as well, so use the following code instead and then you can edit the color for the background and the border line too. Just edit the hex color codes.

    .site-header {
background: #4188D4;
border-top: 4px solid #4286CC;
}

  22. vanessastudio
    Member

    http://vanessastudio.wordpress.com/
    Yes that's my site as it stands right now.

    Thesacredpath - have tried your latest suggestion, it still won't work. I temporarily changed the colour of the lettering the other day, so I have an idea of how it should be done. Perhaps I should be including more of the section.

  23. thesacredpath
    Member

    Did you change the hex color code in the code I gave you? Those are the original blue colors. I just added the above code to my test blog using Skylark and it worked just fine.

    http://allhatnocattle.files.wordpress.com/2012/08/skylark1.png

  24. thesacredpath
    Member

    Also some browsers will not show the actual change via the preview button till after you force refresh/reload the preview page.

  25. vanessastudio
    Member

    Yes - It's worked at last.
    I think the reason is problems with my browser - I closed everything off and started up again (even when I was clicking refresh, it wouldn't change).
    Thank you.

  26. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags