Support » Theme: Customizr » How to have 2 fonts on same line

  • First of all my site is temporary while I build it so you wouldn’t be able to see it without a password.
    1. Where are H1 through H6 defined? when I look in style.css I don’t see anything referring to these.

    I have a list and I want the first part of each line in the list to be bold and a larger text than the description next to it.
    Example: I would want the words Apple, Orange, and Kiwi to be larger and bold and then the description next to it smaller. In my real website, the words Apple, Orange, and Kiwi will open up a pdf brochure. I already have that part working. It is the visual text and changing font within the same line that is giving me trouble. I will post the HTML that I have so far. My current HTML takes Apple and makes it larger but then puts the description on a new line.

    Apple – a red or green fruit
    Orange – an orange fruit
    Kiwi – a green fruit

    The HTML below makes my example look like this: I am experimenting and was able to make Apple a different font and then the description reverts to a default font which is good but I don’t want a line break in between.

    Apple
    – a red or green fruit
    Orange – an orange fruit
    Kiwi – a green fruit.

      <H4>

    • Apple</H4>Job-fit – cognitive thinking styles, behavioral traits, and occupational interests compared to your job benchmark
    • Orange – selecting, training, and coaching salespeople who become more productive and successful
    • Kiwi – proficiencies, behavioral traits, and cultural fit compared to your job benchmark

    Thank you.
    Brandi

Viewing 5 replies - 1 through 5 (of 5 total)
  • function change_style( $atts, $content = null ) {
    	extract( shortcode_atts( array(
    		'class' => 'myCustomstyling', // class name in css
    		'link' => '1', // link to pdf
    
    	), $atts ) );
    
    	return '<span class="'.$class.'"><a href="'.$link.'">' . $content . '</a></span>';
    }
    add_shortcode( 'bigfont', 'change_style' );

    //put the above code to your functions file
    //put the live below in editor, this will not effect the sryling and add the custom style name to your style sheet too and define what ever style you want.
    [bigfont class=heading link=http://linktopdf.com]Apple[/bigfont]

    Thread Starter sdevendorf

    (@sdevendorf)

    Thank you all. I see functions.php in the edit theme area on WordPress. Should I put the code above into the Appearance, Customize area under Custom CSS?
    Otherwise from what I read when I would upgrade the Theme, the changes wouldn’t be saved?
    It also talks about a Child Theme but I am not sure where that would be.

    Thanks again.

    yes with the code above if you upgrade the theme the changes will be lost.

    However if you wish to add a child theme to your wordpress.
    The structure will be like this.
    themes/yourtheme/
    themse/yourtheme-child/

    in(themse/yourtheme-child/) you must add style.css with following code.

    /*
     Theme Name:     Your Theme Name
     Theme URI:      http://example.com/ Your Theme URI/
     Description:    Your Theme Description
     Author:         ABC
     Author URI:     http://example.com
    */
    
    @import url("../yourtheme/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

    And to add the shortdcode mentioned in my previous comment also create (themse/yourtheme-child/functions.php) Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php.

    If you still need help you are welcome!. oR Kindly Set the Topic status to resolved 🙂

    Boy, that seems to be an awful lot of work for something that could just be done using CSS.

    The reason why your descriptions are breaking to a new line is because you are using heading (H) tags (e.g., H1, H2, H3, etc). Heading tags are defined by default to be “block” level elements, meaning they appear by themselves in their own block. Other block level elements are DIV and P (paragraph).

    What I would do is create some CSS rules and assign classes to the different anchor tags. For example, you could define these CSS rules:

    .fruit {
       font-size: 26px;
       font-weight: bold;
       display: inline;
    }
    .apple {
       color: #ff0000;  /* Red */
    }
    .orange {
       color: #ffa500;  /* Orange */
    }
    .kiwi {
       color: #00ff00;  /* Green */
    }

    So the above rules defines styling that’s common to all “fruit” class elements, and then individual styling for each class of fruit. The display: inline property means to display the element as inline instead of block (in case you wanted to use it as part of a heading).

    Then in your code, you would assign the different classes to your anchor/link elements like this, you wouldn’t even need to use heading tags:

    <a class="fruit apple" href="http://www.pdservices.com/pdf/FactSheetProfileXT.pdf" target="_blank">Apple</a> - a red or green fruit
    <a class="fruit orange" href="http://www.pdservices.com/pdf/FactSheetPSA.pdf" target="_blank">Orange</a> - an orange fruit
    <a class="fruit kiwi" href="http://www.pdservices.com/pdf/FactSheetCSP.pdf" target="_blank">Kiwi</a> - a green fruit.

    What’s nice about this approach is that you only need to change the font styling (size, weight, font family, etc) in one place to affect all of the fruit class elements, and then each individual fruit class has its own color.

    You can even apply the classes to other elements:

    An <span class="fruit apple">apple</span> a day keeps the doctor away.

    If you just wanted to affect the color but not the size, just use the apple class, for example:

    An <span class="apple">apple</span> a day keeps the doctor away.

    If you wanted a different size for h4 headings, you could add this rule, for example:

    h4.fruit {
       font-size: 32px;
    }

    Then in your post, you would just add the fruit class to your h4 tag:

    <h4 class="fruit kiwi">Kiwi</h4>

    As noted by cgxsdream, you do not want to make changes to your theme’s CSS file. If your theme does not have a custom CSS option, you can add the CSS using a plugin like Lazyest Stylesheet or Custom CSS Manager.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to have 2 fonts on same line’ is closed to new replies.