WordPress.org

Ready to get started?Download WordPress

Forums

Blaskan
Replace the menu blocks with black text (21 posts)

  1. robjohns
    Member
    Posted 8 months ago #

    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

    http://wordpress.org/themes/blaskan/

  2. Robert Bardall
    Member
    Posted 8 months ago #

    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...

  3. esmi
    Theme Diva & Forum Moderator
    Posted 8 months ago #

    @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.

  4. Robert Bardall
    Member
    Posted 8 months ago #

    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.

  5. Robert Bardall
    Member
    Posted 8 months ago #

    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!

  6. robjohns
    Member
    Posted 8 months ago #

    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

  7. Robert Bardall
    Member
    Posted 8 months ago #

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

  8. Robert Bardall
    Member
    Posted 8 months ago #

    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

  9. mishanjoon
    Member
    Posted 4 months ago #

    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

  10. Robert Bardall
    Member
    Posted 4 months ago #

    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.

  11. mishanjoon
    Member
    Posted 4 months ago #

    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!

  12. Robert Bardall
    Member
    Posted 4 months ago #

    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;
    }
  13. mishanjoon
    Member
    Posted 4 months ago #

    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!

  14. mishanjoon
    Member
    Posted 4 months ago #

    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!

  15. Robert Bardall
    Member
    Posted 4 months ago #

    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.

  16. mishanjoon
    Member
    Posted 4 months ago #

    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!

  17. xandermcnight
    Member
    Posted 4 months ago #

    Thank you also Robert for sharing your thoughts and great brilliant ideas.

  18. mishanjoon
    Member
    Posted 4 months ago #

    Sorry to be a bugger..
    but just one (well, two) more questions re: menu color/change..

    (1) is there a way to have the current page I'm on stay the pink hover color while I'm on that page?

    and (2) (this is going to sounds super crazy).. is there a way to not have the little dotted box outline pop up when I click on that menu item? (super ocd, I'm so to ask, but really curious!)..

    and please excuse all the pink..
    thank you!

  19. Robert Bardall
    Member
    Posted 4 months ago #

    Mishan,

    Sorry that it has taken me so long to get back to you, I've been a bit busy today.

    1. In your child theme css find:

    #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;
    }

    and add:

    color: #f96eec;

    after the "background-image: none;" property

    2. Adding the following to your child theme's CSS will take care of the outline:

    a {
       outline: 0;
    }

    More information on that can be found here: CSS Tricks - Removing the Dotted Outline

    I hope that helps!

  20. mishanjoon
    Member
    Posted 4 months ago #

    Robert, you've been a blessing.
    Yes, both of those worked perfectly.
    THANK YOU SOOO much!

  21. mishanjoon
    Member
    Posted 3 months ago #

    Hi Robert,

    I thought I'd try to reach you here because I was wondering if you also use the Blaskan theme, and if so, I was curious if you had experienced any changes to the pages formatting.

    I had opted out of using the sidebar on my pages only, but today saw that all my pages are now formatted as IF the sidebar is there (even though it doesn't show), but I can't seem to figure out how to make my pages full-width again..

    Would you have any suggestions?

    Thank you if you're out there!

Reply

You must log in to post.

About this Theme

About this Topic

Tags