• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Message Title Enhancement

Message Title Enhancement v1

No permission to download

Shelley

Well-known member
#1
Shelley submitted a new resource:

Message Title Enhancement (version v1) - Message title Enhancement


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...
 

DRE

Well-known member
#2
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

Well-known member
#7
Great modification! Never noticed how bland and hidden the thread title was before...

BEFORE:


AFTER:


Once again, you have shown why you are exceptional at design!
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.
 

Shelley

Well-known member
#8
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
 

ArnyVee

Well-known member
#9
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
 

intradox

Well-known member
#10
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?
 

Andy.N

Well-known member
#11
Great improvement, Shelley.
Are these following the default XF semantic in term of header/title tags, etc?
Thanks
 

Shelley

Well-known member
#12
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. :)
 

JABRONI

Well-known member
#16
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
 

Shelley

Well-known member
#17
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 */
 

JABRONI

Well-known member
#18
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?
 

Shelley

Well-known member
#19
Try adding !important before the ";"

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

JABRONI

Well-known member
#20
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?





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