SomewhatRounded

Hey newtonbrand,

I took a look at your child theme stylesheet and didn’t see a background colour specified, only:

.menu {
    background-image: none;
    clear: both;
    margin: 0 auto;
}

The custom css changes you have shows up for me though. Perhaps try clearing your cache? That might help if you’ve been working on it for a while and refreshing a lot.

Hope that helps, let me know how it goes 🙂

Do you mean do you have to have the same widgets on every page? Or just the same content? You can certainly do either, but you can have widgets that are only on specified pages as well 🙂

Here are a few plugins I think you might find helpful: http://ww.wp.xz.cn/plugins/types/ and http://ww.wp.xz.cn/plugins/simple-custom-post-order/

I think the issue with the arrow and text is that you either have the span9 and span 3 css in a file that isn’t showing up, or just doesn’t exist. The grid system that’s in the css for your site uses ‘one column’, ‘two columns’, ‘three columns’, etc.

Give this a try:

<div class="row">
     <div class="four columns">
        <p>A bit of explanation about your kit</p>
     </div>
     <div class="four columns">
        <a href="http://www.jeanneesti.com/test/wp-content/uploads/2013/10/fakearrow1.jpg">
        <img src="http://www.jeanneesti.com/test/wp-content/uploads/2013/10/fakearrow1.jpg">
        </a>
     </div>
</div>

Hey Cari,

I’m a bit curious as to why you find them restrictive? I’m not sure if you decided to stick with this theme or not, but if you want to go a little beyond and stay with the same theme, you could create some custom widget areas with the help of a few plugins 🙂

Hey,
I took a quick look, and I assume you’re using some custom css? If not, you might want to, or create a child theme, so your changes won’t be lost when there are updates for your theme 🙂

The css responsible for your main nav is:

.main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main ul {
    margin: 0 30px;
}
.navigation-main a {
    color: #FFFFFF;
    padding: 10px;
    position: relative;
}
.navigation-main li {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main li:hover {
    background: none repeat scroll 0 0 #808181;
}
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul > .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item:hover a:after, .navigation-main ul > .current-menu-item:hover a:after, .navigation-main ul > .current-post-ancestor:hover a:after, .navigation-main ul > .current-menu-ancestor:hover a:after, .navigation-main ul > .current-menu-parent:hover a:after, .navigation-main ul > .current-post-parent:hover a:after {
    border-top-color: #00CBC5;
}
.navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item ~ .current_page_item a:hover, .navigation-main ul > .current-menu-item ~ .current-menu-item a:hover, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-top: 6px solid #00CBC5;
    bottom: -6px;
    content: "";
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin-left: -6px;
    position: absolute;
    width: 0;
    z-index: 9995;
}

#00CBC5 is your current page colour, #6E6E6E is your dark grey, and #808181 is your lighter grey(hover) colour. All you need to do is use your desired colours in place of those codes 🙂 If the code above isn’t already apart of your custom css, you only need to copy the relevant sections to apply changes.

Hope that helps! Let me know if you need anything else (I tried to explain the best I could but I’ve been a bit under the weather today)

@nathan[email protected] that’s correct! But make sure to update either using a child theme or the “Custom CSS” field (Appearance > Customiz’it! > Custom CSS) or you’ll lose your changes when you update your theme

@queque the icons can usually be found by googling something like “(company name/brand) brand guidelines”, they’ll have the guidelines they would like to be followed and either downloads or links for their official images. Then you just have to either upload the images you downloaded or link to them in your css in place of the icon you are replacing

.icon-facebook:before {
    content: url('http://www.yoursite.com/style/images/icon-fb.png');
}

Hey queque,

You could change it by adding the custom css (either in the “custom css” or by creating a child theme):

.icon-facebook:before {
    content: "";
    background-color: #3B5998;
    color: white;
}

Or you could get the official icon from https://www.facebookbrand.com/ and use it. This is probably the best way, as it wouldn’t be a violation of their brand guidelines, as only their official images are supposed to be used (a lot of sites don’t follow these guidelines).

Hope that helps!

I believe the css id you are looking for is #header (and #footer, if you’d still like them to match) It looks like this in the existing code:

#header, #footer {
        background: #3b3b3b;
        min-height: 100px;
        position: relative;
        display: block;
        width: 952px;
        left: -46px;
        padding: 0 40px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }

    #header:before, #header:after, #footer:before, #footer:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        border-color: #303030 transparent transparent transparent;
        bottom: -15px;
    }

Hope that helps!