Message Title Enhancement

Message Title Enhancement v1

No permission to download
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.

Can you link me to your forum?
 
ah try adding:
Code:
.thread_view .titleBar a h1 {
    color: #FFFFFF !important;
  text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
}

Nope :[

For some reason, the text shadow is taken from the one without the a before the h1, but the font color isn't.
 
I edited my post above my mistake try the edit version i made switching the "a" to the end. Sorry
 
Hi Shelley,
Can we get a css3 alternative for the gradient background image?
Thanks

Sure thing. Give me a till tomorrow (i've got some mood icons to slice and make blank for a translator) and some other design for people to get through but once I get those out of the way I'll do the css3 gradient variation of this release.


Have you got a link to your modified thread title enhancement 8thos? I'm curious to see what you did with that?
 
Sure thing. Give me a till tomorrow (i've got some mood icons to slice and make blank for a translator) and some other design for people to get through but once I get those out of the way I'll do the css3 gradient variation of this release.



Have you got a link to your modified thread title enhancement 8thos? I'm curious to see what you did with that?
I'll create another resource that will link back to your resource and Brogan's since I also did the same thing to the forum home. http://www.8thos.com/forums/global-chat.14/ I'm going to try to do this same modification to conversation titles as well real quick. It's minor but it's been very handy because I got tired of noobs asking me how to create threads or reply. They no longer have no excuse with the link being RIGHT IN FRONT OF THEIR FACE. Haven't had a question about how to create threads or reply to posts since...
 
I'll create another resource that will link back to your resource and Brogan's since I also did the same thing to the forum home. http://www.8thos.com/forums/global-chat.14/ I'm going to try to do this same modification to conversation titles as well real quick. It's minor but it's been very handy because I got tired of noobs asking me how to create threads or reply. They no longer have no excuse with the link being RIGHT IN FRONT OF THEIR FACE. Haven't had a question about how to create threads or reply to posts since...

Very very nice. Great job (y)

You've giving me an idea now but that'll entail a html/template edit.
 
Hi Shelley,
Can we get a css3 alternative for the gradient background image?
Thanks

Here's the css3 gradient version of the message title enhancement I submitted.

Code:
/* THREAD VIEW TITLE BAR ENHANCEMENTS USING CSS3 GRADIENTS */

.thread_view .titleBar {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #891010 !important; /* Old browsers */
background: -moz-linear-gradient(top, #871212 0%, #7d0d0d 37%, #6f0808 72%, #630505 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#871212), color-stop(37%,#7d0d0d), color-stop(72%,#6f0808), color-stop(100%,#630505)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #871212 0%,#7d0d0d 37%,#6f0808 72%,#630505 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #871212 0%,#7d0d0d 37%,#6f0808 72%,#630505 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #871212 0%,#7d0d0d 37%,#6f0808 72%,#630505 100%); /* IE10+ */
background: linear-gradient(to bottom, #871212 0%,#7d0d0d 37%,#6f0808 72%,#630505 100%); /* W3C */
    border: 1px solid #5b0b0b;
    border-radius: 5px;
    margin:0px 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 #pageDescription a{
   color: #f7e5b6;
   font-weight: bold;
}

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


/* THREAD VIEW TITLE BAR ENHANCEMENTS USING CSS3 GRADIENTS */
 
Here's another css3 alternative colour with the gradient image attached in the attachment manager for older browser fallback.

ornage.webp


Code:
/* THREAD VIEW TITLE BAR ENHANCEMENTS */

.thread_view .titleBar {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #EA6541; /* Old browsers */
background: -moz-linear-gradient(top, #ea6541 0%, #af3413 50%, #8e1e00 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea6541), color-stop(50%,#af3413), color-stop(99%,#8e1e00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ea6541 0%,#af3413 50%,#8e1e00 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ea6541 0%,#af3413 50%,#8e1e00 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ea6541 0%,#af3413 50%,#8e1e00 99%); /* IE10+ */
background: linear-gradient(to bottom, #ea6541 0%,#af3413 50%,#8e1e00 99%); /* W3C */
    border: 1px solid #621500;
    border-radius: 5px;
    margin:0px 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 #pageDescription a{
   color: #f7e5b6;
   font-weight: bold;
}

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


/* THREAD VIEW TITLE BAR ENHANCEMENTS */
 

Attachments

  • threadview-bg.webp
    threadview-bg.webp
    156 bytes · Views: 28
Here's another css3 alternative colour (Blue) with the gradient image attached in the attachment manager for older browser fallback.

blue.webp


Code:
/* THREAD VIEW TITLE BAR ENHANCEMENTS */

.thread_view .titleBar {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #1982b9; /* Old browsers */
background: -moz-linear-gradient(top, #1982b9 0%, #036496 50%, #014d75 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1982b9), color-stop(50%,#036496), color-stop(100%,#014d75)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* IE10+ */
background: linear-gradient(to bottom, #1982b9 0%,#036496 50%,#014d75 100%); /* W3C */
    border: 1px solid #00293f;
    border-radius: 5px;
    margin:0px 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 #pageDescription a{
   color: #f7e5b6;
   font-weight: bold;
}

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


/* THREAD VIEW TITLE BAR ENHANCEMENTS */
 

Attachments

  • threadview-bg.webp
    threadview-bg.webp
    162 bytes · Views: 61
Top Bottom