WordPress.org

Support

Support » Themes and Templates » Replace the menu blocks with black text

Replace the menu blocks with black text

  • I’m using Blaskan for my blog and I’m really pleased with how it looks and functions. I’d like to get rid of the black blocks in the menu and replace them with black text text. Also I would like to change the size of the font at the foot of each post, particularly the one listing comments.

    My blog is here: http://www.robjohnsphotographer.co.uk

    By the way, I’m not a developer and I have no idea what to do with the boiler template sitting on my desktop. Please help.

    Thanks

    Blaskan

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi Rob!

    [Moderated]

    Disclaimer: You should really be setting up a separate child theme & stylesheet so that you don’t lose changes if you update your template, but for a quick and dirty solution:

    If I understand you correctly and you want the menu to just be black text with no background:

    You’re going to have to go into your theme’s style.css file, make a copy of this file and put it somewhere safe in case you make a mistake that you can’t reverse. Go into the original and find this:
    #nav a

    Delete the following bits of code:

    border radius: 3px 3px 3px 3px;
    background-image: -moz-linear-gradient(center top , rgb(69, 69, 69), rgb(0, 0, 0));
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    text-shadow: 0px 1px 1px rgb(0, 0, 0);

    Change the following:
    color: rgb(255, 255, 255);
    to:
    color: rgb(0,0,0);

    Now find:

    #nav a:focus,
    #nav a:hover

    delete everything between the {} and replace with:
    color: #F4691A;
    This will give you a hover color equal to the orange on your page.

    Delete these lines:

    #nav .menu > ul:hover > li {
    	opacity: .7;
    }
    
    #nav .menu > ul:hover > li:hover {
    	opacity: 1;
    }

    Delete everything between the {} here:

    #nav li:hover > a,
    #nav li:focus > a {
    	background-color: #000;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#000000));
    	background-image: -webkit-linear-gradient(top, #666666, #000000);
    	background-image: -moz-linear-gradient(top, #666666, #000000);
    	background-image: -o-linear-gradient(top, #666666, #000000);
    	background-image: -ms-linear-gradient(top, #666666, #000000);
    	background-image: linear-gradient(top, #666666, #000000);
    	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#666666', EndColorStr='#000000');
    }

    Find this

    #nav li li:hover > a,
    #nav ul ul :hover > a,
    #nav li li a:focus {
    	background-color: #222;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#000000));
    	background-image: -webkit-linear-gradient(top, #222222, #000000);
    	background-image: -moz-linear-gradient(top, #222222, #000000);
    	background-image: -o-linear-gradient(top, #222222, #000000);
    	background-image: -ms-linear-gradient(top, #222222, #000000);
    	background-image: linear-gradient(top, #222222, #000000);
    	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#222222', EndColorStr='#000000');
    	color: #ccc;
    	top: 0;
    }

    And delete everything between the {}.

    That SHOULD get you to a simple, plain menu with black text and an orange hover.

    Gimme a sec with your footer…

    esmi

    @esmi

    Forum Moderator

    @robert Bardall: Please do not solicit private contact from posters. These are community forums and all support here happens here so that everyone can benefit from it.

    I’m sorry, my intent was not to solicit. I won’t do it again. I’ve said that in a couple other posts too. If you haven’t caught it yet, I’ll edit it out.

    For the footer:

    Find this:

    .type-post footer, .type-attachment footer {
        border-top: 1px dashed #CCCCCC;
        clear: both;
        color: #999999;
        font-size: 12px;
        margin: 20px 0 0;
        padding: 5px 0 10px;
    }

    Experiment with changing:
    font-size: 12px;

    The higher the value, the bigger the font size, the lower, the smaller.

    I hope I’ve been able to help!

    Hi Robert,

    Thanks for the prompt reply. I’ve got my head around understanding that a child theme is essentially a duplicate of the parent leaving the parent theme untouched but how I go about creating that I haven’t got a clue.

    I would welcome your help but only if it is allowed by the forum, don’t want to cause any problems for anyone.

    Rob

    Give me a few minutes while I put some code together, and I’ll walk you through it.

    Ok, roll up your sleeves and let’s do this.

    Assuming default settings:

    Log in to your ftp site and navigate to wp-content/themes/

    Create a new folder called blaskan-child

    In this folder create a new file called “style.css” without the quotes of course.

    In style.css paste the following:

    /*
    Theme Name: Blaskan Child Theme
    Theme URI: http://theme.wordpress.com/themes/blaskan/;
    Description: Child theme for the Blaskan Theme;
    Template: blaskan
    Author: Robert Johns;
    Author URI: http://www.robjohnsphotographer.co.uk/;
    Version: 1.0;
    */ 
    
    @import url("../blaskan/style.css");
    
    #nav a{
    	border-radius: 0;
    	background-image: none;
    	background-color: transparent;
    	border: none;
    	text-shadow: none;
    	color: rgb(0,0,0);
    }
    
    #nav a:focus,
    #nav a:hover{
    	background-image: none;
    	background-color: transparent;
    	color: #F4691A;
    }
    
    #nav .menu > ul:hover > li {
    	opacity: 1;
    }
    
    #nav .menu > ul:hover > li:hover {
    	opacity: 1;
    }
    
    #nav li:hover > a,
    #nav li:focus > a {
    	background-color: transparent;
    	background-image: none;
    	filter: none;
    }
    
    #nav li li:hover > a,
    #nav ul ul :hover > a,
    #nav li li a:focus {
    	background-color: transparent;
    	background-image: none;
    	filter: none;
    	color: #000;
    	top: 0;
    }
    
    #nav .menu > ul > .current_menu_item > a, #nav .menu > ul > .current_page_item > a, #nav .menu > ul > .current_menu_item > a:hover, #nav .menu > ul > .current_page_item > a:hover, #nav .menu > ul > .current_menu_item > a:focus, #nav .menu > ul > .current_page_item > a:focus, #nav .menu > ul > .current_page_ancestor > a {
        background-color: transparent;
        background-image: none;
    }
    
    .type-post footer, .type-attachment footer{
    	font-size: 12px;
    }

    You can edit the footer font size to get it where you want in the “.type-post footer” section located in the last few lines of the above code.

    Log in to your admin panel and navigate to Appearance > Themes and you should see a theme named “Blaskan Child Theme” activate that theme, and you should see the changes you want.

    That will get you to where you were talking about being earlier.

    There is a general overview in the codex here

    Hi Robert,
    I saw this post after posting a similar question..
    [trying to eliminate the black box tabs and just have gray text in my menu]
    but I had tried this coding you suggested, and nothing changed..
    I keep wondering if something somewhere else is overriding this menu navigation coding, because NOTHING I do will touch the menu.
    ANY help is really appreciated!
    Thank you!
    http://www.bohemiangreens.com

    Hi,

    In your child-theme’s css file this line:

    #footer {
    border-top: 12px solid LightGray;

    Is missing the closing bracket }

    So it should look like this:

    #footer {
    border-top: 12px solid LightGray;
    }

    Let me know if that fixes your problem. If not, we’ll take a deeper look.

    Hi Robert,
    Oh, actually I’ve been playing around in the css file and that little bracket was a victim of recent deletions..
    but that wasn’t my issue..
    I have been trying to change the menu tabs (currently black boxes) to just simple gray text, with no box..
    and I noticed this original thread had that question as well..
    but I tried the coding you suggested to that question,
    and it didn’t work. Any other suggestions?
    Thank you!

    Mishan,

    Would you please paste the following into your child-theme’s css file, and let me know when you’ve done that, so that I can take a look and see where it’s being overridden?

    Thank you.

    @import url("../blaskan/style.css");
    
    #nav a{
    	border-radius: 0;
    	background-image: none;
    	background-color: transparent;
    	border: none;
    	text-shadow: none;
    	color: rgb(0,0,0);
    }
    
    #nav a:focus,
    #nav a:hover{
    	background-image: none;
    	background-color: transparent;
    	color: #F4691A;
    }
    
    #nav .menu > ul:hover > li {
    	opacity: 1;
    }
    
    #nav .menu > ul:hover > li:hover {
    	opacity: 1;
    }
    
    #nav li:hover > a,
    #nav li:focus > a {
    	background-color: transparent;
    	background-image: none;
    	filter: none;
    }
    
    #nav li li:hover > a,
    #nav ul ul :hover > a,
    #nav li li a:focus {
    	background-color: transparent;
    	background-image: none;
    	filter: none;
    	color: #000;
    	top: 0;
    }
    
    #nav .menu > ul > .current_menu_item > a, #nav .menu > ul > .current_page_item > a, #nav .menu > ul > .current_menu_item > a:hover, #nav .menu > ul > .current_page_item > a:hover, #nav .menu > ul > .current_menu_item > a:focus, #nav .menu > ul > .current_page_item > a:focus, #nav .menu > ul > .current_page_ancestor > a {
        background-color: transparent;
        background-image: none;
    }

    HI Robert,

    It worked! Wow – I am not quite sure what you did – but thank you SO much!!

    As you can see, I even already started playing with the different hover color.. I’m going to read it over closely so I can really understand what you did.

    IF you don’t get sick of me.. maybe I can ask you a couple more questions I can’t seem to get help on.

    Thank you!

    Just curious,
    would I be able to increase the font size of the menu text?
    Just trying to get it closer to the size of my widget text or even a little bigger..
    Thank you again!

    In your child theme’s css file under
    #nav a{
    add
    font-size: 14px;
    and just change the pixel size to suit you.

    I’d be happy to help with whatever you need. But, I believe that the forum rules would dictate that each issue needs to be addressed in its own thread so that it can benefit anyone else looking for a solution to the same problem.

    HI Robert,
    Well, you are a genius, and I thank you for all your help!
    I’ll start a new thread, and hopefully cross paths again.
    cheers!

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Replace the menu blocks with black text’ is closed to new replies.