1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Message Title Enhancement v1

Message title Enhancement

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

    Message Title Enhancement (version v1) - Message title Enhancement

    Read more about this resource...
     
    resonansER, PVO_Dave, Big Dan and 2 others like this.
  2. DRE

    DRE Well-Known Member

    Tried to pm you but your missing a b where it says background-color. Only mentioned it because I'm about to try this out on my site.
     
    Shelley likes this.
  3. DRE

    DRE Well-Known Member

    K I added it to my site and it looks wonderful. Thanks Shelley!
     
  4. intradox

    intradox Well-Known Member

    Great modification! Never noticed how bland and hidden the thread title was before...

    BEFORE:
    [​IMG]

    AFTER:
    [​IMG]

    Once again, you have shown why you are exceptional at design!
     
  5. Shelley

    Shelley Well-Known Member

    Good catch. Thanks for alerting me of that and corrected. (y)
     
    8thos likes this.
  6. DRE

    DRE Well-Known Member

    My site looks like a brand new site cause of this.
     
    gordy likes this.
  7. Shelley

    Shelley Well-Known Member

    Really liking what you did with the title enhancement, excellent work. (y) I apologize in advance but i can't help myself (because your style looks great) but I think styling your prefixes to compliment that title enhancement would really set it off nicely and make a big improvement to it.
     
    ArnyVee likes this.
  8. Shelley

    Shelley Well-Known Member

    I went with doing the h1 title on index but yeah ensuring they don't display was intentional in that area because some add-ons don't like this kind of styling.

    Edit: I'm going to look at doing a 3 part image so more complex designs can be done. Mainly because on fluid styles it'll have to repeat and/or if your using a toggle sidebar feature even on fixed styles the more complex design will need slicing. Something I'm currently looking into and will submit once I completed that.

    h1-index.png
     
    Sylar and ArnyVee like this.
  9. ArnyVee

    ArnyVee Well-Known Member

    Shelley, this is a beautiful improvement! Thanks! :)

    One question .... can you take a look at this and help me with adjustments to be made. I'm using Flexile and you'll notice that the top of the message title area 'touches' the breadcrumbs, there is more space between the title and 'top' of the message title area and there seems to be more space needed between the bottom of the message title area and the 'go to first unread' line there.

    I haven't started to modify the code, but figured I'd ask an expert before I started messing things up :)

    message_title01.jpg
     
  10. intradox

    intradox Well-Known Member

    Looks like something is wrong with the top-margins and top-padding. If you have google chrome, try experimenting with different amounts using chrome dev tools?
     
  11. Andy.N

    Andy.N Well-Known Member

    Great improvement, Shelley.
    Are these following the default XF semantic in term of header/title tags, etc?
    Thanks
     
  12. Shelley

    Shelley Well-Known Member

    You don't happen to have a link i could check.

    It's def a padding and margin issue

    edit: if you don't mind me adjusting it or fixing it directly feel free to pc me arny it'll help in getting other people who use flexille that use this with this issue resolved. :)
     
    Andy.N likes this.
  13. gordy

    gordy Well-Known Member

    The before and after shots are much more convincing, i'd recommend using before / after screenshots on the mod description page.
     
    Shelley likes this.
  14. Shelley

    Shelley Well-Known Member

    Added the before shots in the release thread and the discussion post.
     
    gordy likes this.
  15. ArnyVee

    ArnyVee Well-Known Member

    PC sent :)
     
  16. JABRONI

    JABRONI Well-Known Member

    Yeah, I'm using Flexile & tried it yesterday. Just assumed it was something wrong with my skin, so I didn't report it.

    Same problem as @ArnyVee
     
  17. Shelley

    Shelley Well-Known Member

    Here's the Flexille fix. Let me know if there's any issues.

    Code:
    /* SHELLEY EDIT THREAD TITLE ENHANCEMENTS FIX FOR FLEXILLE */
    
    .thread_view .titleBar {
        border: 1px solid #5b0b0b;
        border-radius: 5px;
        background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #891010 !important;
        background-color: #891010 !important;
        margin: 15px auto;
        text-align: center;
        padding: 10px 10px;
        box-shadow: 0 0 1px #ffffff inset;
    }
    .thread_view .titleBar  #pageDescription , .thread_view .titleBar p{
        color: #DCCDBB;
    }
    
    .thread_view .titleBar h1 {
        margin-top: 0 !important;
    }
    
    .thread_view .titleBar #pageDescription a{
      color: #f7e5b6;
      font-weight: bold;
    }
     
    .thread_view .titleBar h1 {
      color: #f7e5b6;
      text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
    }
    
    /* SHELLEY EDIT THREAD TITLE ENHANCEMENTS FIX FOR FLEXILLE */
    
     
    BioRage likes this.
  18. JABRONI

    JABRONI Well-Known Member

    For some reason, it seems to want to pull this from my CSS for the thread title.

    Code:
    a:link,
    a:visited
    {
        color: rgb(33, 123, 213);
    text-decoration: none;
     
    }
    So, I can't really change the thread title color w/o changing all the visited links. Would you happen to know any way around it?
     
  19. Shelley

    Shelley Well-Known Member

    Try adding !important before the ";"

    Code:
    .thread_view .titleBar h1 {
       color: #f7e5b6 !important;
       text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
    }
    
     
  20. JABRONI

    JABRONI Well-Known Member

    Nope, didn't work. Maybe this can help?

    [​IMG]

    [​IMG]

    The h1 is correct, but the child is pulling it from my main CSS.
     

Share This Page