spacing of menu is too close, how to add?

Hi

By using CoursePress, the spacing of menu is too close (as attached) , how to make it bigger?

Besides, i would like to change some css of CoursePress Pro such as
i) font format of menu, and almost all fonts, into font like crimson
ii) color background
iii) color of specific button or words

But i have no idea how to target the specific css using Simple custom css plugin

  • Milan

    Hi @pole915,

    I hope you had been good today.

    #1 & #2) please try out this css snippet.

    .main-navigation li{
        margin-bottom: 20px;   //Increase to max number to increase more space between menu.
        font-family: crimson;    //This will change font-family to crimson for menus
    }

    To change background color of any element, you can write custom css for that element in Appearance --> Custom Css

    Coursepro plugin comes with coursepro default theme. So if you want to customize whole coursepro look you can directly tweak changes to the theme you are using.

    To do so just go to Appearance --> Customize. And tweak look and feel of coursepro.

    I hope this helps you. Please let me know if there is anything else I can help you with. :slight_smile:

    Regards,
    Milan.

  • Milan

    Hi @pole915,

    I hope you are having an awesome day.. :slight_smile:

    I wonder In my previous post I was not too clear about what you can do to style specific elements. So in this post I will try to explain what you can do to style any element on page.

    Here is how you can achieve that. :slight_smile:

    To style any specific element of any page. First you need to identify what is the selector of that element. You can find elements selector by inspecting page via inspectors. Let's say for firefox very nice inspector tool is "firebug".

    After finding out what is the selector of element you can directly write css for that element.
    Let say if some button on page can be referenced with id "buttonOne". You could write css like..

    #buttonOne{
          background-color: red; //this will change background color of button.
         color: blue; //this will change text color of button.
    }

    I hope this will make sense to you. If this doesn't please don't hasitate to ask me again. :slight_smile: I would be glad if you allow me to help you.

    Enjoy Wpmudev.

    Warmest Regards,
    Milan..

  • Milan

    Hi @pole915,

    I am sorry for being late here and of course thanks a lot for being patience. :slight_smile:

    It looks like you've forgot to include Merriweather font link to your page. You can do this by adding this code to your child theme or current active theme's functions.php file. You can find functions.php file under theme folder.

    function add_this_to_head(){
    					echo '<link href=’http://fonts.googleapis.com/css?family=Merriweather’
    rel=’stylesheet’ type=’text/css’>';
    				}
    
    				add_action( 'wp_head', 'add_this_to_head');

    Just one quick note I would like to mention here is that if you are using this code with theme's functions.php file rather than child theme's functions.php file, your changes will not be preserved when themes gets updated. :slight_smile:

    Let me know how it goes. :slight_smile:

    Warmest Regards,
    Milan..

  • pole915

    Hi

    For now i really got into trouble, i am using WP multisite,

    i) i try to put the function above into css, and i know it is not working

    ii) then, i put into
    public_html>wp-content>theme>coursepress-child>functions.php (i create and put in the code, it is not functioning too)

    iii) then, i put into
    public_html>wp-content>plugin>coursepress>includes>functions.php (as attached) and it is not working

    iv) is it possible i can create a child-theme only in 1 website of multisite? How far i need to dig in ? After all i just need to change the word font and this seems i need to go a lot discussion and questions here...

  • Milan

    Hi @pole915,

    I hope you are having a good day.

    I've rechecked my code and got to know that I forgot to replace "quote" character in my previous code. Sorry for that dear @pole915. So here is rewritten code for you. I've tested this code on my sandbox site and it is working fine.

    function add_this_to_head(){
    	echo "<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>";
    }
    
    add_action( 'wp_head', 'add_this_to_head');

    If you are still confused about how you can do all these stuff. I suggest you send me your ftp and wp-admin information.

    You can send the info through our private contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Milan Savaliya"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Once we have this information then we can debug the issue further :slight_smile:

    Look forward to hearing back!

    Cheers,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.