Home Forums Porto Admin Template Mail Reply Icons

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10030386
    simplyjessica
    Participant

    Hey another question,

    When you go to read an email, you have icons top right, reply, reply all, etc. When I add text next to them like so:

    <div class="card-actions">
    													<a href="#" class="card-action card-action-toggle" data-card-toggle></a>
    													<a href="#" class="fas fa-reply">Reply</a>
    													<a href="#" class="fas fa-reply-all">Reply All</a>
    													<a href="#" class="fas fa-forward">Forward</a>
    												</div>

    There is not enough room in the column and it looks goofy. I cannot find which column to increase size though to make this work, can you please point me in the right direction, thanks.



    Template Version: 2.1.1
    #10030387
    simplyjessica
    Participant
    <div class="card-actions">
    	<a href="#" class="card-action card-action-toggle" data-card-toggle></a>
    	<a href="#" class="fas fa-reply">Reply</a>
    	<a href="#" class="fas fa-reply-all">Reply All</a>
    	<a href="#" class="fas fa-forward">Forward</a>
    </div>

    #10030390
    Support2
    Keymaster

    Hello,

    For add text we need some custom CSS. Please try with this:

    (css/custom.css):

    .card-actions a, .card-actions .card-action {
        width: auto;
        margin-left: 10px;
    }
    
    .card-actions a:before {
        margin-right: 5px
    }

    We hope this helps.

    Kind Regards,

    Rodrigo.


    #10030396
    simplyjessica
    Participant

    Hi Rodrigo,

    This did the trick, but the font is off, looks like Arial or something. Assuming we need to add something more to the css file?

    Thx!


    #10030398
    Support2
    Keymaster

    Hello,

    Oh right.

    On this case please wrap the text into a <span>:

    <div class="card-actions">
    	<a href="#" class="card-action card-action-toggle" data-card-toggle></a>
    	<a href="#" class="fas fa-reply"><span>Reply</span></a>
    	<a href="#" class="fas fa-reply-all"><span>Reply All</span></a>
    	<a href="#" class="fas fa-forward"><span>Forward</span></a>
    </div>

    And change the CSS code to:

    .card-actions a, .card-actions .card-action {
        width: auto;
        margin-left: 10px;
    }
    
    .card-actions a:before {
        margin-right: 5px
    }
    
    .card-actions a > span {
    	font-family: "Open Sans";
    	font-weight: normal;
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030401
    simplyjessica
    Participant

    Perfect, that worked.

    When viewing the main INBOX, you see a checkbox, then the sender name, then the subject followed by some content. On the far right, you guys have the times of the email, ie https://preview.oklerthemes.com/porto-admin/2.2.0/mailbox-folder.html 11:35 on the far right.

    I want to put AUG 5, 2019 1335hrs but the text is too long and wraps, and it offsets the entire design. Anyway to increase that portion?


    #10030403
    Support2
    Keymaster

    Hello,

    You need to increase with CSS.

    Please add in (css/custom.css):

    .mailbox .mailbox-email-list .col-mail .mail-content {
        right: 260px;
    }
    
    .mailbox .mailbox-email-list .col-mail .mail-date {
        width: 255px;
    }
    
    .mailbox .mailbox-email-list .col-mail .mail-attachment {
        right: 190px;
    }

    Change the values according your necessity of space.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030405
    simplyjessica
    Participant

    Thanks!!


Viewing 8 posts - 1 through 8 (of 8 total)