Viewing 15 replies - 1 through 15 (of 18 total)
  • Topher

    (@topher1kenobe)

    At that URL I see a Coming Soon page with a countdown, and a logo that is centered at the top. Is that what you’re working on?

    Thread Starter soni123

    (@soni123)

    I am working with the theme so it is under maintenance mode. Please can you refer to the theme. I would like to change the left side margin of the logo. Additionally, would like to change the icon color of the website as well.

    https://vpthemes.com/preview/Terrifico/

    Thread Starter soni123

    (@soni123)

    Dear Topher,

    Please can you revisit my website to help me.
    https://www.bethebees.com

    Topher

    (@topher1kenobe)

    Gotcha. #site-navigation has a max-width of 1200px, and then it’s centered.

    Instead you could make it wider, which would make the logo stick right to the left side, and then put some left margin or padding on the logo itself.

    Thread Starter soni123

    (@soni123)

    please can you eloboarate a bit, as I am non-it person and quite new to this field.

    Topher

    (@topher1kenobe)

    This is a little complicated, you may need a developer. If you want to give it a shot, do this:

    Install this plugin: https://www.ads-software.com/plugins/simple-custom-css/

    That will let you put in some CSS which will override your theme’s css.

    Then put this in:

    #site-navigation {
      max-width: 1300px;
    }

    then reload your page. You should see the logo stuck to the left.

    Then change it to this:

    #site-navigation {
      max-width: 1300px;
      margin-left: 10px;
    }

    and reload. You should see the margin move off the edge 10 pixels.

    Fiddle with that until you’re happy with the distance.

    Thread Starter soni123

    (@soni123)

    wow….magical…it worked…..thanks
    Please can you help me modify the color of the small icon in feature and service section please. the color of the icons are white in yellow boxes. I wan to change them to black or any other color in the yellow boxes.

    Really appreciate your help.

    Thanks
    Soni

    Thread Starter soni123

    (@soni123)

    Furthermore, please can you advice me if these icons can be changed for some of my own icons as well.

    Thanks
    Soni

    Topher

    (@topher1kenobe)

    If you’re talking about all the yellow boxes with white icons, the icons are actually a font called FontAwesome. Fortunately this makes it easy to change them. The white part is the font, the yellow part is the link.

    Here’s the built in code for the yellow boxes and white fonts:

    .service-box .service-icon i {
        color: #ffffff;
    }
    
    .service-box .service-icon {
        background-color: #ffd700;
    }

    #ffffff is white, #ffd700 is yellow. Those values are called Hex codes, and you can find a tool here: https://www.w3schools.com/colors/colors_picker.asp to help you gets the codes for the colors you want.

    Simply copy that CSS above into your editor link you did for the logo positioning and change the colors to what you want.

    If instead you’re talking about the tiny black icons in the header, all the above advice applies, but use this CSS instead:

    #header-top i {
        color: #000000;
    }

    #000000 is black, simply change it to whatever color you’d like,

    Thread Starter soni123

    (@soni123)

    wow….that changed the color of the icons…and if I want to do the same thing with rest of the icons in why work with us and clean design section icons how to i change them as well?

    Topher

    (@topher1kenobe)

    Here’s how I figured out what to change before. I right clicked on the $ icon under Services and chose Inspect Element. That brings up a window with code in it. One panel with have the HTML and the other panel will have the CSS. If you do the same on the $ then in the CSS panel you should see the code I referenced before.

    Now the other icons on your page aren’t links. Inspect the umbrella under Creative People and you should see in the HTML that it’s an <i> tag with some classes, like this:

    <i class="fa fa-umbrella"></i>

    And in the CSS panel you should see this:

    .content-boxes .col i.fa {
    ?    font-size: 42px;
    ?    line-height: 80px;
    ?    color: #ffffff;
    }

    If you look above your <i> tag in the html you should see a div like this:

    <div class="content-boxes">

    See the pattern here?

    So you can put this into your CSS editor, mess with the colors, and it should take care of the rest of your boxes:

    .content-boxes .col i.fa {
    ?    color: #ffffff;
    }
    Thread Starter soni123

    (@soni123)

    thats so cool….first time in life learned how to recorgnize codes….thanks for teaching me….
    I am trying to include some testimonials in the last section but am not sure how to do so. any suggestion?

    I am also trying to rearrange the sections? any suggestion for that too? ??

    Thread Starter soni123

    (@soni123)

    if i want to changes the icons completely like change the shape of the boxes can I do so? or maybe replace it with some picture? how do i do so?

    Topher

    (@topher1kenobe)

    Both of the above questions are getting beyond the scope of helping with problems and getting into development services. My recommendation is to find someone skilled in CSS and have them take care of it for you. Is there a local WordPress meetup in your area? You can often find one on meetup.com. https://www.meetup.com/ManchesterWordPressUserGroup/

    Thread Starter soni123

    (@soni123)

    ok…is there any group in London?

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Reduce space from left of the logo’ is closed to new replies.