WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Customization help (8 posts)

  1. hobosteeze
    Member
    Posted 7 months ago #

    Hello all, I am using the Customizr theme to build a website for a friend of mine. I am by no means a web developer but have dabbled with it in the past mostly in Joomla.
    I have gotten the theme to do most of what I wanted it to do; however got stuck on a few portions

    1. The Navbar that includes the site description is currently white, and I cannot for the life of me fix this, also want the Site description to appear in a different color than black. This is the code I am using but it wont work.

    /* Change colour of navbar wrapper
    .navbar-wrapper .navbar h2 {
    color :#5dd4d4
    }
    /* Change Color of Site Description
    h2.site-description {
    color: #a6006f
    }

    2. Directly above the footer there is a white bar. Any tips on how to change that color as well?
    3.I have reduced the size of my slider with this code

    /* Adjust the Slider Height */
    #customizr-slider.carousel .item {
    height:         350px;
    min-height:     350px;
    line-height:    350px;
    width:          900px;
    }

    How can I center the slider, and is there a way to bring the content below the slider up by cropping the space?
    4. Finally, is the there a way to relocate the social widgets to below the site header instead of at the footer?
    The web address to the site is http://www.doggiestylesgroom.com/

    Any help would be greatly appreciated. I know this is a lot to ask but I kind of got stuck with this site and need to get it done for my friend.

    Here's all of the CSS that I have been using in case something may be conflicting.

    body {
      background: none repeat scroll 0 0 #5dd4d4;
      color: #a6006f;
      padding-bottom: 0;
    }
    header.tc-header {
    min-height: 45px;
    background: #5dd4d4;
    border-bottom: 10px solid #5dd4d4;
    border-top: 5px solid #5dd4d4;
    }
    footer#footer .colophon {
    background:     none repeat scroll 0 0 #5dd4d4;
    border-top:     12px solid #5dd4d4;
    color:          #5dd4d4;
    padding:        0;
    }
    /* Change colour of menu/navbar items*/
    .navbar .nav > li > a {
      color: #a6006f;
    }
    /* Change colour of first letters in menu */
    .navbar .nav > li > a:first-letter {
      color: #a6006f;
    }
    /* Change colour of navbar wrapper
    .navbar-wrapper .navbar h2 {
    color :#5dd4d4
    }
    /* Change Color of Site Description
    h2.site-description {
    color: #a6006f
    }
    /* Remove the Hover/Focus Colors  */
    .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a,
    .navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
    color:          #5A5A5A;
    }
    .round-div {
      border: 104px solid #5dd4d4;
    }
    /* Adjust the Slider Height */
    #customizr-slider.carousel .item {
    height:         350px;
    min-height:     350px;
    line-height:    350px;
    width:          900px;
    }
    /*  Adjust Navbar Box settings      */
     .tc-header, .navbar.notresp .navbar-inner  {
    background-color:   #5dd4d4;
    }
  2. rdellconsulting
    Member
    Posted 7 months ago #

    1 & 2 fixed here

    3. Try taking out the width: 900px to see the result. The snippet for this is here with some thoughts on responsiveness included.

    4. Start with this Snippet

  3. deputy05
    Member
    Posted 7 months ago #

    [Edit] rdell beat me to it...so, possible duplicate items... :(

    First off...check out the snippets page...lots of useful information...make sure you check out the Get started menu item as well...

    1) Check out this snippet...for the site description color, your code is missing the ; after the color hex value...if that still doesn't work, maybe get more specific, like this:
    h2.span7.inside.site-description { color: #a6006f; }

    2) It is the footer top border...currently it is:
    footer#footer { border-top: 12px solid #e9eaee; }
    either change the color or none like this:
    footer#footer { border-top: none; }

    3) Assuming you are talking about the images? You need to upload images that are a closer match to your new slider size...also, take a look at this snippet for other responsive parameter associated with this type of change...once this is all straightened out, I think your content will be closer

    4) Why not just use the block in the navbar? The space is being unused right now.

    Also...take a look at this snippet...other browsers have similar tools.

  4. hobosteeze
    Member
    Posted 7 months ago #

    Thank you guys so much for the help. A lot of what was needed is resolved.

    I still cannot get the box the menu is to change colors. Even when I hit the navbar the white box still appeared. My friend would like the menu there if possible just wants it to be the same shade of blue (5dd4d4) but I added this code

    .navbar.notresp .navbar-inner {
    background-color: #5dd4d4; /* Change to required color */
    }

    But it made no changes. Any more suggestions?

    As for number 3. The size of the slider is great for me. I was just wondering if there was any way to move the three 270x250 images up (About, Services, Location) in order to make better use of the space instead of having an inch and a half of blank real estate. Is this possible, or too difficult to explain?

    Thanks again for all the help guys!

  5. ElectricFeet
    Member
    Posted 7 months ago #

    That's because there isn't just a background colour there; there's a gradient fill there too. I switch it all off with:

    .navbar,
    .navbar .navbar-inner,
    .navbar .nav {
    	webkit-box-shadow:	none;
    	-moz-box-shadow: 	none;
    	box-shadow: 		none;
    	background: none;
    	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }

    (You may not need all the selectors. Oh and the "filter" is for old versions of IE.)

    You can then add back in your colour.

  6. deputy05
    Member
    Posted 7 months ago #

    As for number 3. The size of the slider is great for me. I was just wondering if there was any way to move the three 270x250 images up (About, Services, Location) in order to make better use of the space instead of having an inch and a half of blank real estate. Is this possible, or too difficult to explain?

    As far as I can tell, it is because your slider settings are all wonky...unfortunately I cannot check further right now...if no-one else beats me to it, I'll look into it later...

  7. hobosteeze
    Member
    Posted 7 months ago #

    I really appreciate all the help. Just the slider to go!

  8. deputy05
    Member
    Posted 7 months ago #

    I apologize for the delay, but I have only been able to come up with a partial solution (listed below)...should look fine on large screens but lousy on smaller screens (ie. mobile devices)...
    I have not been able to come up with the proper @media queries to make it look good on the smaller screens...will have to play around some more...maybe the experts can help me out. :)

    So...try these:

    Remove the following from your custom css (you have it listed twice, remove both):

    /* Adjust the Slider Height */
    #customizr-slider.carousel .item {
    height:         500px;
    min-height:     500px;
    line-height:    500px;
    width:          900px;
    margin-left:    auto;
    margin-right:   auto;
    overflow:       hidden:
    }

    Also...general rule of thumb, if you are not changing a property from its default, do not include it in your custom css...

    Select the non-full-screen slider:
    Appearance-->Customize-->Front Page-->Slider Options
    Uncheck Full width slider

    Add this to your custom css:

    #customizr-slider { width: 900px; }
    #customizr-slider.carousel .item { height: 375px; min-height: 375px; line-height: 375px; }

    I chose this value based on maintaining the uploaded image size's aspect ratio for the new 900px width.

Reply

You must log in to post.

About this Theme

About this Topic