WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Use Icons to Repplace Page Names (12 posts)

  1. David_1
    Member
    Posted 1 year ago #

    Hello Friends,

    I am using a Child of the TwentyTweleve theme.
    My URL is: http://i-brand.ca/jd/

    My question is regarding the Page labels, (or names).
    In my case I have called them Smart-Tab-1 and Smart-Tab-2.

    I need to find a way to replace these names with an icon.

    I know from editing the colour of the text for these to the light blue that the CSS code is located in the following segment of the Style.css as follows:

    .main-navigation li a {
    border-bottom: 0;
    color: #50A6BD;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    }

    If anyone has any thoughts or idea(s) on how I might try to do this I would be most grateful to hear from you.
    I have done a lot of searching on this topic, but found nothing yet.

    Many thanks in advance for your time and advice!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you look at the rendered HTML for the menu - you'll see that each item has a unique id assigned to it - for example:

    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81">
    <a href="http://i-brand.ca/jd/?page_id=76">SMART Tab-1</a>
    </li>

    So you can use that id in your CSS selector to put a background image for that item only.

    But your child theme is not set up correctly - your child style.css file should have only your changes to the CSS, not a copy of the entire parent stylesheet.

  3. David_1
    Member
    Posted 1 year ago #

    Thank you very kindly WPyogi, I really appreciate your help.
    I will definitely give this a try.

    Also I was not aware that the Child of a Theme was to include only the customized changes I wanted to author.

    I will also give this a try. Gosh it sure would help save time and confusion if that is the case wouldn't it?

    I have always thought, (probably read it somewhere) that first you make a copy of the Theme style.css and then change the appropriate text (located near the top) of the style.css to reflect that it is a Child - IE Twentytwelve - Child.

    Thank you again VERY much!
    I really appreciate your help and your taking the time.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, having only your changes in the child theme style.css file makes it MUCH easier to keep track of them. It also avoids having unnecessary duplicate CSS code which only slows down your site loading (though probably not significantly - still duplicate code is never ideal). So just put whatever you've changed in the child theme. If you've already made changes in there - a file comparison program (some text editors will do this) can help you find them.

  5. David_1
    Member
    Posted 1 year ago #

    Again thank you WPyogi!

    This is the comparison editor I use.

    http://www.diffchecker.com/

    I figured I would post it in case others may find it useful.
    Sure works well for me.

    Thank you again.

  6. David_1
    Member
    Posted 1 year ago #

    Golly, there must be something else I am missing or miss-understanding with just using the changes for the Child.
    I over-write (just the changes) I want but it sends the Child Theme out.

    When I put the Entire Child theme CSS back in it seems fine.

    If there are any thoughts I would be all ears as this would be a much better and simpler method of Child authoring.

    This is all I am inserting as it contains only my changes to the TwentyTwelve theme thus far:

    And thank you for making the time to look this over and assist me.

    /*
    Theme Name: Twenty Twelve-Child
    Theme URI: http://i-brand.ca/jd/
    Author: David M - iBrand
    Author URI: http://i-brand.ca/
    Template: twentytwelve
    Version: 1.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, gray, white, one-column, two-columns, right-sidebar,

    flexible-width, custom-background, custom-header, custom-menu,

    editor-style, featured-images, flexible-header, full-width-template,

    microformats, post-formats, rtl-language-support, sticky-post, theme-

    options, translation-ready
    Text Domain: twentytwelve

    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned

    with others.
    */

    @import url("main.css");

    /* =Notes
    --------------------------------------------------------------
    This stylesheet uses rem values with a pixel fallback. The rem
    values (and line heights) are calculated using two variables:

    $rembase: 14;
    $line-height: 24;

    ---------- Examples

    /* Header */
    .site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
    }
    .site-header {
    margin-top: -23px;
    padding: 0;
    }

    /* Navigation Menu */
    .main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
    color: #50a6bd;
    }
    .main-navigation a {
    color: #50a6bd;
    }

    /* =Main content and comment content-------- */

    .entry-header {
    display: none;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    }

    /* =Media queries-------- */

    .main-navigation li a {
    border-bottom: 0;
    color: #50A6BD;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    }

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Your @import line is wrong - it should be thus:

    @import url("../twentytwelve/style.css");
  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    And you're copying in whole chunks of the parent theme's CSS; Try just using:

    /*
    Theme Name: Twenty Twelve-Child
    Theme URI: http://i-brand.ca/jd/
    Author: David M - iBrand
    Author URI: http://i-brand.ca/
    Template: twentytwelve
    Version: 1.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, gray, white, one-column, two-columns, right-sidebar,
    Text Domain: twentytwelve
    */
    
    @import url(../twentytwelve/style.css);
    
    .entry-header {
    	display: none;
    }
    .main-navigation li a {
    	color: #50A6BD;
    }
  9. David_1
    Member
    Posted 1 year ago #

    Oh I see.

    Similarly to how I am importing my other file: @import url("main.css");

    This is how I connect the original Twentytwelve style.css also.

    I got it! Good grief, you would think I would have caught that.

    Thank you again WPyogi..! :)

  10. David_1
    Member
    Posted 1 year ago #

    Thank you Esmi,

    My thoughts were only that if I had (some) of the chunks in the Child, they would act as references for the future so I would know what areas they pertained to.

    Perhaps just having the http://www.diffchecker.com/ on hand would be enough?

    Thank you again Esmi and WPyogi!

    With all this help, I am almost afraid to ask for a bit of clarity on my original question.

    WPyogi, you mentioned that I could use: (see below) id in my CSS selector to put a background image for that item only.

    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81">
    SMART Tab-1

    I would think I could write this in my Child as:

    .menu-item-81 {
    background-image: url(images/xyzl.jpg)
    }

    Can I ask is this where your thoughts were?

    Thank you again folks!

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're totally on the right track - but you just need to use a bit different CSS selectors so the image goes to the right place - see if this works

    .main-navigation li.menu-item-XX {
        background-image: url(images/xyzl.jpg);
    }

    Obviously, change the menu item XX - and you'll need to copy and change this for each menu tab.

  12. David_1
    Member
    Posted 1 year ago #

    Thank you again WPyogi!
    And Esmi!

    Your help today has been extremely valued and appreciated in many ways!

Topic Closed

This topic has been closed to new replies.

About this Topic