Need help customizing Customizr, thanks in advance!

  • likegluelikecrew

    (@likegluelikecrew)


    9 years ago

    Hi, I’m working up my yoga site right now and could sure use some help. Paramanandayoga.com.

    1: I really don’t like how the header disappears just showing the logo and menu items with a translucent background when scrolling. Is there a way to keep the header as it is on top and just have the page scroll underneath it?
    2. How can I add Instagram next to the Facebook icon in the header and also the footer?
    3. The email icon (looks like an envelope) doesn’t change to black on hover. It also appears the rss and Facebook icons aren’t true white (the email icon turns very white on hover, that is the color I would like the icons to appear regularly and hover to black.
    4. How can I edit the skin so that it exactly matches the red in the logo? And the skin also turns the current menu item red also, which makes it hard to read against the already red background. Is there a way to override that and make the current menu item appear black?
    5. On the regular pages, such as About, I put Instagram, Facebook and Mailchimp widgets on the left sidebar, but they are closely right on top of each other with not much space in between them. Is there a way to increase the space between the widgets or possibly separate them with a line?

    By the way, here is the custom CSS i currently have under the Advanced Options:

    .navbar .nav > li > a {
    background-color: #bd3f03;
    }
    .navbar-inner a.social-icon { text-shadow: none; color:white;
    }
    footer#footer .colophon a.social-icon { text-shadow: none; color:#bd3f03;
    }
    a.icon-feed:hover {color:#000000;}
    a.icon-facebook:hover {color:#000000;}
    .navbar .nav > li > a { text-shadow: none; color: white; }
    .navbar .nav > li > a:hover { color: #000000; }
    .page #main-wrapper h1.format-icon:before {
    content: none;
    }
    .post h1.format-icon:before, .post h2.format-icon:before {
    content: none;
    }
    .entry-meta {
    display: none;
    }
    .tc-header {
    background: #bd3f03;
    border-bottom: 3px solid #000000;
    border-top: 3px solid #000000;
    }
    footer#footer {
    background: none repeat scroll 0 0 #bd3f03;
    border-top: 3px solid #000000;
    }
    .navbar .navbar-inner {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi likegluelikecrew,
    this ticket is almost a part-time job request ??
    Let me help with directions for some of your questions.

    1. Appearance > Customize > Header > Navigation Menus here you can select all the behavior you want for your menu, make it sticky, disappearing, whatever you like.

    2. Appearance > Customize > Global settings > Social links just add a link to Instagram or whatever social you need

    3. https://presscustomizr.com/snippet/change-color-social-icons/

    4. tricky task but doable: https://presscustomizr.com/snippet/create-new-skin-color/

    5.

    #left .widget {
    margin-bottom: 5% !important;
}

    Try like this,
    hope it helps

    Thread Starter likegluelikecrew

    (@likegluelikecrew)

    Much obliged Giorgio25b, I know it was a tall order, I’m not very good at this stuff, I make a wordpress site like once every two years! Most of your answers were right on the mark and much appreciated, although I still cannot figure out problem #1 on my list- how to keep the header intact and have the page scroll underneath it. All the settings at Appearance > Customize > Header > Navigation Menus and also Appearance > Customize > Header > Design and Layout only seem to let you either have the header scroll with the page, or tuck the header up with variables like keeping the logo and menu, which looks terrible with just the logo and menu different colors over the translucent or white background.

    I would either like to keep the header just as it is and stuck to the top during scrolling, or maybe if it tucked up and moved the menu up, have the background be the same color red as the logo and background of the menu so it looked continuous.

    Any ideas anyone? Thanks so much in advance.

    Here’s my updated custom CSS in Advanced Options in case it’s relevant:

    .navbar .nav > li > a {
    background-color: #bd3f03;
    }
    .navbar-inner a.social-icon { text-shadow: none; color:white;
    }
    footer#footer .colophon a.social-icon { text-shadow: none; color:#bd3f03;
    }
    a.icon-feed:hover {color:#000000;}
    a.icon-email:hover {color:#000000;}
    a.icon-facebook:hover {color:#000000;}
    a.icon-instagram:hover {color:#000000;}
    .navbar .nav > li > a { text-shadow: none; color: white; }
    .navbar .nav > li > a:hover { color: #000000; }
    .page #main-wrapper h1.format-icon:before {
    content: none;
    }
    .post h1.format-icon:before, .post h2.format-icon:before {
    content: none;
    }
    .entry-meta {
    display: none;
    }
    .tc-header {
    background: #bd3f03;
    border-bottom: 3px solid #000000;
    border-top: 3px solid #000000;
    }
    footer#footer {
    background: none repeat scroll 0 0 #bd3f03;
    border-top: 3px solid #000000;
    }
    .navbar .navbar-inner {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    #left .widget {
    margin-bottom: 15% !important;
    }

    .sticky-enabled .tc-header {
    background-color: #bd3f03 !important;
}

    this should do it!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need help customizing Customizr, thanks in advance!’ is closed to new replies.