Message Title Enhancement

Message Title Enhancement v1

No permission to download
Shelley,
How do we apply this to page title as well?

I haven't tested it but sure I altered the page node titles at some point.

You could try and replace the instances of .thread_view with .pagenode_container though you may have to tweak the css a little but chances are you won't have to tweak pending it works.
 
Just a confirmation that .pagenode_container will work if you want to apply this to pagenode titles. It'll look something like this (below) obviously you would alter it to your preferences I used the blue css 3 gradient enhancement as the example.

page-node-title-enhancement.webp

Code:
/* PAGE NODE TITLE BAR ENHANCEMENTS */
 
.pagenode_container .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;
}
.pagenode_container .titleBar  #pageDescription ,  .pagenode_container .titleBar p{
    color: #DCCDBB;
}
 
.pagenode_container .titleBar #pageDescription a{
  color: #f7e5b6;
  font-weight: bold;
}
 
.pagenode_container  .titleBar h1 {
  color: #f7e5b6;
  text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
}
 
 
/* PAGE NODETITLE BAR ENHANCEMENTS */
 
Hi Shelley,
Thanks a lot. These are great visual enhancements.

Can you help with adding these to the XenPorta RecentNews titles? I use Flexile as well.
You can take a look here
 
I don't use any of jaxels add-ons but looking at it in firebug you would alter the subHeading

#recentNews .subHeading
 
Hi Shelley,
Thanks a lot. These are great visual enhancements.

Can you help with adding these to the XenPorta RecentNews titles? I use Flexile as well.
You can take a look here

I've just been playing with it in firebug and when you get it working here's what it'll look like as you may not like this so best be sure beforehand.

andy.webp
 
I've just been playing with it in firebug and when you get it working here's what it'll look like as you may not like this so best be sure beforehand.

View attachment 32861
I think it looks better, no? What do you think Shelley?
What I would like is the background color matching the blue scheme of the header for consistency.
I'm using @primaryMedium and @primaryDark
 
hmmmm I think what you have looks okay.


I'm in the process of creating a new gradient image matching your header colours plus the css3 to match.

If you trust me enough i can give this a try and modify it to what your wanting but i would need admincp access to the template specifically extra css but i would need you to upload a gradient image for me into your gradients folder.
 
hmmmm I think what you have looks okay.


I'm in the process of creating a new gradient image matching your header colours plus the css3 to match.

If you trust me enough i can give this a try and modify it to what your wanting but i would need admincp access to the template specifically extra css but i would need you to upload a gradient image for me into your gradients folder.
Thanks a lot. I can make an account for you with access to styles. Can you send me a PC?
 
Thanks a lot. I can make an account for you with access to styles. Can you send me a PC?

Try this first Andy i might not need to touch anything.

Upload the image to your gradients folder and then paste the following into your extra.css I'm unsure whether this will work or i got this correct as I did everything through firebug.

Code:
#recentNews .subHeading {
background: url("insert/your/image/path/andysimage.png") repeat-x scroll center top #355d85; /* Older Browsers */
background: -moz-linear-gradient(top, #7fa6cf 0%, #517faf 50%, #38618b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa6cf), color-stop(50%,#517faf), color-stop(100%,#38618b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7fa6cf 0%,#517faf 50%,#38618b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7fa6cf 0%,#517faf 50%,#38618b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7fa6cf 0%,#517faf 50%,#38618b 100%); /* IE10+ */
background: linear-gradient(to bottom, #7fa6cf 0%,#517faf 50%,#38618b 100%); /* W3C */
    border: 1px solid #2A4969 !important;
    border-radius: 6px !important;
    margin: 15px 0 !important;
    padding: 10px 0 !important;
    text-align: center;
}

#recentNews .subHeading a {
    color: #F3F3F3 !important;
    text-shadow: 0 0 0 transparent, 0 1px 2px #2A4969;
}
 

Attachments

  • andysimage.webp
    andysimage.webp
    148 bytes · Views: 24
I'm looking to spruce up my message title, but I also want to move it to just above the first message in a thread.

I know where the code needs to be moved to and I've styled it using the Chrome web inspector. But now I can't seem to figure out what code it is that generates the titleBar to copy it in. Any one know where I can find it?
 
Just a confirmation that .pagenode_container will work if you want to apply this to pagenode titles. It'll look something like this (below) obviously you would alter it to your preferences I used the blue css 3 gradient enhancement as the example.

View attachment 32781

Code:
/* PAGE NODE TITLE BAR ENHANCEMENTS */
 
.pagenode_container .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;
}
.pagenode_container .titleBar  #pageDescription ,  .pagenode_container .titleBar p{
    color: #DCCDBB;
}
 
.pagenode_container .titleBar #pageDescription a{
  color: #f7e5b6;
  font-weight: bold;
}
 
.pagenode_container  .titleBar h1 {
  color: #f7e5b6;
  text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
}
 
 
/* PAGE NODETITLE BAR ENHANCEMENTS */

This didn't seem to work for us. Does it need to be made !important somewhere to override the defaults?

The other enhancements worked fine though.
 
I tried on the default theme, thinking it might be something on our custom style but .pagenode_container doesn't seem to work...
 
Thanks for this Shelley :)

Just incase no one has worked it out yet, you can also make this work for the thread list in your forums, using .forum_view

Dave.
 
I've just tested it on multiple styles and the css works spanning multiple installations.

I'm obviously doing something wrong but all your other modifications have worked fine.

Would you mind testing it in Firebug on our site? I can't PM you but please PM me if that's ok.
 
I'm obviously doing something wrong but all your other modifications have worked fine.

Would you mind testing it in Firebug on our site? I can't PM you but please PM me if that's ok.

Sorry I haven't got the time to debug this for testing.

Ensure you haven't though, pasted the code in another styles extra css template this may account for it not displaying. You may have already style the titleBar already? Your probably best linking to your site specifically to the area and style your having issues on and somebody will pop in and isolate the issue.
 
Sorry I haven't got the time to debug this for testing.

Ensure you haven't though, pasted the code in another styles extra css template this may account for it not displaying. You may have already style the titleBar already? Your probably best linking to your site specifically to the area and style your having issues on and somebody will pop in and isolate the issue.

Thanks, i'll keep trying to debug it. I tried on a fresh install on the default style and it still didn't work then.
 
Thanks, i'll keep trying to debug it. I tried on a fresh install on the default style and it still didn't work then.

If you haven't got this resolved by tonight I'll take a look but i'm sure you'll have it fixed by then though.
 
Top Bottom