Custom CSS & the Sela Theme

  • Unknown's avatar
    teegannn · Member ·

    Hi,

    I am currently creating a website for a client using the seal theme and am having trouble customising a few things:

    1. Shortening the distance between the logo and main menu

    2. Removing the grey line between the main menu and main banner – also the circles between menu links.

    3. Changing the colour of drop down links.

    4. Removing the two testimonials off the front landing page.

    Thanks, any help would be great! I have tried several codes but can’t seem to find any that work for the above. The website is http://sanctumhealing.com

    Teegan

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

  • staff-jeanpierreac · Staff ·

    Hi there!

    Let’s answer little by little :)

    1. Shortening the distance between the logo and main menu

    Well, there is a padding to the bottom in site-branding div that could be narrowed or even removed. Right now you have 36px. If you would like to delete it, this CSS code could help you, else you can adapt this padding using another pixel value aligned with your design by changing ‘0’ by ’10px’ for instance.

    .site-branding {
    padding-bottom: 0;
}

    2. Removing the grey line between the main menu and main banner – also the circles between menu links.

    This grey line has been defined as your main navigation bar’s bottom border. So you can remove it with this css code:

    .main-navigation {
    border: none;
}

    About the circles, you can change it by specifying another content after navigation menu links, or even delete it if you put “” as content.

    .nav-menu>li>a:after {
    content: "";
}

    3. Changing the colour of drop down links.

    Do you mean menu links? What color would you like to change: background color, text color…? Could you be more explicit ? :)

    4. Removing the two testimonials off the front landing page.

    You can do it with this code.

    article.jetpack-testimonial {
    display: none;
}

    Anyway, let me suggest you to use individual posts to each one of your questions, just to help other people to find related questions/answers when trying to find solutions to their problems. [Use descriptive titles – Summarize your question or issue. The more descriptive your title the better. https://en.forums.wordpress.com/topic/forums-faq-getting-started-in-the-forums?replies=2%5D

    I hope this helps, Teegan!! :)

  • Unknown's avatar
    theintrovertedchilli · Member ·

    Hi I have a similar problem with Sela.
    I’d like to change the font and font style (italicise) my header. Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @theintrovertedchilli, since yours is a different topic than discussed in this thread, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

  • Unknown's avatar
    teegannn · Member ·

    Thank you so much staff-jeanpierreac that fixed everything! I will make sure to post the questions separately next time!

    Yeah I meant the drop down main menu links, sorry! I would like to change the text colour and the background. At the moment they are grey.

  • Unknown's avatar
    thesacredpath · Member ·

    Great, for the background color of the submenus, add this and adjust the color as desired. 

    .main-navigation ul ul {
    background-color: #fff;
}

    The submenu text color would be this. 

    .main-navigation ul ul a {
    color: #4f4f4f;
}

    The submenu hover text color would be here. 

    .main-navigation ul ul a:hover, .main-navigation ul ul > li.focus > a {
    color: #6d6d6d;
}
  • The topic ‘Custom CSS & the Sela Theme’ is closed to new replies.