Message Title Enhancement

Message Title Enhancement v1

No permission to download

Shelley

Well-known member
Shelley submitted a new resource:

Message Title Enhancement (version v1) - Message title Enhancement

gAkxw.png
sxxzz.png

Summary: This will give your message title a visual which I think looks nice. I've used an image but i ought to have used some css3 gradient and fallback on the image which you are free to do but this give you the idea to enhance it further.

Install: Upload the image in the archive to your /gradients folder...

Read more about this resource...
 
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.
 
Great modification! Never noticed how bland and hidden the thread title was before...

BEFORE:
nRex7.png


AFTER:
Sj71r.png


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

Really liking what you did with the title enhancement, excellent work. :thumbsup: 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.
 
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.webp
 
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.webp
 
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 :)

View attachment 32632
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?
 
Great improvement, Shelley.
Are these following the default XF semantic in term of header/title tags, etc?
Thanks
 
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 :)

View attachment 32632

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. :)
 
The before and after shots are much more convincing, i'd recommend using before / after screenshots on the mod description page.
 
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
 
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

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 */
 
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?
 
Try adding !important before the ";"

Code:
.thread_view .titleBar h1 {
   color: #f7e5b6 !important;
   text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
}
 
Try adding !important before the ";"

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

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

fd9a6853997224e137ddb2ccfeb8105a.png


fd529e1494030864b1536194542e2cfe.png


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