Changing colors on InfoWay theme

  • jaclynpieleski · Member ·

    Hello,

    I am building a new blog on WP.com using the InfoWay theme and I am trying to change all of the orange on the theme layout to blue: #0071bc. I have managed to change quite a bit of it, however I cannot seem to figure out how to change the orange bars in the sidebar and all of the links on the site (minus the top menu, which is perfect the way it is now). The site I need help with is http://www.brukeropenpath.com.

    Can someone help me figure out the right CSS for all this? I have tried all that I can think of (still pretty new to CSS).

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, it looks like you got the orange changed to blue. Good job!

    Let us know if you have questions or problems.

  • jaclynpieleski · Member ·

    Yes I figured it out, thanks! I actually have two more obstacles now:

    1. The social media icons in the top left appear ok in Google Chrome and safari, but in internet explorer and firefox they appear as empty roundish blobs…any idea why that is and how it can be fixed?

    2. I would like my custom header image to fit the whole width of the page, but apparently this theme only allows 470px for the header because of the built in space on the top right corner for contact info. My issue with this is, what if we don’t want to use the space for contact info? Then we just end up with an awkward white space in our header. Is there a way around this? I am trying to add text to my custom header, but the page is not letting me for some reason.

    Thank you!

  • thesacredpath · Member ·

    1. Are you talking about your social media icons in the top of the sidebar on the right? I don’t have IE installed on my Mac, so I can’t take a look in that browser. Is this still happening? What version of IE are you seeing the issue in? Can you take a screenshot, upload it to your media library and I can take a look at it? Generally in cases like this, I would use something like browsershots.org to view your site in different browsers, but since your site is set to private, I can’t do that.

    2. You can put a full width header image into your site with CSS. This would be the basics, and some adjustments would probably need to be made depending on your header image size. You would create your image, upload it to the media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks. You would want the heights in #headerimg and in .header (which you already have in your CSS) to match the height of your image.

    #headimg {
background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
height: 150px;
}

.header {
height: 150px;
}

#headimg img {
display: none;
}

    You would also want to put a title back in at Settings > General and then we can hide the text and adjust the div that text is in to cover the entire header area so it is clickable.

  • thesacredpath · Member ·

    I had forgotten that Infoway had a flexible height and width header image, so see this other thread that covers making the header image larger.

    https://en.forums.wordpress.com/topic/centering-my-custom-header-image?replies=7

  • andrewkwai · Member ·

    Hi jaclynpieleski

    Do you mind explaining the process of changing the color? I am having trouble.

    Thanks in advance.

    ak

  • thesacredpath · Member ·

    Sorry, it took some searching to find where the orange was still showing. The only remaining orange I see is in the metadata for posts. This will take care of those.

    .content-bar .post .post_meta .post_date a, .content-bar .post .post_meta .posted_by a, .content-bar .post .post_meta .post_category a, .content-bar .post .post_meta li, .content-bar .page .post_meta li {
    color: #0071BC;
}
  • jaclynpieleski · Member ·

    Thank you, it worked!! Now the only thing still orange is the icon to the left of the date on each post. For some reason on my computer this is only showing up in Google Chrome, but still I cannot figure out how to make it blue like the rest of the icons.

    Thanks!

  • justpi · Member ·

    Before we answer your question, you need to restore the footer credits. Removing them is against the TOS. See #11:
    http://en.wordpress.com/tos/

  • jaclynpieleski · Member ·

    Hi,
    I made them visible again, however we have another website: brukerNIR2u.com, which has had the footer credits hidden for months now and I’m pretty sure I got help with this when I was first building the site…This is the first time I have been notified that this is a problem.

    Thanks

  • justpi · Member ·

    You’re welcome.

    Add this: 

    .icon-time:before {
color: #0071BC;
}
  • justpi · Member ·

    PS The credit thing is also mentioned in the Support doc on CSS:
    http://en.support.wordpress.com/custom-design/custom-css/

  • jaclynpieleski · Member ·

    Ok, thank you!

  • The topic ‘Changing colors on InfoWay theme’ is closed to new replies.