Remove byline and the word 'by' in the Triton Lite Theme

  • Unknown's avatar
    sanchitgogia · Member ·

    Hi Folks,

    This query is regarding http://greyhoundgroup.com – I’m currently using the Triton Lite theme.

    I’ve two quick queries –

    1) While I’ve been able to remove the author and date in the byline below the Title, I’m not able to remove the word ‘by’. How can I remove this word?

    2) Once the word ‘by’ has been removed, I would then like to remove the white space between the title and text. Any suggestions on how can I do this?

    I’m currently using the following CSS customization:

    .author {
    display: none;
    }

    .entry-date {
    visibility: hidden;
    }

    .post-meta {
    display: none;
    }

    Thanks in advance for your help.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    Remove the above and add this instead: 

    .by-author, .single-metainfo {
    display: none;
}
  • Unknown's avatar
    sanchitgogia · Member ·

    Thanks a lot Justpi! Truly awesome, cannot thank you enough.

    I have two more questions, if you don’t mind, please?

    1. When I move the mouse on the featured image, the date and a slider still shows up – I would like to remove these as well.

    2. Currently, the articles are shown in three columns (please see http://greyhoundgroup.com/category/companies/) – I would like these to be shown up in two columns instead. This would help balance the page in case of even number of articles.

    Thanks a lot again for your help.

    Cheers!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!
    1. Turn my previous suggestion to this: 

    .by-author, .single-metainfo, .lay1 > div .date-meta {
    display: none;
}

    2. The three-column layout isn’t produced by the CSS of the theme, it’s produced by the masonry layout script. This script assigns an absolute position to each post, so the only way I can think of that would allow you to turn the 3 columns to 2 is a separate piece of CSS for each one of your 6 posts-per-page; the required CSS won’t work in IE8 or earlier, so I don’t think it’s reasonable to attempt this.

  • Unknown's avatar
    sanchitgogia · Member ·

    Thanks a lot, Justpi! Truly appreciate all your help :)

    1. Done. Works smooth!

    2. Sure, agree with you. Thanks for the inputs. My only struggle is giving visibility to all four companies (see this page – http://greyhoundgroup.com/category/companies/) – tried doing away with the featured image but then it’s picking up pictures from the post. Hence, cannot do that as well. Guess will have to keep it like this for now, unless you have a better suggestion :)

    I have another quick query – my last question (very sorry about this) – and no more post this for sure.

    Question – In the middle row, I have two gallery widgets and I would like to remove their deep grey background to match the row colour of light grey. Can you please help?

    Thanks in advance.

  • Unknown's avatar
    justpi · Member ·

    a) You can create a static page, add texts and images that link to the ‘company’ posts, and use HTML and CSS to turn them into a row of four blocks (or 2 rows 2 columns).
    b) You mean the two slideshows? To remove the dark grey frame, add this: 

    .slideshow-window {
    background-color: transparent !important;
    border: 0 none !important;
}

    In my opinion this won’t look good, so I would suggest an alternative – see if you like it: 

    .slideshow-window {
    background-color: #FFFFFF !important;
    border: 1px solid #999999 !important;
    padding: 19px !important;
}
.slideshow-slide {
    margin: 19px !important;
}
  • Unknown's avatar
    sanchitgogia · Member ·

    Thanks for the quick revert, really appreciate.

    Will try option a) and keep you posted.

    For b), agree with your suggestion and used it – but strangely, all the pics in the slideshow have now aligned towards right. I removed the CSS change but the alignment isn’t going back to it’s normal center. Really not sure why this has happened. Can you suggest something to rectify this, please? I’m copying all the CSS changes below for your reference. Thank you.

    #header {
    border-bottom: 0 none;
    height: 50px;
    }

    .lay1 > div {
    border-bottom: 0 none;
    }

    #footer .widget {
    margin-right: 35px;
    width: 200px;
    }

    .archive .archive-title {
    display: none;
    }

    .lay1 > div .imgwrap {
    opacity: 1 !important;
    }

    #sidebar .widgets .widgettitle, #sidebar .widgets .widgettitle a {
    font-size: 18px;
    }

    #sidebar .widget {
    margin-bottom: 0;
    }

    .menu {
    text-align: center;
    }

    .menu ul {
    display: inline-block;
    }

    .by-author, .single-metainfo, .lay1 > div .date-meta {
    display: none;
    }

    .entry-date {
    visibility: hidden;
    }

    .post-meta {
    display: none;
    }

    #wrapper {
    position: relative;
    }

    .widget_search {
    position: absolute;
    top: 10px;
    right: 0;
    }

    #searchform #s, #searchsubmit {
    background: #F9F9F9;
    border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1) inset;
    color: #7F7F7F;
    font-family: sans-serif;
    font-size: 14px;
    padding: 2px;
    }

    #searchform #s {
    float: left;
    margin-right: 5px;
    width: 50px;
    }

    #searchform #s {
    height: 20px;
    margin-bottom: 1px;
    width: 40%;
    }

    #sidebar .widgets .widgettitle, #sidebar .widgets .widgettitle a {
    border-bottom: 3px solid #0266C8;
    }

    .lay1 > div .postitle a {
    text-transform: none;
    }

    #posts .postitle, #posts .postitle a {
    text-transform: none;
    }

    .lay1 > div:hover .read-more {
    color: white;
    background-color: #0266C8;
    }

    .slideshow-window {
    background-color: #FFFFFF !important;
    border: 1px solid #999999 !important;
    padding: 19px !important;
    }
    .slideshow-slide {
    margin: 19px !important;
    }

  • Unknown's avatar
    justpi · Member ·

    Really not sure why this has happened.

    Because I made a mistake!
    Turn this: 

    .slideshow-slide {
margin: 19px !important;
}

    to: 

    .slideshow-slide {
    margin: 19px auto !important;
}

    And add this too, to correct the alignment of the controls: 

    .slideshow-controls {
    margin: auto -19px !important;
}
  • Unknown's avatar
    sanchitgogia · Member ·

    Thanks, Justpi. you are such a life saver!

    1) The pics are in place, but the text is out of box and not fitting in.

    2) And is there a way to make the text darker for it to show in the white box?

    I know I’m being a pain but just these two things and we are done for sure. Thanks again.

  • Unknown's avatar
    justpi · Member ·

    The problem is that the captions are too long and the slideshow is too small. Here’s a questionable solution: 

    .slideshow-slide-caption {
    bottom: 17px;
    color: #413D3D;
    font-size: 8px;
    text-shadow: none;
}

    And another thing: have you inserted or are you going to insert other slideshows in posts or pages? If so, all these slideshow customizations must be modified to apply to the widget slideshows only.

  • Unknown's avatar
    sanchitgogia · Member ·

    Thanks again for the help, Justpi.

    The captions are same from before – they fitted really well in the previous box. Tried the CSS code you shared but I’m afraid that’s not working. Any other solution to this problem?

    And thanks for the heads up on other slide shows I’ll keep that in mind and add .widget to the CSS if and when I plan to add more slide shows.

    Thanks again.

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.
    Here’s some CSS to correct the positioning of the captions: 

    .slideshow-slide-caption {
    bottom: 50px !important;
    line-height: 15px !important;
}

    (The captions “fitted really well” originally, because there was a dark frame. Now that the frame is white, they don’t look ok to me.)

  • Unknown's avatar
    sanchitgogia · Member ·

    Awesome! Looks much better now, played with the padding and Caption text. Thanks a ton.

    Tried getting rid of text shadow to improve the look but to no luck…

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.
    If “no luck” means you don’t know how to remove the shadow, you do it this way:
    text-shadow: none !important;

  • Unknown's avatar
    sanchitgogia · Member ·

    The only thing I didn’t add is ‘!important’ :)

    Thanks again, Justpi for all the patience and help. Really appreciate it.

  • Unknown's avatar
    justpi · Member ·

    You’re welcome again!
    Every rule you add requires the “!important” tag when it comes to the WP slideshow, because the CSS of the slideshow isn’t part of the default CSS of the theme: the slideshow is a separate script, it has its own CSS (same CSS no matter what the theme), and its CSS loads after your additions, so it overrides your additions unless your additions include “!important”.
    (And this explains why my Oct.6 suggestion didn’t work: I worked it out in Firebug but forgot to add “!important” before pasting it here…)

  • Unknown's avatar
    sanchitgogia · Member ·

    ah, got it! Thanks mate, you are such a star ;-)

  • The topic ‘Remove byline and the word 'by' in the Triton Lite Theme’ is closed to new replies.